Grid Break

import { GridBreak } from '@/components/blocks/grid-break'

import { GridBreak } from '@/components/blocks/grid-break'

export default function GridBreakDemo() {
  return (
    <div>
      <GridBreak
        eyebrow="Lab · Deconstruction"
        heading="A grid that shows its working."
        cells={[
          {
            kicker: 'Structure',
            title: 'Seated on the twelve-column seat',
            body: 'At rest this is an ordinary ruled editorial grid, hairline borders, strict spans, nothing loose.',
          },
          {
            kicker: 'Shear',
            title: 'Scroll breaks the seat',
            body: 'Every cell leaves along its own seeded vector, translation and a few tenths of a degree, never chaos.',
          },
          {
            kicker: 'Skeleton',
            title: 'The drafting layer surfaces',
            body: 'Cell coordinates and construction lines fade up as the layout comes apart, like a pasteboard showing its marks.',
          },
          {
            kicker: 'Reseat',
            title: 'Reverse restores the grid',
            body: 'The break is a pure function of scroll position, scrub back and every cell reseats to the millimetre.',
          },
          {
            kicker: 'Doctrine',
            title: 'Seeded, scroll-driven, still under reduced motion',
            body: 'mulberry32 vectors, no loop at rest, and the assembled grid is the reduced-motion poster.',
          },
        ]}
      />
      {/* scroll runway so the break has room to play in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}