Interaction & Motion

Implement a scroll-triggered staggered reveal for a list of cards. Each card starts at opacity 0 and translateY 12px. As the section enters the viewport (threshold 0.15), each card animates to opacity 1 and translateY 0 with an 80ms stagger between siblings, using a cubic-bezier(0.22, 1, 0.36, 1) easing over 600ms. Honor prefers-reduced-motion by skipping the animation entirely. Use IntersectionObserver, no animation library required.

Build a magnetic CTA button. On mousemove within 120px of the button center, translate the button toward the cursor by 30% of the offset, with a spring-like ease. On mouseleave, return to (0,0) with a damped spring. Wrap the inner label in its own element that translates 50% of the parent. Creates a "label leads the button" feel. Use requestAnimationFrame for the loop. Respect prefers-reduced-motion (disable entirely).

Implement page transitions using the View Transitions API. Wrap route navigation in startViewTransition. Default transition: 280ms crossfade with a slight scale (1.005 → 1) on the incoming page. For shared elements (like a card → detail page hero image), assign matching view-transition-name on both sides for a seamless morph. Provide a no-op fallback for browsers without support. Pair with a slim top progress bar that appears for navigations >120ms.

Build a cursor-following spotlight effect for a card or section. Attach a mousemove listener; on each event, update CSS custom properties --mx and --my with the cursor position relative to the element. A ::before pseudo-element renders a radial-gradient centered at (var(--mx), var(--my)) with a soft white-alpha falloff (200px radius). The pseudo is masked by the element's rounded shape. Opacity transitions 0 → 0.6 on mouseenter, back to 0 on mouseleave. Respect prefers-reduced-motion (disable).

Build a parallax scroll section. Three absolutely-positioned background image/SVG layers behind the main content. On scroll, update each layer's transform: translate3d(0, scrollY * factor, 0). Factors 0.2, 0.5, 0.8. Use rAF + a single passive scroll listener; never modify layout properties. Constrain the effect to the section using IntersectionObserver. Pause when off-screen. Respect prefers-reduced-motion by skipping translation entirely.

Build a scroll-triggered text reveal. Wrap each word of a paragraph in a span. As the user scrolls past the section, interpolate each span's color (or opacity) from the muted color to the foreground color based on its position within the section's scroll range. Use a sticky container so the paragraph stays in view while the reveal progresses. Use scroll-linked CSS animations (animation-timeline: scroll) where supported, fall back to a rAF + getBoundingClientRect loop. Respect prefers-reduced-motion (render fully revealed).

Build a tilt-on-hover card. Wrap each card in a 3D-perspective container. On mousemove, compute the cursor offset from the card center, normalize to [-1, 1], and apply rotateY = offsetX * 6deg and rotateX = -offsetY * 6deg with a 150ms ease transition. Add a ::after pseudo-element radial-gradient that follows the cursor for the highlight. On mouseleave, smoothly reset rotation and fade the highlight. Disable for prefers-reduced-motion and touch devices.

Build a drag-to-reorder list with dnd-kit. Each row renders a grab-handle icon on the left and the row content. On dragstart, the row lifts (scale 1.02, drop shadow) and other rows shrink slightly. A 2px accent insertion line appears between rows where the drop will land. On drop, animate all rows to their new positions with framer-motion layout. Keyboard reorder: focus a handle, press Space to lift, ArrowUp/Down to move, Space to drop. Announce reorder via aria-live.

Build a button component with micro-interactions. Base state: rounded-md, 1px border, padding. :active applies transform: scale(0.97) with a 60ms transition. Adds a loading prop that swaps the label for an inline spinner without changing button width (preserve via min-width or visibility: hidden on the original label). On async success, briefly swap to a check icon + tinted background for 1200ms, then reset. Disabled state has cursor: not-allowed and opacity 0.5. Focus ring is a 2px offset accent ring.

Build a shared-element transition. On the list page, each card has data-shared-id={id}. On the detail page, the hero image has the same data attribute. On navigation, use the View Transitions API: assign matching view-transition-name to both elements. The browser animates position and size from the source to the destination automatically. After the morph completes (300ms), fade in the rest of the detail page content. Fall back to a FLIP implementation with getBoundingClientRect for unsupported browsers.