Premium motions in Next.js: the 15 patterns of the Studio Modular site, step by step

In a Next.js 14+ project with App Router, TypeScript and Tailwind, set up the
animation infrastructure:

1. Install: gsap @gsap/react embla-carousel-react
2. Register the plugins once in lib/gsap.ts:
   gsap.registerPlugin(ScrollTrigger, SplitText, useGSAP); export gsap.
   Imported by client components alone.
3. Create the utility hooks that EVERY motion will use as
   umbrellas (it is the pattern of the audited site):
   - usePrefersReducedMotion(): it reads '(prefers-reduced-motion: reduce)';
     motion components initialize NO effects when it is true (rather than
     "reducing" alone: many mount no logic whatsoever).
   - useMediaQuery(query): reactive to matchMedia, for per-component
     breakpoint gates (parallax on >= 980px alone,
     stacking on >= 1440px alone, for example).
   - useFontsReady(family: string): it resolves when
     document.fonts.load(`16px '${family}'`) returns fonts; a mandatory
     gate before any SplitText.
4. Design tokens in globals.css (the audited site derives animation
   measurements from the tokens):
   :root {
     --tk-radius: 1.25rem;          /* the default radius of media/cards */
     --tk-btn-height: 3.5rem;
     --tk-header-height: 4.5rem;
     --tk-speed-ui: 0.25s;
     --tk-stacking-gap: 1.25rem;
   }
5. The motion component pattern (document it in an internal README):
   "use client" + useGSAP({ scope }) + gates (reduced motion,
   breakpoint, fonts) + a ResizeObserver for recalculation +
   an IntersectionObserver to pause work outside the viewport.
   No global listeners outside a cleanup.
6. A centralized ScrollTrigger.refresh(): after relevant images load
   and after layout changes (the util can expose
   refreshOnImagesLoaded(scope)).
Deliver the complete files.

Create a "CircleSwapButton" component in Next.js (pure CSS):

1. Markup: <a class="btn"> <span class="circle" aria-hidden>
   <i>→</i></span> <span class="label">Label</span>
   <span class="circle" aria-hidden><i>→</i></span> </a>
2. CSS:
   .btn { position: relative; display: inline-flex; align-items:
     center; height: var(--tk-btn-height); border-radius: 999px;
     padding-inline: 0 var(--tk-btn-height);
     transition: padding-inline .25s; }
   .btn:active { scale: .98; }
   .circle { position: absolute; width: var(--tk-btn-height);
     aspect-ratio: 1; border-radius: 50%;
     background: var(--tk-btn-circle-bg);
     display: grid; place-items: center;
     transition: scale .2s ease-in; }
   .circle:first-child { left: 0; transform-origin: left center;
     scale: 1; } .circle:first-child i { rotate: -45deg; }
   .circle:last-child { right: 0; transform-origin: right center;
     scale: 0; } .circle:last-child i { rotate: 45deg; }
   .circle i { transition: rotate .2s ease-in; }
   .btn:is(:hover, :focus-visible) {
     padding-inline: var(--tk-btn-height) 0; }
   .btn:is(:hover, :focus-visible) .circle:first-child { scale: 0; }
   .btn:is(:hover, :focus-visible) .circle:last-child { scale: 1; }
   .btn:is(:hover, :focus-visible) .circle i { rotate: 0deg; }
   .btn:is(:hover, :focus-visible) .label {
     color: var(--tk-btn-color-hover);
     background: var(--tk-btn-bg-hover); }
   (the padding-inline switching sides opens room for the circle at the
   opposite end without changing the total width)
3. The trigger-by-child pattern (a card hover drives the button):
   .trigger-parent:has(.trigger-child:is(:hover, :focus)) .btn
   { …the same hover rules… }
4. Color variants through CSS vars (--tk-btn-*) in modifiers.
5. focus-visible with a ring of its own beyond the state; touch keeps the
   resting state.

Create a "ScrollBadge" component in Next.js (a Server Component, CSS alone):

