From 508338d28b3d6ead4637eb42d0176c86f6d451cf Mon Sep 17 00:00:00 2001
From: mehdibha <hello@mehdibha.com>
Date: Sat, 22 Aug 2026 18:44:53 +0100
Subject: [PATCH 1/2] docs: drop table demo from introduction

---
 www/content/docs/(root)/index.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/www/content/docs/(root)/index.mdx b/www/content/docs/(root)/index.mdx
index bf6a7f408..37c2d518b 100644
--- a/www/content/docs/(root)/index.mdx
+++ b/www/content/docs/(root)/index.mdx
@@ -7,8 +7,6 @@ description: A design-system builder and component registry. You compose it, pre
 
 Open code alone doesn't get you there: you own the files, but the decisions inside them are still someone else's. dotUI makes the decisions yours. The output is not our library with your colors — it is your design system.
 
-<Demo name="table/demos/invoices" />
-
 ## API philosophy
 
 ### Composition

From a7e73c45d92b04344ac93804614252127d49d486 Mon Sep 17 00:00:00 2001
From: mehdibha <hello@mehdibha.com>
Date: Sat, 22 Aug 2026 18:57:55 +0100
Subject: [PATCH 2/2] docs: drop mid beats from the composition animation

---
 .../modules/docs/composition-animation.tsx    | 583 +-----------------
 1 file changed, 20 insertions(+), 563 deletions(-)

diff --git a/www/src/modules/docs/composition-animation.tsx b/www/src/modules/docs/composition-animation.tsx
index f60d1e051..ad40a0dc9 100644
--- a/www/src/modules/docs/composition-animation.tsx
+++ b/www/src/modules/docs/composition-animation.tsx
@@ -70,72 +70,15 @@ interface Step {
   durationMs: number
   code: string
   preview: React.ReactNode
-  // Short transitional beat that plays during auto-advance but isn't a
-  // clickable stop in the pagination (e.g. building an InputGroup addon by
-  // addon before landing on the headline step).
-  mid?: boolean
   // Part of the compact loop played when the home section stacks vertically —
   // only steps within a few code lines of each other, so the pane height
   // barely moves (see compactSteps).
   compact?: boolean
 }
 
