Creates high-quality motion systems with staggered animations, smooth entrances, count-up numbers, hover glows, animated gradients, floating elements, and parallax. Use when building motion design, adding animations, implementing entrance transitions, or when the user asks for Apple/Linear/Vercel/Stripe-style motion.
Build motion that feels intentional, enhances UX, and never distracts. Aim for subtle but impressive. Reference: Apple, Linear, Vercel, Stripe.
Every motion must: intentional (has a reason), enhance UX (guides or delights), not distract (support, don’t compete), subtle but impressive (refined, not flashy).
Reveal lists, cards, or grid items with small delays so the eye follows a clear order.
staggerChildren + delayChildren, or map over items with custom and transition: { delay: index * 0.05 }.First paint of a section or page should feel like a single, cohesive reveal.
initial={{ opacity: 0 }} then animate/whileInView to opacity: 1. Optionally subtle y or scale.once: true for scroll-triggered entrances so they don’t replay on scroll back.stiffness: 300–400, damping: 25–30. Duration fallback: 300–400ms.When showing stats, KPIs, or milestones, animate from 0 (or start value) to the target.
useMotionValue + useTransform + useSpring, or requestAnimationFrame with easing (e.g. easeOutQuart).whileInView). Run once.Subtle glow on interactive elements (buttons, cards, icons) to signal interactivity and add depth.
box-shadow with a color tint (e.g. primary at 20–30% opacity), slightly larger spread on hover. Or filter: drop-shadow() for icons.boxShadow or use a pseudo-element / wrapper with animated opacity and blur.Gradients that shift slowly (backgrounds, hero sections, or accents) for depth without pulling focus.
@property + transition, or Framer Motion on a wrapper with background).Gentle vertical or subtle scale motion for decorative elements (icons, shapes, badges).
y or scale with repeat: Infinity, repeatType: "reverse", long duration (3–5s), ease in-out.Slight difference in scroll speed between foreground and background to add depth.
transform: translateY or a small parallax library; keep it performant (transform/opacity only).motion components, useInView, useScroll, useTransform for scroll-linked motion.transform and opacity only when possible. Avoid animating width/height/top/left on large trees. Use will-change sparingly and only when needed.prefers-reduced-motion: reduce by disabling or shortening non-essential motion (entrances, floating, parallax). Keep count-up and critical feedback if needed, but simplify.| Technique | Use for | Keep it |
|---|---|---|
| Stagger | Lists, grids, card stacks | 40–80ms delay, short total run |
| Entrance | Sections, modals, pages | One-shot, spring, <400ms |
| Count up | Stats, KPIs, milestones | In-view once, ~1s, ease-out |
| Hover glow | Buttons, cards, icons | Soft, on-brand, subtle |
| Animated grad | Backgrounds, hero | Slow (8–15s), low saturation |
| Floating | Decorative elements | Small movement, 3–5s |
| Parallax | Hero/feature depth | Subtle ratio, no layout thrash |