1. An accessible SVG (aria-hidden on the decorative part + sr-only text "Scroll
   down"): <svg viewBox="0 0 100 100"> <defs> <path id="ring"
   d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0"/> </defs>
   <text><textPath href="#ring">SHORT PHRASE • SHORT PHRASE •
   </textPath></text> </svg> + a central arrow icon.
2. CSS:
   .badge-text svg { animation: badge-rotate 16s linear infinite; }
   @keyframes badge-rotate { to { transform: rotate(360deg) } }
   .badge-icon { animation: badge-bounce 1.6s ease-in-out infinite; }
   @keyframes badge-bounce { 0%, 100% { transform: translate(-10%) }
     50% { transform: translate(10%) } }
   (the bounce runs on the axis the arrow points along; for a vertical arrow,
   swap in translateY)
3. transform-origin: center on the SVG; a fluid size with clamp().
4. The badge is a link to the first section (native smooth scroll through
   scroll-behavior or scrollIntoView).
5. prefers-reduced-motion: animation: none on both.

Create a client component "HeroIntro" in Next.js:

1. Structure: section[data-hero] >
   - div.logo with TWO rows of SVG: [data-logo-top] (the upper half
     of the letters) and [data-logo-btm] (the lower half); the
     wordmark is an SVG cut in half horizontally, each half with
     overflow-hidden on the wrapper;
   - figure[data-hero-media-1] and figure[data-hero-media-2]
     (next/image fill, a frame with border-radius: var(--tk-radius));
   - p[data-hero-text].
2. A timeline in useGSAP (gate: usePrefersReducedMotion() === false):
   const r = getComputedStyle(document.documentElement)
     .getPropertyValue('--tk-radius').trim();
   const tl = gsap.timeline();
   tl.fromTo('[data-logo-top] svg', { xPercent: -100 },
     { xPercent: 0, duration: 1.5, ease: 'power4.out' }, 0)
     .fromTo('[data-logo-btm] svg', { xPercent: 100 },
     { xPercent: 0, duration: 1.5, ease: 'power4.out' }, 0)
     .fromTo('[data-hero-media-1]',
       { clipPath: `inset(50% 50% 50% 50% round ${r})` },
       { clipPath: `inset(0% 0% 0% 0% round ${r})`,
         duration: 1.2, ease: 'power4.out' }, 0.2)
     .fromTo('[data-hero-media-2]', { …same… }, { …same… }, 0.4)
     .fromTo('[data-hero-text]', { opacity: 0 },
       { opacity: 1, duration: 1.2, ease: 'power4.out' }, 0.3);
   (keeping the "round r" in BOTH clip states is what preserves the
   rounded corners during the growth)
3. Images with priority + a blur placeholder; fire the timeline after
   the decode() of the hero media so the clip reveals an empty image
   in no case.
4. prefers-reduced-motion: the component mounts everything in the final state,
   with no timeline (the audited site initializes the module in no form).

Extend HeroIntro with the scroll separation:

1. Still inside useGSAP, after the entrance timeline:
   const st = {
     trigger: heroRef.current,
     scrub: 1,
     invalidateOnRefresh: true,
     start: () => `top ${heroRef.current.getBoundingClientRect().top
       + window.scrollY - 10}px`,
     end: 'bottom top'
   };
   gsap.fromTo('[data-logo-top] svg', { xPercent: 0 },
     { scrollTrigger: st, xPercent: 100, ease: 'none' });
   gsap.fromTo('[data-logo-btm] svg', { xPercent: 0 },
     { scrollTrigger: st, xPercent: -100, ease: 'none' });
   (the same configuration OBJECT can go to both tweens:
   each tween creates its own ScrollTrigger from it, the way the
   audited site does; what you can share in NO case is an already created
   instance. A cleaner alternative: a single timeline with one trigger)
2. The entrance (Motion 1) ends at xPercent: 0, so the scrub starts from that
   same value; if the user scrolls during the entrance, the default GSAP
   overwrite handles it (leave overwrite: 'auto').
3. ease 'none' is mandatory under scrub: the smoothing comes from scrub: 1.
4. prefers-reduced-motion: no scrub (the wordmark scrolls normally
   with the page).

Create a "NavPill" component in Next.js:

1. Structure: a fixed central nav > ul.menu (the pill: background
   rgba(255,255,255,.8), backdrop-filter: blur(7px), border-radius
   pill, overflow hidden, height var(--tk-btn-height)) > links with
   generous padding-inline.
2. CSS (progressive enhancement with @supports):
   @supports (anchor-name: --a) {
     .menu { --pad: 1.5rem; --off: .625rem; }
     .menu a[aria-current="page"] { anchor-name: --nav-active; }
     .menu a:is(:hover, :focus-visible) { anchor-name: --nav-hover; }
     .menu::before {
       content: ''; position: absolute; z-index: -1;
       position-anchor: --nav-active;
       left: calc(anchor(start) + var(--off));
       width: calc(anchor-size(width) - var(--off) * 2);
       height: calc(100% - var(--off) * 2);
       border-radius: inherit; background: var(--tk-color-accent);
       transition: left .25s ease-out, width .25s ease-out;
       pointer-events: none;
     }
     .menu:has(a:is(:hover, :focus-visible))::before {
       position-anchor: --nav-hover;
     }
   }
3. Fallback without support (older Safari/Firefox): inside a
   @supports not, the active link gains the tablet as a background
   of its own (with no slide). The menu stays 100% functional.
4. aria-current="page" on the active link (through usePathname) is what
   positions the tablet at rest: keep it correct per route.
5. The slide follows keyboard focus as well (focus-visible in the
   selector), for free.

Create a client component "BloomMenu" in Next.js:

1. Structure: button[data-menu-trigger] (in the header) +
   div.overlay (fixed inset-0 z-50, background in the primary color,
   clip-path: circle(0% at 50% 50%), transition: clip-path .3s linear)
   > div.overlay-outer (the same clip and transition, with
   transition-delay: .25s) > div.overlay-inner (height: 100dvh,
   scale: 0, transition: scale .3s .25s) holding the navigation.
2. The open state (an 'overlay-open' class on <html>):
   .overlay-open .overlay,
   .overlay-open .overlay-outer { clip-path: circle(80% at 50% 50%); }
   .overlay-open .overlay-inner { scale: 1; }
   .overlay-open { overflow: clip; }   /* locks the native scroll */
3. An accessible toggle (replicate it faithfully):
   - aria-expanded on the button; the label alternates "Menu"/"Close" (the texts
     coming from props or a dictionary);
   - the overlay receives the inert attribute while CLOSED (focus enters
     it invisibly in no case) and loses the inert on opening;
   - Escape closes; on closing, the focus returns to the button; a "blur guard"
     on the last focusable element returns the focus to the button (a loop).
4. Large menu links; on navigating, close before the push.
5. prefers-reduced-motion: swap the circles for a plain fade
   (an opacity transition), keeping the whole ergonomics.

Create a client component "InkText" in Next.js:

1. Structure: div[data-ink-text] with the paragraph(s). CSS:
   the base text in a faded color (--tk-color-dim); 
   .line { position: relative; }
   .line-ink { position: absolute; top: 0; left: 0; width: 100%;
     pointer-events: none; z-index: 1; color: var(--tk-color-ink);
     clip-path: inset(0 100% 0 0); }
2. Pipeline (useGSAP), after useFontsReady(family) ALONE:
   let split, tl;
   const build = () => {
     tl?.revert(); split?.revert();
     split = SplitText.create(els, { type: 'lines',
       linesClass: 'line',
       onSplit: (self) => {
         self.lines.forEach((line) => {
           line.innerHTML += `<span class="line-ink" aria-hidden="true">
             ${line.innerHTML}</span>`;
         });
         tl = gsap.timeline({ scrollTrigger: {
           trigger: rootRef.current,
           start: 'top 80%', end: 'bottom 40%', scrub: 0.8 } })
         .to(rootRef.current.querySelectorAll('.line-ink'), {
           clipPath: 'inset(0 0% 0 0)', duration: 1.5,
           ease: 'none', stagger: 1.5 });
       } });   // stagger === duration ⇒ lines in exact sequence,
   };          // with no overlap and no gap
   build();
   new ResizeObserver(build).observe(rootRef.current);
   (cleanup: revert the split and the tl + disconnect the observer)
3. Accessibility: the clones carry aria-hidden (the base text gets read
   already); no duplicated aria.
4. prefers-reduced-motion: no split; render the text directly in
   the full color.

Create a client hook "useParallax(scopeRef)" in Next.js:

1. Inside useGSAP({ scope }), with mm = gsap.matchMedia():
   mm.add('(min-width: 980px)', () => {
     gsap.utils.toArray('[data-parallax]', scope).forEach((el) => {
       gsap.to(el, {
         y: el.dataset.offset || '10%',
         ease: 'none',
         scrollTrigger: { trigger: el, start: 'top bottom',
           end: 'bottom top', scrub: 1 }
       });
     });
   });
2. Declarative use in the markup:
   <figure data-parallax data-offset="14%">…</figure>
   Negative offsets ("-8%") drift the other way.
3. The outer frame needs slack (controlled visible overflow or
   bleed in the layout) so the drift exposes no empty edges.
4. matchMedia unmounts the triggers outside the breakpoint already; reduced
   motion falls under the same gate (add the condition to the query:
   '(min-width: 980px) and (prefers-reduced-motion: no-preference)').

Create a client component "CircleMorph" in Next.js:

1. Structure: div[data-circle-morph] (a wrapper with aspect-ratio 1/1 or
   controlled) > div[data-circle-item] (the media, overflow hidden,
   initial clip-path: inset(0% round var(--tk-radius))).
2. useGSAP (gate: reduced motion turns it off):
   gsap.to('[data-circle-item]', {
     scrollTrigger: { trigger: rootRef.current, scrub: 1,
       invalidateOnRefresh: true,
       start: 'top bottom', end: 'bottom bottom' },
     clipPath: 'inset(0% round 50%)', ease: 'none'
   });
   (animating the inset radius alone, keeping 0% on the four edges,
   gives the rectangle → circle morph without changing the size)
3. For a perfect circle, the item needs a 1:1 aspect in the final
   stretch; on wide wrappers, accept the ellipse (elegant as well) or
   animate the lateral inset too until it squares up.
4. The image with object-fit: cover and a centered composition (the final
   circular crop has to work as framing).

Create a client component "StackingCards" in Next.js:

1. Structure: section[data-stacking] > ol > li.stack-item *N, each one
   with an article.card (the content). The component sets
   --stack-total: N on the container.
2. CSS (active with .can-sticky on the container alone):
   .can-sticky { padding-bottom: calc(var(--stack-total) *
     var(--tk-stacking-gap)); margin-top: calc(var(--tk-stacking-gap)
     * -1); }
   .can-sticky .stack-item { position: sticky;
     top: calc(var(--tk-header-height)); }
   .can-sticky .stack-item:nth-child(1) { translate: 0
     calc(var(--tk-stacking-gap) * 1); }
   .can-sticky .stack-item:nth-child(2) { translate: 0
     calc(var(--tk-stacking-gap) * 2); }
   …generalize it with a util or an inline style --i and
   translate: 0 calc(var(--tk-stacking-gap) * var(--i)).
   .card { height: var(--stack-card-height, auto); }
3. Measurement (the heart of the component):
   - availableHeight = viewport - (half the top padding +
     the header height + a margin);
   - tallestCard = max(offsetHeight of the cards) with the height var
     REMOVED before measuring;
   - if tallestCard < availableHeight: set
     --stack-card-height: tallestCard px on all of them (equal heights give
     the perfect fan) and turn .can-sticky on; otherwise turn it all off.
4. Gates: useMediaQuery('(min-width: 1440px)') turns on and off a
   ResizeObserver that runs the measurement; usePrefersReducedMotion()
   true ⇒ the component initializes in no way (a static list).
5. No ScrollTrigger: native sticky does the stacking on its own.

Create a client component "DirectionalMarquee" in Next.js:

1. Props: speed (default 0.8), reverse (default false), children
   (the band items). Structure: div.marquee (overflow hidden) >
   div.track > div.group (the items); the component clones the group
   to fill it: if group.offsetWidth < viewport, clone the inner items
   ceil(viewport/width) - 1 times; then append TWO copies
   of the group to the track. Store: groupW, trackW and the wrap limits
   (min = -(trackW - viewport), reset = -(groupW - viewport),
   max = 0, resetUp = -groupW * 2).
2. Movement (useGSAP):
   const setX = gsap.quickSetter(track, 'x', 'px');
   let x = -track.offsetWidth * 0.5;   // the middle of the path: slack
                                       // for both directions
   const tick = () => {
     const step = (1.5 - Math.pow(0.8, gsap.ticker.deltaRatio()))
       * speed;                        // FPS compensation
     const movingLeft = (scrollDir === 'down') !== reverse;
     if (movingLeft) { if (x <= min) x = reset; x -= step; }
     else            { if (x >= 0)  x = resetUp; x += step; }
     setX(x);
   };
3. Direction: a passive scroll listener comparing window.scrollY with
   the previous value → scrollDir 'down' | 'up'.
4. An IntersectionObserver on the component: entered → gsap.ticker.add(tick);
   left → gsap.ticker.remove(tick). The cleanup removes it all.
5. Resize: a 250ms debounce → re-clone and re-measure (remove the old clones
   first).
6. Accessibility: aria-hidden on the band + an sr-only version of the content;
   prefers-reduced-motion: render the band static (with no clones and no
   ticker: the audited site does exactly that).

Create a client component "CursorBadgeCard" in Next.js:

1. Structure: article.card (position relative, [data-chaser-parent])
   > media/content + div.badge ([data-chaser], position absolute
   top-0 left-0, pointer-events none) > div.badge-text (a circular SVG
   textPath, animation: badge-spin 7s linear infinite, scale: 0,
   transition: scale .2s ease-out) + div.badge-core (a central label or arrow,
   scale 0, transition .2s).
   .card.active .badge-text, .card.active .badge-core { scale: 1; }
2. The chase (useGSAP; gates: matchMedia('(hover: hover)') and
   reduced motion false):
   const toX = gsap.quickTo(badge, 'x', { duration: .4,
     ease: 'power3' });
   const toY = gsap.quickTo(badge, 'y', { duration: .4,
     ease: 'power3' });
   let first = true;
   const move = (e) => {
     const r = card.getBoundingClientRect();
     const x = e.clientX - r.left, y = e.clientY - r.top;
     if (first) { toX(x, x); toY(y, y); first = false; }
     else { toX(x); toY(y); }
   };   // (passing the value 2x sets from and to: the badge IS BORN under
        //  the cursor in place of traveling from the corner)
   pointerover → card.classList.add('active') +
     card.addEventListener('pointermove', move);
   pointerout → remove the class and the listener; first = true.
3. The whole card is a link; the badge is decorative (aria-hidden).
   Keyboard focus shows the badge centered (the active class through
   focus-within, with no chase).
4. On touch: none of it mounts; the card works as an ordinary link.

Create two client utilities in Next.js:

1. "MasonryTwo": it receives children (cards);
   - refs for col-a and col-b (a 2-column grid on >= 1150px, 1 on
     mobile);
   - distribute(matches): on desktop, item i goes to column i % 2;
     otherwise all of them to col-a; at the end, an 'is-ready' class on the root
     (the CSS keeps opacity 0 until is-ready so the redistribution
     fails to blink);
   - matchMedia('(min-width: 1150px)') with a 'change' listener
     redistributes. (A CSS-first alternative: columns/grid-template-rows
     masonry once support arrives; the JS distribution guarantees the
     ALTERNATING order, which CSS columns fails to give.)
2. "FusedTiles": it receives children (tiles with border: 1px solid);
   - each tile: width: calc(100% + 1px) and
     translate: 0 calc(var(--tile-row) * -1px);
   - assignRows(): it groups the tiles by Math.round(rect.y), assigns
     --tile-row = theRowIndex to each one (row 0 → 0, row 1 → 1,
     …) through style.setProperty;
   - a ResizeObserver on the container runs assignRows (the breaks change
     with the viewport).
   - The result: vertical and horizontal borders fused into a continuous
     1px, whatever the break.
3. Both with no scroll animation: they are composition utilities that
   the reveal motions (where they exist) inherit and nothing more.

Create a client component "TestimonialLoop" in Next.js with Embla:

1. useEmblaCarousel({ loop: true, align: 'start',
   containScroll: false }). Slides: flex 0 0 auto, width max-content
   with a max-width (36rem for example), a gap of ~50px through margins.
2. Cursor: a grab/grabbing class on the viewport during the drag
   (embla exposes pointerDown/Up through events).
3. Prev/next arrows (they can use the CircleSwapButton from Motion 12 in a
   compact version); with loop: true there are no ends, so the arrows
   disable in no case.
4. Accessibility: a region with aria-roledescription="carousel",
   slides with role="group" and "N of M" labels; announce changes in
   aria-live="polite".
5. Autoplay: leave it OUT (the audited site uses none; testimonials ask for
   reading at the user's pace).
6. prefers-reduced-motion: keep the slider (the user controls it),
   and reduce the snap duration alone if it is configurable.

Create a "NowPlaying" component in Next.js:

1. A Server Component with the data ({ track, artist, url }) coming from
   props or from a fetch with revalidate (3600 for example); a static fallback
   if the source fails.
2. Markup: <p class="now-playing"> <span class="artist">…</span>
   <a class="track" href={url}>… <i>↗</i></a> </p>
3. CSS:
   .now-playing { display: inline-flex; align-items: baseline;
     gap: .5rem .875rem; flex-wrap: wrap; }
   .now-playing::before { content: ''; width: .625rem;
     aspect-ratio: 1; border-radius: 50%;
     background: var(--tk-color-accent); align-self: center;
     animation: live-pulse 1.4s ease-out infinite; }
   @keyframes live-pulse { 0%, 100% { scale: .4 } 50% { scale: 1 } }
   @media (hover: hover) {
     .now-playing:has(.track:is(:hover, :focus)) i {
       rotate: 45deg; scale: .9;
       transition: rotate .2s, scale .2s; } }
4. prefers-reduced-motion: animation: none on the pulse (a static dot).
5. The charm lies in the specificity: labels like "playing in the
   studio:" make the widget feel like a person rather than a feature.