Skip to content
Hz
esc
  • Micro
    Magnetic buttonR01 · quickTo
  • Line-mask headlineR02 · SplitText
  • OdometersoonR03 · Timeline
  • Text scrambleR04 · ScrambleText
  • Copy-button morphsoonR05 · MorphSVG
  • Directional underlinesoonR06 · Core
  • Squash togglesoonR07 · Core
  • Sliding tab indicatorR08 · Flip
  • Layout & scroll
    Flip filter gridR09 · Flip
  • Card to detailsoonR10 · Flip
  • Pinned horizontal galleryR11 · ScrollTrigger
  • Stacking cardssoonR12 · ScrollTrigger
  • Height-auto accordionR13 · Core
  • Scroll-read highlightR14 · ScrollTrigger
  • Clip-path image revealsoonR15 · Core
  • SVG line drawsoonR16 · DrawSVG
  • Physics & delight
    Velocity marqueeR17 · ScrollTrigger
  • Inertia carouselR18 · Draggable · Inertia
  • Route transitionR19 · App Router
  • Cursor followerR20 · quickTo
  • Toast stacksoonR21 · Flip
  • Draggable bottom sheetsoonR22 · Draggable
  • Cursor image trailsoonR23 · Core
  • Preloader handoffsoonR24 · Timeline
  • Pages
    All recipesHome
  • Easing labTool
  • DocsInstall and usage
  • AboutWhat Hz is
GSAP · Next.js · 24 recipes

Motion, measured.

Interaction recipes for Next.js, built with GSAP. Tune each one live, read why it works, then copy the code or install it with one command.

Browse recipes
$ npx shadcn add https://hz.sounakpal.dev/r/magnetic-button
R02 · LINE-MASK HEADLINELIVE
t 0.00 / 0.76s · stagger 0.08expo.out · 60.0 Hz
Dependencies
gsap + @gsap/react
Size
Under 150 lines each
Cleanup
useGSAP, no leaks
Accessibility
Reduced-motion fallback
Install
Copy, or shadcn CLI
Index · 24

Recipes

R01power3.out
Magnetic buttonquickToMicro
R02expo.out
Line-mask headlineSplitTextMicro
R03power3.out
Coming soon
OdometerTimelineMicro
R04none
Text scrambleScrambleTextMicro
R05back.out
Coming soon
Copy-button morphMorphSVGMicro
R06power3.out
Coming soon
Directional underlineCoreMicro
R07back.out
Coming soon
Squash toggleCoreMicro
R08expo.out
Sliding tab indicatorFlipMicro
R09power3.out
Flip filter gridFlipLayout & scroll
R10expo.out
Coming soon
Card to detailFlipLayout & scroll
R11none
Pinned horizontal galleryScrollTriggerLayout & scroll
R12none
Coming soon
Stacking cardsScrollTriggerLayout & scroll
R13power3.out
Height-auto accordionCoreLayout & scroll
R14none
Scroll-read highlightScrollTriggerLayout & scroll
R15expo.out
Coming soon
Clip-path image revealCoreLayout & scroll
R16none
Coming soon
SVG line drawDrawSVGLayout & scroll
R17none
Velocity marqueeScrollTriggerPhysics & delight
R18expo.out
Inertia carouselDraggable · InertiaPhysics & delight
R19power3.inOut
Route transitionApp RouterPhysics & delight
R20power3.out
Cursor followerquickToPhysics & delight
R21back.out
Coming soon
Toast stackFlipPhysics & delight
R22elastic.out
Coming soon
Draggable bottom sheetDraggablePhysics & delight
R23power3.out
Coming soon
Cursor image trailCorePhysics & delight
R24power3.inOut
Coming soon
Preloader handoffTimelinePhysics & delight