<CollapsingStack
  items={items}          // { title, description, tags?, videoSrc, posterSrc?, href?, linkLabel? }[]
  rowHeight="6.25rem"    // height of one collapsed heading row (desktop)
  bgColor="hsl(var(--background))"
/>

The fold is pure CSS: every panel is position: sticky, with its top offset by its index times rowHeight below the site header, so no scroll listeners run. A small script plays only the videos on screen and pauses the rest; under prefers-reduced-motion they stay paused on their first frame or poster. Under 768px the video drops beneath the copy. Keep the list to about five panels, since each one adds a heading row to the pinned stack.

<BrandControlBanner
  videoSrc="/contact-card-hq.mp4"
  posterSrc="/contact-card-poster.webp"
  heading={"Let's build something\namazing together"}   // \n forces the line break
  ctaText={CTA.call.label}
  calendlyUrl={callHref(slug)}  // omit to use ctaHref instead
  videoObjectPosition="top"
/>

The frame is 21:9 on phones stretching to 21:7 on desktop, with a 4:5 portrait crop under 640px so the headline and button have room. A left-to-right gradient keeps the text legible over the video; on phones it runs top-to-bottom instead. The video is muted, looped and marked decorative, so nothing here is read by screen readers except the headline and the button. The Calendly popup is opened by a click handler that the Header's services menu binds once per page, so the banner needs Header on the same page and no script of its own.

Same hero with mediaSide="left": the panels take the wide column on the left and the copy moves to the right. The tiles are mirrored into the left gutter to match. Source order does not change, so the H1 still comes first for screen readers, and under 1000px both variants stack copy over panels.

// Panels, left to right. Strings or { src, type?, alt?, poster? }.
const heroMedia = ["/video/1.mp4", "/video/2.mp4", "/video/3.mp4"];

