ScrollScenes

import { Heading, ProgressBar, ScrollScenes, Stack, Text } from "@zedtech/zedkit-ui";

const steps = [
  { id: "plan", title: "Plan the week", text: "One list: what has to ship, and who owns it.", value: 0 },
  { id: "track", title: "Track the work", text: "Progress updates as people tick tasks.", value: 55 },
  { id: "ship", title: "Ship with confidence", text: "Everything is green: publish in one click.", value: 100 },
];

// The caption says it all; the visual is decoration, hidden from assistive tech.
<ScrollScenes
  scenes={steps.map((step, index) => ({
    id: step.id,
    caption: (
      <Stack gap="sm">
        <Text variant="muted">Step {index + 1} of {steps.length}</Text>
        <Heading level={3}>{step.title}</Heading>
        <Text variant="muted">{step.text}</Text>
      </Stack>
    ),
    children: (
      <Stack aria-hidden="true" inert>
        <ProgressBar value={step.value} label="Week 43 progress" />
      </Stack>
    ),
  }))}
/>

import { Heading, ProgressBar, ScrollScenes, Stack, Text } from "@zedtech/zedkit-ui";

// Two scenes, a shorter scroll per scene (default 60svh).
<ScrollScenes
  className="[--zk-scenes-step:45svh]"
  scenes={[
    {
      id: "before",
      caption: <Heading level={3}>Before: one long form</Heading>,
      children: (
        <Stack aria-hidden="true" inert>
          <ProgressBar value={18} label="Completed sign-ups" />
          <Text variant="muted">18% of visitors finished the form.</Text>
        </Stack>
      ),
    },
    {
      id: "after",
      caption: <Heading level={3}>After: three short steps</Heading>,
      children: (
        <Stack aria-hidden="true" inert>
          <ProgressBar value={64} label="Completed sign-ups" />
          <Text variant="muted">64% of visitors finished the steps.</Text>
        </Stack>
      ),
    },
  ]}
/>

import { Heading, ScrollScenes, Stack, Text, ThemeScope } from "@zedtech/zedkit-ui";

const looks = [
  { id: "mist", title: "Mist", text: "The stock look: quiet chrome, Inter." },
  { id: "press", title: "Press", text: "Editorial type for a reading product." },
  { id: "tide", title: "Tide", text: "Warm colour and a bit more space." },
];

<ScrollScenes
  scenes={looks.map((look) => ({
    id: look.id,
    caption: (
      <Stack gap="sm">
        <Heading level={3}>{look.title}</Heading>
        <Text variant="muted">{look.text}</Text>
      </Stack>
    ),
    children: (
      <ThemeScope identity={look.id} aria-hidden="true" inert>
        <Text className="font-semibold">Harbor Studio</Text>
        <Text variant="muted">Project tracker</Text>
      </ThemeScope>
    ),
  }))}
/>

import { Heading, ScrollScenes, Stack, Text } from "@zedtech/zedkit-ui";

const plans = [
  { id: "solo", title: "Solo", text: "One person, one project.", price: "$0" },
  { id: "crew", title: "Crew", text: "A small team, one workspace.", price: "$29" },
  { id: "studio", title: "Studio", text: "Every workspace, with SSO.", price: "$99" },
];

<ScrollScenes
  scenes={plans.map((plan) => ({
    id: plan.id,
    caption: (
      <Stack gap="sm">
        <Heading level={3}>{plan.title}</Heading>
        <Text variant="muted">{plan.text}</Text>
      </Stack>
    ),
    children: (
      <Stack aria-hidden="true" inert>
        <Text className="font-semibold">{plan.price}</Text>
        <Text variant="muted">per month</Text>
      </Stack>
    ),
  }))}
/>