-// Opening mid beat: a bare Input, the seed the TextField builds around. It's
-// the first frame on load, so it dwells a touch longer than the mids after it.
-const firstStep: Step = {
-  title: "TextField",
-  mid: true,
-  durationMs: 2000,
-  code: `<Input placeholder="hello@example.com" />`,
-  preview: (
-    <Input
-      aria-label="Email"
-      placeholder="hello@example.com"
-      className="w-full max-w-xs [view-transition-name:cmp-field]"
-    />
-  ),
-}
-
 const steps: Step[] = [
-  firstStep,
-  {
-    // Mid beat: wrap the bare input in a TextField — no field parts yet.
-    title: "TextField",
-    mid: true,
-    durationMs: 1400,
-    code: `<TextField>
-  <Input placeholder="hello@example.com" />
-</TextField>`,
-    preview: (
-      <TextField aria-label="Email" className="w-full max-w-xs">
-        <Input
-          placeholder="hello@example.com"
-          className="[view-transition-name:cmp-field]"
-        />
-      </TextField>
-    ),
-  },
-  {
-    // Mid beat: the field gains its label.
-    title: "TextField",
-    mid: true,
-    durationMs: 1400,
-    code: `<TextField>
-  <Label>Email</Label>
-  <Input placeholder="hello@example.com" />
-</TextField>`,
-    preview: (
-      <TextField className="w-full max-w-xs">
-        <Label className="[view-transition-name:cmp-label]">Email</Label>
-        <Input
-          placeholder="hello@example.com"
-          className="[view-transition-name:cmp-field]"
-        />
-      </TextField>
-    ),
-  },
   {
-    // Headline: the full field — label, input, and description.
+    // The full field — label, input, and description.
     title: "TextField",
     durationMs: 3000,
     code: `<TextField>
@@ -157,61 +100,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Mid beat: wrap the input in an InputGroup — no addons yet.
-    title: "InputGroup",
-    mid: true,
-    durationMs: 1400,
-    code: `<TextField>
-  <Label>Email</Label>
-  <InputGroup>
-    <Input placeholder="hello@example.com" />
-  </InputGroup>
-  <Description>No spam, unsubscribe anytime.</Description>
-</TextField>`,
-    preview: (
-      <TextField className="w-full max-w-xs">
-        <Label className="[view-transition-name:cmp-label]">Email</Label>
-        <InputGroup className="[view-transition-name:cmp-field]">
-          <Input placeholder="hello@example.com" />
-        </InputGroup>
-        <Description className="[view-transition-name:cmp-desc]">
-          No spam, unsubscribe anytime.
-        </Description>
-      </TextField>
-    ),
-  },
-  {
-    // Mid beat: add the leading addon.
-    title: "InputGroup",
-    mid: true,
-    durationMs: 1400,
-    code: `<TextField>
-  <Label>Email</Label>
-  <InputGroup>
-    <InputGroupAddon>
-      <MailIcon />
-    </InputGroupAddon>
-    <Input placeholder="hello@example.com" />
-  </InputGroup>
-  <Description>No spam, unsubscribe anytime.</Description>
-</TextField>`,
-    preview: (
-      <TextField className="w-full max-w-xs">
-        <Label className="[view-transition-name:cmp-label]">Email</Label>
-        <InputGroup className="[view-transition-name:cmp-field]">
-          <InputGroupAddon>
-            <MailIcon />
-          </InputGroupAddon>
-          <Input placeholder="hello@example.com" />
-        </InputGroup>
-        <Description className="[view-transition-name:cmp-desc]">
-          No spam, unsubscribe anytime.
-        </Description>
-      </TextField>
-    ),
-  },
-  {
-    // Headline step: add the trailing addon — the full InputGroup.
+    // The same field, its input now an InputGroup with icon and action addons.
     title: "InputGroup",
     compact: true,
     durationMs: 3600,
@@ -310,45 +199,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Mid beat: promote to DatePicker — move the icon to a trailing trigger,
-    // still no popover.
-    title: "DatePicker",
-    mid: true,
-    durationMs: 1400,
-    code: `<DatePicker>
-  <Label>Meeting date</Label>
-  <InputGroup>
-    <DateInput />
-    <InputGroupAddon>
-      <Button size="sm" isIconOnly>
-        <CalendarIcon />
-      </Button>
-    </InputGroupAddon>
-  </InputGroup>
-</DatePicker>`,
-    preview: (
-      <DatePicker
-        className="w-full max-w-xs"
-        defaultValue={parseDate("2026-07-10")}
-      >
-        <Label className="[view-transition-name:cmp-label]">Meeting date</Label>
-        <InputGroup className="[view-transition-name:cmp-field]">
-          <DateInput />
-          <InputGroupAddon>
-            <Button
-              size="sm"
-              isIconOnly
-              className="[view-transition-name:cmp-trigger]"
-            >
-              <CalendarIcon />
-            </Button>
-          </InputGroupAddon>
-        </InputGroup>
-      </DatePicker>
-    ),
-  },
-  {
-    // Headline: attach the popover calendar.
+    // Attach the popover calendar.
     title: "DatePicker",
     durationMs: 3400,
     code: `<DatePicker>
@@ -394,59 +245,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Mid beat: promote to a range — Calendar → RangeCalendar, one input still.
-    // The snippet defers the slots to the headline beat; the preview needs
-    // slot="start" at runtime.
-    title: "DateRangePicker",
-    mid: true,
-    durationMs: 1400,
-    code: `<DateRangePicker>
-  <Label>Trip dates</Label>
-  <InputGroup>
-    <DateInput />
-    <InputGroupAddon>
-      <Button size="sm" isIconOnly>
-        <CalendarIcon />
-      </Button>
-    </InputGroupAddon>
-  </InputGroup>
-  <Popover>
-    <DialogContent>
-      <RangeCalendar />
-    </DialogContent>
-  </Popover>
-</DateRangePicker>`,
-    preview: (
-      <DateRangePicker
-        className="w-full max-w-xs"
-        defaultValue={{
-          start: parseDate("2026-07-10"),
-          end: parseDate("2026-07-17"),
-        }}
-      >
-        <Label className="[view-transition-name:cmp-label]">Trip dates</Label>
-        <InputGroup className="[view-transition-name:cmp-field]">
-          <DateInput slot="start" />
-          <InputGroupAddon>
-            <Button
-              size="sm"
-              isIconOnly
-              className="[view-transition-name:cmp-trigger]"
-            >
-              <CalendarIcon />
-            </Button>
-          </InputGroupAddon>
-        </InputGroup>
-        <Popover>
-          <DialogContent>
-            <RangeCalendar />
-          </DialogContent>
-        </Popover>
-      </DateRangePicker>
-    ),
-  },
-  {
-    // Headline: the field gains its end date.
+    // The field gains its end date.
     title: "DateRangePicker",
     durationMs: 3400,
     code: `<DateRangePicker>
@@ -498,61 +297,6 @@ const steps: Step[] = [
       </DateRangePicker>
     ),
   },
-  {
-    // Mid beat: swap the overlay primitive — one word, Popover → Modal.
-    title: "Modal",
-    mid: true,
-    // 110 tokens: the transition needs ~1410ms to land (see CODE_SPAN).
-    durationMs: 1500,
-    code: `<DateRangePicker>
-  <Label>Trip dates</Label>
-  <InputGroup>
-    <DateInput slot="start" />
-    <span>–</span>
-    <DateInput slot="end" />
-    <InputGroupAddon>
-      <Button size="sm" isIconOnly>
-        <CalendarIcon />
-      </Button>
-    </InputGroupAddon>
-  </InputGroup>
-  <Modal>
-    <DialogContent>
-      <RangeCalendar />
-    </DialogContent>
-  </Modal>
-</DateRangePicker>`,
-    preview: (
-      <DateRangePicker
-        className="w-full max-w-xs"
-        defaultValue={{
-          start: parseDate("2026-07-10"),
-          end: parseDate("2026-07-17"),
-        }}
-      >
-        <Label className="[view-transition-name:cmp-label]">Trip dates</Label>
-        <InputGroup className="[view-transition-name:cmp-field]">
-          <DateInput slot="start" />
-          <span>–</span>
-          <DateInput slot="end" />
-          <InputGroupAddon>
-            <Button
-              size="sm"
-              isIconOnly
-              className="[view-transition-name:cmp-trigger]"
-            >
-              <CalendarIcon />
-            </Button>
-          </InputGroupAddon>
-        </InputGroup>
-        <Modal>
-          <DialogContent>
-            <RangeCalendar />
-          </DialogContent>
-        </Modal>
-      </DateRangePicker>
-    ),
-  },
   {
     title: "Drawer",
     durationMs: 2800,
@@ -606,32 +350,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Mid beat: collapse to a bare Select — label and trigger only.
-    title: "Select",
-    mid: true,
-    durationMs: 1300,
-    code: `<Select>
-  <Label>Assignee</Label>
-  <Button>
-    <SelectValue />
-    <ChevronDownIcon />
-  </Button>
-</Select>`,
-    preview: (
-      // defaultSelectedKey is mount-only, and the headline's Select updates
-      // this same instance in place — so the selection must start here, even
-      // though there are no items to resolve it against yet.
-      <Select className="w-full max-w-xs" defaultSelectedKey="cara">
-        <Label className="[view-transition-name:cmp-label]">Assignee</Label>
-        <Button className="[view-transition-name:cmp-field]">
-          <SelectValue />
-          <ChevronDownIcon />
-        </Button>
-      </Select>
-    ),
-  },
-  {
-    // Headline: attach the options list.
+    // Same trigger-plus-popover shape, now holding a list of options.
     title: "Select",
     compact: true,
     durationMs: 3200,
@@ -667,7 +386,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Headline: same list, now a typeahead — swap the trigger for an input.
+    // Same list, now a typeahead — swap the trigger for an input.
     title: "Combobox",
     durationMs: 3200,
     code: `<Combobox>
@@ -714,7 +433,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Headline: multi-select — selected people surface as tags.
+    // Multi-select — selected people surface as tags.
     title: "Tags",
     durationMs: 3000,
     code: `<Combobox>
@@ -773,90 +492,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Mid beat: a plain menu off an icon button.
-    title: "Menu",
-    mid: true,
-    durationMs: 1400,
-    code: `<Menu>
-  <Button size="sm" isIconOnly>
-    <MoreHorizontalIcon />
-  </Button>
-  <Popover>
-    <MenuContent>
-      <MenuItem>Edit</MenuItem>
-      <MenuItem>Duplicate</MenuItem>
-      <MenuItem>Delete</MenuItem>
-    </MenuContent>
-  </Popover>
-</Menu>`,
-    preview: (
-      <Menu>
-        <Button
-          size="sm"
-          isIconOnly
-          aria-label="Actions"
-          className="[view-transition-name:cmp-trigger]"
-        >
-          <MoreHorizontalIcon />
-        </Button>
-        <Popover>
-          <MenuContent className="[view-transition-name:cmp-list]">
-            <MenuItem>Edit</MenuItem>
-            <MenuItem>Duplicate</MenuItem>
-            <MenuItem>Delete</MenuItem>
-          </MenuContent>
-        </Popover>
-      </Menu>
-    ),
-  },
-  {
-    // Mid beat: the items gain keyboard shortcuts.
-    title: "Menu",
-    mid: true,
-    durationMs: 1400,
-    code: `<Menu>
-  <Button size="sm" isIconOnly>
-    <MoreHorizontalIcon />
-  </Button>
-  <Popover>
-    <MenuContent>
-      <MenuItem>Edit <Kbd>⌘E</Kbd></MenuItem>
-      <MenuItem>Duplicate <Kbd>⌘D</Kbd></MenuItem>
-      <MenuItem>Delete <Kbd>⌘⌫</Kbd></MenuItem>
-    </MenuContent>
-  </Popover>
-</Menu>`,
-    preview: (
-      <Menu>
-        <Button
-          size="sm"
-          isIconOnly
-          aria-label="Actions"
-          className="[view-transition-name:cmp-trigger]"
-        >
-          <MoreHorizontalIcon />
-        </Button>
-        <Popover>
-          <MenuContent className="[view-transition-name:cmp-list]">
-            <MenuItem textValue="Edit">
-              Edit
-              <Kbd>⌘E</Kbd>
-            </MenuItem>
-            <MenuItem textValue="Duplicate">
-              Duplicate
-              <Kbd>⌘D</Kbd>
-            </MenuItem>
-            <MenuItem textValue="Delete">
-              Delete
-              <Kbd>⌘⌫</Kbd>
-            </MenuItem>
-          </MenuContent>
-        </Popover>
-      </Menu>
-    ),
-  },
-  {
-    // Headline: one item nests a submenu.
+    // The same popover list behind an icon trigger, one item nesting a submenu.
     title: "Menu",
     compact: true,
     durationMs: 3000,
@@ -915,8 +551,8 @@ const steps: Step[] = [
     ),
   },
   {
-    // Headline: the same menu, now opened by right-click — only the root and
-    // trigger change.
+    // The same menu, now opened by right-click — only the root and trigger
+    // change.
     title: "ContextMenu",
     compact: true,
     durationMs: 3000,
@@ -966,40 +602,7 @@ const steps: Step[] = [
     ),
   },
   {
-    // Mid beat: the same menu, filtered by an @-mention typed into a textarea.
-    title: "Mention",
-    mid: true,
-    durationMs: 1500,
-    code: `<Mention>
-  <TextField>
-    <Label>Comment</Label>
-    <TextArea placeholder="Type @ to mention…" />
-  </TextField>
-  <Popover>
-    <MenuContent>
-      <MenuItem>Alex Miller</MenuItem>
-      <MenuItem>Sarah Jones</MenuItem>
-    </MenuContent>
-  </Popover>
-</Mention>`,
-    preview: (
-      <Mention className="w-full max-w-xs">
-        <TextField>
-          <Label className="[view-transition-name:cmp-label]">Comment</Label>
-          <TextArea placeholder="Type @ to mention…" />
-        </TextField>
-        <Popover>
-          <MenuContent className="[view-transition-name:cmp-list]">
-            {/* Ids are the full names — Mention inserts String(key) on select. */}
-            <MenuItem id="Alex Miller">Alex Miller</MenuItem>
-            <MenuItem id="Sarah Jones">Sarah Jones</MenuItem>
-          </MenuContent>
-        </Popover>
-      </Mention>
-    ),
-  },
-  {
-    // Headline: each suggestion gains an avatar.
+    // The same menu again, this time raised by typing @ in a textarea.
     title: "Mention",
     durationMs: 3200,
     code: `<Mention>
@@ -1045,79 +648,6 @@ const steps: Step[] = [
       </Mention>
     ),
   },
-  {
-    // Mid beat: the command palette skeleton — a search input inside Command.
-    title: "Command",
-    mid: true,
-    durationMs: 1400,
-    code: `<Command>
-  <SearchField>
-    <InputGroup>
-      <InputGroupAddon>
-        <SearchIcon />
-      </InputGroupAddon>
-      <Input placeholder="Type a command…" />
-    </InputGroup>
-  </SearchField>
-</Command>`,
-    preview: (
-      <div className="w-full max-w-xs overflow-hidden rounded-md border bg-bg">
-        <Command aria-label="Command menu">
-          <SearchField aria-label="Search">
-            <InputGroup className="[view-transition-name:cmp-field]">
-              <InputGroupAddon>
-                <SearchIcon />
-              </InputGroupAddon>
-              <Input placeholder="Type a command…" />
-            </InputGroup>
-          </SearchField>
-        </Command>
-      </div>
-    ),
-  },
-  {
-    // Mid beat: the palette gains its list of commands.
-    title: "Command",
-    mid: true,
-    durationMs: 1500,
-    code: `<Command>
-  <SearchField>
-    <InputGroup>
-      <InputGroupAddon>
-        <SearchIcon />
-      </InputGroupAddon>
-      <Input placeholder="Type a command…" />
-    </InputGroup>
-  </SearchField>
-  <ListBox>
-    <ListBoxItem>New issue</ListBoxItem>
-    <ListBoxItem>Assign to…</ListBoxItem>
-    <ListBoxItem>Search docs</ListBoxItem>
-  </ListBox>
-</Command>`,
-    preview: (
-      <div className="w-full max-w-xs overflow-hidden rounded-md border bg-bg">
-        <Command aria-label="Command menu">
-          <SearchField aria-label="Search">
-            <InputGroup className="[view-transition-name:cmp-field]">
-              <InputGroupAddon>
-                <SearchIcon />
-              </InputGroupAddon>
-              <Input placeholder="Type a command…" />
-            </InputGroup>
-          </SearchField>
-          <ListBox
-            aria-label="Commands"
-            className="[view-transition-name:cmp-list]"
-          >
-            <ListBoxItem id="new-issue">New issue</ListBoxItem>
-            <ListBoxItem id="assign">Assign to…</ListBoxItem>
-            <ListBoxItem id="search-docs">Search docs</ListBoxItem>
-          </ListBox>
-        </Command>
-      </div>
-    ),
-  },
   {
     // Every part recomposed into a live command palette — sectioned,
     // shortcut-hinted, and typing filters it in place.
@@ -1292,13 +822,10 @@ const steps: Step[] = [
 const compactSteps = steps.filter((s) => s.compact)
 const maxCodeLines = Math.max(...steps.map((s) => s.code.split("\n").length))
 
-// Pagination lists only the headline steps; mid steps play during auto-advance
-// but aren't clickable stops. Each entry keeps its index into its list so the
-// rail/dots can jump straight to it.
+// Each entry keeps its index into its list so the rail/dots can jump straight
+// to it.
 const paginate = (list: Step[]) =>
-  list
-    .map((s, index) => ({ title: s.title, index, mid: s.mid }))
-    .filter((s) => !s.mid)
+  list.map((s, index) => ({ title: s.title, index }))
 const paginatedSteps = paginate(steps)
 const compactPaginatedSteps = paginate(compactSteps)
 
@@ -1309,18 +836,9 @@ export type CompositionPlayer = ReturnType<typeof useCompositionPlayer>
 // (1 + delayEnter)×duration + the stagger tail — not at `duration`. Every dwell
 // above has to clear that, or the next step cuts the animation off mid-flight.
 const CODE_ENTER_DELAY = 0.7
-const CODE_SPAN = 1 + CODE_ENTER_DELAY
 const CODE_DURATION_MS = 700
 const CODE_STAGGER_MS = 2
 
-// A manual walk plays the exact same code transition as auto-play, only with a
-// smaller stagger — so each beat must clear the full span plus the stagger tail
-// of the longest (~120-token) snippet.
-const WALK_CODE_STAGGER_MS = 0.5
-const MANUAL_BEAT_MS = Math.ceil(
-  CODE_SPAN * CODE_DURATION_MS + 120 * WALK_CODE_STAGGER_MS,
-)
-
 // Shared player: auto-advance while visible, with a CSS animation as the step
 // clock (see StepTimer) so the visible progress and the advance tick can never
 // drift. Hovering or focusing the showcase pauses; the play/pause button is a
@@ -1429,61 +947,14 @@ export function useCompositionPlayer({ compactBelowLg = false } = {}) {
     })
   }, [])
 
