SVG Mask Chapters

import { SvgMaskChapters } from '@/components/blocks/svg-mask-chapters'

import { SvgMaskChapters } from '@/components/blocks/svg-mask-chapters'

export default function SvgMaskChaptersDemo() {
  return (
    <div>
      <SvgMaskChapters
        slate="Atlas 03 · Drawn masks"
        chapters={[
          {
            kicker: 'Chapter one · Aperture',
            title: 'Open on a perfect circle.',
            shape: 'circle',
            body: 'The first plate is already drawn when the page loads, a primary hairline traces the silhouette and the ink fills it. Scroll owns every millimetre of the reveal.',
          },
          {
            kicker: 'Chapter two · Threshold',
            title: 'Pass under the keyhole arch.',
            shape: 'arch',
            body: 'Each silhouette is plotted in the same 100-unit space, so the plates re-theme and rescale without redrawing a single path.',
          },
          {
            kicker: 'Chapter three · Traverse',
            title: 'Exit on the diagonal band.',
            shape: 'band',
            body: 'Scrub back up and the plates retract in reverse order, every handoff is a pure function of scroll position, never a one-way animation.',
          },
        ]}
      />
      {/* scroll runway so the final chapter can settle in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}