Scroll Director

import { ScrollDirector } from '@/components/blocks/scroll-director'

import { ScrollDirector } from '@/components/blocks/scroll-director'

export default function ScrollDirectorDemo() {
  return (
    <ScrollDirector
      slate="Production 04 · One take"
      beats={[
        {
          kicker: 'Beat one',
          title: 'The stage pins. The page keeps scrolling.',
          body: 'Position sticky holds the frame while your scroll becomes the timeline, nothing is hijacked, and the scrub reverses as honestly as it plays.',
          figure: 'rule',
        },
        {
          kicker: 'Beat two',
          title: 'Each beat holds, then hands over.',
          body: 'Beats enter over the first quarter of their slot, hold center stage, and exit clean. The cue rail tracks position like a fly-floor call sheet.',
          figure: 'pulse',
        },
        {
          kicker: 'Beat three',
          title: 'Figures are drawn, not shipped.',
          body: 'Every scene figure is structural, rules, grids, orbits built from tokens. No images to load, nothing that cannot re-theme.',
          figure: 'grid',
        },
        {
          kicker: 'Final beat',
          title: 'Cut on the last frame.',
          body: 'The director holds the closing beat instead of looping. Scroll back up to run the take again in reverse.',
          figure: 'orbit',
        },
      ]}
    />
  )
}