Motion

Calm and purposeful. Respect prefers-reduced-motion.

Timing, libraries & snippetShow

Durations

instant: 0ms — Reduced-motion fallback
fast: 200ms — Hovers, chips
base: 500ms — Section reveals
expressive: 700ms — Hero accents — sparingly
theme: 360ms — Color cross-fade (globals.css)

Libraries

motion/react — Enter/exit, layout, in-view reveals
GSAP + ScrollTrigger — Scroll scenes, brush paths
Locomotive + Lenis — Smooth scroll on marketing pages
CSS transitions — Theme, focus rings, simple hovers

import { motion } from 'motion/react';
import { ScrollGrowSection } from '@wisihe/ui-react';
import { useSectionReveal } from '@/lib/motion/sectionReveal';

/** ScrollGrowSection: one-shot section entrance (fade + rise). */
function SectionReveal() {
  const { fadeUpInitial, fadeUpAnimate, viewport, transition } = useSectionReveal();

  return (
    <ScrollGrowSection className='border-t border-border/20 bg-background py-24'>
      <motion.div
        initial={fadeUpInitial}
        whileInView={fadeUpAnimate}
        viewport={viewport}
        transition={transition}
      />
    </ScrollGrowSection>
  );
}

Do & don’t

Section reveal

Featured work

Don't

Featured work

Card hover

Hover

Don't

Hover

Don't