// Inline SVG shown before the eyebrow text. Any icon works; it takes the
// eyebrow's colour through currentColor.
const heroEyebrowIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ...>...</svg>`;

// Floating tiles. Each one is an input: the label, the icon or image, where it
// sits, how fast it drifts on scroll, its size, entry delay and tilt.
const gutter = "((100% - 72rem) / 2)";   // free space beside the 72rem content box
const heroTiles = [
  { type: "icon",  iconName: "BarChart3",             label: "Growth",          x: `calc(100% - ${gutter} - 60px)`, y: "8%", parallaxSpeed: 0.5,  size: "lg", delay: "1.2s", rotate: 4 },
  { type: "icon",  iconName: "Users",                 label: "Models",          x: `calc(100% - ${gutter} + 30px)`, y: "30%", parallaxSpeed: 0.5,  size: "sm", delay: "1.6s", rotate: 5 },
  { type: "icon",  iconName: "FileSpreadsheet",       label: "Brand",           x: `calc(100% - ${gutter} - 30px)`, y: "52%", parallaxSpeed: 0.4,  size: "sm", delay: "1.8s", rotate: -4 },
];

<AccordionHero
  eyebrow="Animated video studio"
  eyebrowIcon={heroEyebrowIcon}  // optional, sits before the eyebrow text
  title="Studio-grade animation, without the studio timeline"
  description="Custom motion graphics, 2D and character animation..."
  primaryCta={{ label: CTA.call.label, href: callHref(slug), external: true }}
  secondaryCta={{ label: "See animation examples", href: "#portfolio" }}
  media={heroMedia}            // ({ src, type?, alt?, poster? } | string)[], first one opens on load
  initialIndex={0}
  aspect={9 / 16}              // width / height of the media, sizes the open panel
  audio={true}                 // open panel plays with sound after the first click or tap
  mediaSide="right"            // "left" mirrors it: panels left, copy right
>
  <Fragment slot="background">
    <BackgroundBoxes />
    <div class="absolute inset-0 hidden min-[1400px]:block pointer-events-none">
      <FloatingTiles tiles={heroTiles} wash={false} />
    </div>
  </Fragment>
</AccordionHero>

FloatingTiles props (the tiles in the background slot)

TileProps (one tile)

Motion is a plain CSS transition on left and width with one slow decelerating ease; a small script recomputes pixel positions on focus change and on resize. Each video is rendered at the open panel's width and centred, so a sliver is a live crop of the same frame it reveals and nothing rescales mid-transition. Only the open panel's video plays, and only while the stage is on screen and the tab is visible. Panels are keyboard reachable: Tab to a panel, then the arrow keys move along the row. Under 1000px the copy centres above the stage and the crosshairs clip to it. Under prefers-reduced-motion the transitions are off and videos stay on a still frame. The background slot is pointer-transparent except for the tiles, so the box grid still flashes under the cursor through the empty space around the copy.

<ScrubHero
  videoSrc="/mascot-video.mp4"     // head-turn clip: left, straight, right
  characterX={0.72}                // where the head sits across the frame (0..1)
  tone="light"                     // "dark" for dark footage: white text and pills, black wash
  text={[                          // one or two short paragraphs, card-deck type
    "Meet your brand mascot, made with AI. Move your cursor and he follows.",
    "Same face, same voice, in every video you post.",
  ]}
  features={[                      // exactly four, 3 words max, all the same pill
    { label: "Locked character sheet", icon: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>' },
    { label: "Brand voice",           icon: '<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>...' },
    { label: "Launch video",          icon: '<rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/>' },
    { label: "Series ready",          icon: '<rect x="2" y="6" width="14" height="12" rx="2"/><path d="m22 8-6 4 6 4Z"/>' },
  ]}
/>

The section is 100svh tall with a 560px floor. On desktop the mouse is tracked anywhere on the page while the section is on screen; on touch, the finger over the section itself. Each move sets a target frame and the video eases toward it a few percent per animation frame, waiting for the previous seek to finish before issuing the next, so the head never stutters. On load it seeks to the straight frame so the character is not caught looking sideways. The pills rise in one after another with the same stagger as the service page heroes. Under prefers-reduced-motion the pills are simply visible; the scrub itself still follows the pointer.

Every music video is built in three layers : motion, lyrics, and delivery.

Motion

01

Lyrics

02

Delivery

03

We start with your track, not a template. The waveform decides the cuts: kicks and snares trigger the motion, drops land as glow and pulse, and every lyric hits the screen in time with the vocal, not eyeballed and slightly off.

Then we finish it for release. Visualizers loop without a seam, audio levels stay intact, and one concept exports in every ratio your fans watch in, so the same video looks intentional on a phone, in a feed, or on a TV.

What each layer includes

Motion

01

Motion01

• Kick & snare hits
• Drop triggers
• Glow & pulse
• Shake & parallax
• Beat-timed cuts
• Driven by the waveform

Lyrics

02

Lyrics02

• Word-level timing
• Typographic motion
• Highlights
• Reveals
• Timed to the line
• Synced to the vocal

Delivery

03

Delivery03

• Loops without a seam
• Audio levels intact
• 9:16, 1:1 and 16:9
• Hook-first teasers
• Upload-ready files
• Sized per channel

const syncKeywords = [
  { word: "waveform", emoji: "🎚️" },   // plain strings work too: "waveform"
  { word: "lyric", emoji: "🎤" },
  { word: "loop", emoji: "🔁" },
  { word: "ratio", emoji: "📱" },
];

const syncLayers = [
  { label: "Motion", image: "/thumbnail/all/52.webp", alt: "...", items: ["Kick & snare hits", ...] },
  { label: "Lyrics", video: "/ai video/vid1.mp4", items: [...] },   // muted, looping clip on the face
  { label: "Delivery", items: [...] },                              // no media: solid ink tone
];

<CardDealReveal
  title="Every music video is built in three layers: motion, lyrics, and delivery."
  highlight="three layers"        // run of title painted with the gradient
  paragraphs={syncParagraphs}     // string[], two paragraphs of 40 to 50 words
  keywords={syncKeywords}         // (string | { word, emoji? })[], held in coloured pills
  outTitle="What each layer includes"
  outHighlight="each layer"
  cards={syncLayers}              // { label, items, number?, image?, video?, alt? }[], exactly three
  textScroll={3}                  // viewport heights the copy stays pinned
  cardScroll={3}                  // viewport heights the card row stays pinned, a third per card
/>

// Subsets. Each act only needs its own props.
<CardDealReveal acts="in" title="..." cards={syncLayers} />            // cards sink under the next section
<CardDealReveal acts="text" paragraphs={syncParagraphs} keywords={syncKeywords} />
<CardDealReveal acts="in-text" title="..." cards={syncLayers} paragraphs={syncParagraphs} />

Native sticky pins plus three scrubbed ScrollTriggers, no Lenis. Nothing is tweened on the elements: every frame writes positions from progress, so scrolling back plays it in reverse exactly. The styles are global on purpose because the word wrappers are created by the script, where Astro's scoped attribute would never reach. Below 1000px both card acts are pinned stacks: one card at a time, nearly the width of the phone, slides straight in from the right and stops for most of its stretch of scroll, then the next slides in over it and the earlier ones are nudged left, peeking out from under it. Act one stacks the faces, act three the backs, already turned. Under prefers-reduced-motion everything is static with the backs showing and the copy is fully revealed. Requires gsap, already in package.json.

acts="text": the reveal panel alone

acts="in": the cards sink under whatever follows

Every music video is built in three layers : motion, lyrics, and delivery.

Motion

01

Lyrics

02

Delivery

03

Everything we shot ends up in the same pile

<ConvergingCardStack
  title="Everything we shot ends up in the same pile"
  highlight="same pile"        // run of title painted with the gradient
  cards={stackCards}           // { src, alt?, x?, y?, r? }[] | string[]
  scrollLength={1.6}
/>

Native sticky pin plus one GSAP timeline scrubbed by ScrollTrigger (scrub 1.1 gives the cards a little travel after you stop scrolling; the site has no Lenis). Offsets scale with viewport width so the scatter stays on screen on phones. Under prefers-reduced-motion the track collapses and the cards render already stacked. Requires gsap, already in package.json. The stills above are the reference assets, hotlinked from motionprompts.dev for prototyping; replace them before this ships.

<RouteMap
  eyebrow="Our process"
  title="Your shoot, from brief to delivery"
  highlight="brief to delivery"  // run of title painted with the gradient
  stops={shootRoute}        // { name, detail?, image?, t? }[], t = fraction of the route
  travellerImage="/..."     // optional: a circular still instead of the dot
  counterTotal={100}
  counterUnit="%"
  counterLabel="of the way"
/>

Native sticky pin plus one scrubbed ScrollTrigger (scrub 0.6 supplies the smoothing, the site has no Lenis). The dotted line is uncovered with an SVG mask, not by shifting the dash array, so the dots stay put. Labels pick their side from the curve (above on a crest, below in a trough), fall back when the side runs out of room or collides with a neighbour, and are re-placed by a ResizeObserver on the SVG. Under prefers-reduced-motion the track collapses, the route draws complete and every stop is lit. Requires gsap, already in package.json.

const wheelSteps = [
  { src: "/Clothes Sample/9.webp",  alt: "...", label: "Brief",        detail: "You send product photos and a few references" },
  { src: "/Clothes Sample/10.webp", alt: "...", label: "Casting",      detail: "Model, set and lighting picked to match your brand" },
  { src: "/Clothes Sample/11.webp", alt: "...", label: "Studio shoot", detail: "Every angle and every colourway, shot in one go" },
  { src: "/Clothes Sample/12.webp", alt: "...", label: "Retouch",      detail: "Skin, fabric and colour checked frame by frame" },
  { src: "/Clothes Sample/13.webp", alt: "...", label: "Delivery",     detail: "Files sized for your feed land in your inbox" },
];

<PhoneWheelSteps
  eyebrow="Our process"
  title="From product photo to a vertical still in five steps"
  highlight="five steps"      // run of title painted with the gradient
  steps={wheelSteps}          // { src, alt?, label?, detail? }[] | string[], three to six
  perStep={0.8}               // viewport heights of scroll each step owns
  spread={0.9}                // desktop arc width as a fraction of a half turn
  gap={40}                    // px between the phone's edge and the neighbouring card
/>

The radius is solved, not chosen: the design input is where the neighbouring card sits (one gap outside the phone's edge, capped at 42% of the width from centre) and R falls out of that, so the centre never empties on a narrow screen and the neighbours never drift to the edges of a wide one. It is recomputed on every refresh, so rotating a phone keeps the geometry honest. The phone is sized from the stage: from tablet up the chrome floats in the top corners and the wheel takes the whole stage, so the phone stands as tall as the viewport allows (capped at 820px and at 40% of the width). The arc is squashed vertically by 0.55 and the rotation damped by the same factor so cards lean rather than lie down, and the opacity falloff is gentle so both neighbours stay legible. Docking is a blend: within a fifth of the card spacing from centre the card is fully in the phone, and over the next third it eases between the arc pose and the dock pose. The dock pose is measured from the real screen element: the scale that covers it, the clip that trims the 9:16 card to the screen's 9:19.5 shape, and the screen's corner radius, all written with one clip-path per card per update. The phone body sits behind the cards and only the bezel ring sits above them, so a docked card is the screen. The readout always names the step nearest the phone, so it is never blank between docks. Native sticky pin plus one scrubbed ScrollTrigger (scrub 0.8 supplies the smoothing, the site has no Lenis) and overflow-x clip on the section so the off-frame cards never lengthen the page. Under prefers-reduced-motion the track collapses and the steps render as a numbered grid of stills with their captions. Requires gsap, already in package.json.

const phoneFeatures = [
  // Post-production features only. Still = a 9:16 frame showing that edit.
  { name: "Captions",         src: "/work-types/ugc.webp",                   alt: "..." },
  { name: "Motion graphics",  src: "/work-types/human-motion-graphics.webp", alt: "..." },
  { name: "Speed ramping",    src: "/work-types/one-take-ecom.webp",         alt: "..." },
  { name: "Sound effects",    src: "/work-types/meta-ads-quirky.webp",       alt: "..." },
  { name: "Background music", src: "/work-types/brand-films.webp",           alt: "..." },
  { name: "End cards",        src: "/work-types/meta-ads-storyboarding.webp", alt: "..." },
  { name: "Transitions",      src: "/work-types/multi-take-ecom.webp",       alt: "..." },
  { name: "Colour grading",   src: "/work-types/tv-ads.webp",                alt: "..." },
];

<PhoneFeatureIndex
  eyebrow="Post-production"
  title="Post-production on every AI avatar video"
  highlight="every AI avatar video"  // run of title painted with the gradient
  features={phoneFeatures}      // { name, src, alt? }[], post-production features only
  device="phone"                // "tv" for a 16:9 TV on a stand, with 16:9 stills
  perStep={0.8}                 // viewport heights of scroll per look
/>

The numbers all sit in one spot, each inside its own mask exactly one glyph tall. Leaving a feature fires four tweens on that number's layers: the mask lifts in 0.3s, the two glyphs in 0.75s with the second trailing by 0.1s, and the digit wrapper in 0.5s after a 0.5s delay, all power2.out, all by a little more than the mask height, so the number peels apart on its way out rather than lifting as one block. The next number's climb is scroll-linked: it rises from under the stage over the last 65% of the previous feature's stretch and lands at centre as its own begins, which is when the triangle hops (0.3s, one row height), the name goes to ink on a soft primary fill, the connector line beside the list fills in the primary down to that row, and the phone crossfades (0.45s, with a slight settle from 1.04). The line and the fill are the reference's accent-as-a-surface idea in the site's teal instead of canary. Scrolling back past the peel point restores the number the same way in reverse. Tabular figures on the number so nothing jitters. The number sits at the left edge of the content column, the names are centred between it and the phone, and the phone sits at the right edge. From desktop up the heading floats in the top-left corner and the grid takes the whole stage, so the phone is measured from its cell and capped at 820px and at 42% of the width. Under 1000px the number is dropped and the names and the phone sit side by side; the stills still carry their numbers for assistive tech. Native sticky pin plus one scrubbed ScrollTrigger (scrub 0.6, the site has no Lenis) for the climb and discrete tweens for the peel, the hop and the crossfade. Under prefers-reduced-motion the track collapses, the names render as a plain list and the stills as a grid with their numbers. Requires gsap, already in package.json. The stills above are the 400px reference set in /ai photoshoot; swap them for full-size exports before this ships.

<ExplodedStack
  eyebrow="What a shoot is made of"
  title="Every shoot, part by part"
  highlight="part by part"  // run of title painted with the gradient
  parts={shootParts}        // { name, detail?, tone? }[], top of the stack first
  tilt={46}                 // degrees, keep between 40 and 60
  scrollLength={2.4}
/>

Each label is bound to a layer by index, never to a position: its anchor and its leader are read from that layer's live bounding box on every update, so adding or reordering a part can never leave a name pointing at the wrong thing. Separation is staggered per layer so the parts peel off one after another, with a resting separation so the closed object still reads as something that opens. Leaders anchor at the stack's edge, not at their own layer, so they stay one length while the object moves. Labels in a column are de-collided by 54px; the label moves, the leader still points at its layer. Default tones alternate the secondary, primary, foreground and muted tokens so every part can be counted on a white stage. Native sticky pin plus one scrubbed ScrollTrigger (scrub 0.6, no Lenis, same as RouteMap). Under prefers-reduced-motion the track collapses and the object is shown already apart with every label up. Requires gsap, already in package.json.