Dual Axis Chapters

import { DualAxisChapters } from '@/components/blocks/dual-axis-chapters'

import { DualAxisChapters } from '@/components/blocks/dual-axis-chapters'

export default function DualAxisChaptersDemo() {
  return (
    <div>
      <DualAxisChapters
        slate="Field manual 07 · Two axes, one gear"
        chapters={[
          {
            kicker: 'Chapter one',
            title: 'One scroll value, two directions.',
            body: 'The stage pins and your scroll becomes a gearbox: copy advances down the page while the marker strip below slides sideways at the exact same rate.',
          },
          {
            kicker: 'Chapter two',
            title: 'The strip is a ruler, not a carousel.',
            body: 'Each marker passes beneath a fixed cursor with tick marks calibrated to chapter length, you can read your position off it like a tape measure.',
          },
          {
            kicker: 'Chapter three',
            title: 'Counterpoint is the whole trick.',
            body: 'Vertical progress and horizontal drift stay locked at 1:1, printed live in the readout. Nothing eases independently; the axes cannot fall out of step.',
          },
          {
            kicker: 'Final chapter',
            title: 'Reverse the scroll, reverse the machine.',
            body: 'Every position is a pure function of scroll, scrub back and both axes retrace their path exactly. No timers, no snapping, no hijack.',
          },
        ]}
      />
      {/* scroll runway so the geared axes have room to play in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}