-  // Manual navigation (rail/dots): when the target is the next headline, play
-  // the mid beats between here and there on a fast cadence instead of
-  // hard-jumping, so the code still arrives in small blocks. Backward jumps
-  // and far jumps (crossing another headline) stay direct.
-  const walkTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const cancelWalk = useCallback(() => {
-    if (walkTimerRef.current) {
-      clearTimeout(walkTimerRef.current)
-      walkTimerRef.current = null
-    }
-  }, [])
-  useEffect(() => cancelWalk, [cancelWalk])
-
   // Restart from the top when the step list swaps (breakpoint cross) — the
   // current index points into the other list.
   useEffect(() => {
-    cancelWalk()
     stepRef.current = 0
     setStep(0)
-  }, [compact, cancelWalk])
+  }, [compact])
 
-  const [walking, setWalking] = useState(false)
-  const goToStep = useCallback(
-    (next: number) => {
-      cancelWalk()
-      const from = stepRef.current
-      const between = activeSteps.slice(from + 1, next)
-      const reduce = window.matchMedia(
-        "(prefers-reduced-motion: reduce)",
-      ).matches
-      if (
-        reduce ||
-        next <= from ||
-        between.length === 0 ||
-        !between.every((s) => s.mid)
-      ) {
-        setWalking(false)
-        applyStep(next)
-        return
-      }
-      setWalking(true)
-      const walk = () => {
-        applyStep(stepRef.current + 1)
-        if (stepRef.current < next) {
-          walkTimerRef.current = setTimeout(walk, MANUAL_BEAT_MS)
-        } else {
-          // Clears in the same commit as the final step, so the arrival plays at
-          // full duration — nothing follows it to cut it off.
-          setWalking(false)
-        }
-      }
-      walk()
-    },
-    [applyStep, cancelWalk, activeSteps],
-  )
+  const goToStep = applyStep
 
   const advance = useCallback(
     () => applyStep((stepRef.current + 1) % activeSteps.length),
@@ -1505,13 +976,8 @@ export function useCompositionPlayer({ compactBelowLg = false } = {}) {
   // The index may briefly outlive a list swap — the reset effect above hasn't
   // run yet on that render.
   const current =
-    activeSteps[Math.min(step, activeSteps.length - 1)] ?? firstStep
-  // A mid step maps to the headline step it's building toward (the next
-  // paginated entry), so that entry stays lit while the beats play.
-  const activePaginated = Math.max(
-    0,
-    paginated.findIndex((p) => p.index >= step),
-  )
+    activeSteps[Math.min(step, activeSteps.length - 1)] ?? activeSteps[0]!
+  const activePaginated = Math.min(step, paginated.length - 1)
   const stepDurationMs = current.durationMs
   const reducedMotion =
     mounted && window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -1540,7 +1006,6 @@ export function useCompositionPlayer({ compactBelowLg = false } = {}) {
     reducedMotion,
     paginated,
     activePaginated,
-    codeStaggerMs: walking ? WALK_CODE_STAGGER_MS : CODE_STAGGER_MS,
   }
 }
 
@@ -1916,7 +1381,6 @@ export function CompositionCode({
       options={{
         duration: reducedMotion ? 0 : duration,
         stagger,
-        // Pinned: CODE_SPAN is only correct if this is what the renderer uses.
         delayEnter: CODE_ENTER_DELAY,
         containerStyle: false,
       }}
@@ -1926,14 +1390,8 @@ export function CompositionCode({
 
 export function CompositionAnimation({ className }: { className?: string }) {
   const player = useCompositionPlayer()
-  const {
-    mounted,
-    containerRef,
-    current,
-    reducedMotion,
-    setHoverPaused,
-    codeStaggerMs,
-  } = player
+  const { mounted, containerRef, current, reducedMotion, setHoverPaused } =
+    player
 
   return (
     <div
@@ -1961,7 +1419,6 @@ export function CompositionAnimation({ className }: { className?: string }) {
             <CompositionCode
               code={current.code}
               reducedMotion={reducedMotion}
-              stagger={codeStaggerMs}
             />
           ) : (
             <pre className="whitespace-pre">{current.code}</pre>