#363
Tab indicator
The package Tabs with one pill that slides and stretches under the active tab instead of each tab repainting its own background.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Tab indicator" pattern (@codeatlasdev/ui demo #363, motion/transitions) in my app.
Call get_demo({ ids: ["#363"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Segmented controls, tab bars and filters where the eye should follow the selection from one option to the next.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, Tabs, TabsContent, TabsList, TabsTrigger, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` with `label="Tab indicator: a pill slides under the active tab"` and `loop={1800}`
- `Tabs`, `TabsList`, `TabsTrigger` and `TabsContent` come from `@codeatlasdev/ui`, untouched
- The active trigger's `offsetLeft` and `offsetWidth` are written to `--ti-x` and `--ti-w`; the pill reads `transform: translateX(var(--ti-x))` and `inline-size: var(--ti-w)`
- `transition: transform 360ms cubic-bezier(0.2, 0, 0, 1), inline-size 360ms cubic-bezier(0.2, 0, 0, 1)`; no transition before the first measure and under reduced motion
- A `ResizeObserver` re-measures when the list resizes
Exact motion (do not approximate):
- transform: translateX and inline-size of the pill: 360ms, cubic-bezier(0.2, 0, 0, 1)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui - Tabs
@codeatlasdev/ui - TabsContent
@codeatlasdev/ui - TabsList
@codeatlasdev/ui - TabsTrigger
@codeatlasdev/ui
How it is built
- `MotionStage` with `label="Tab indicator: a pill slides under the active tab"` and `loop={1800}`
- `Tabs`, `TabsList`, `TabsTrigger` and `TabsContent` come from `@codeatlasdev/ui`, untouched
- The active trigger's `offsetLeft` and `offsetWidth` are written to `--ti-x` and `--ti-w`; the pill reads `transform: translateX(var(--ti-x))` and `inline-size: var(--ti-w)`
- `transition: transform 360ms cubic-bezier(0.2, 0, 0, 1), inline-size 360ms cubic-bezier(0.2, 0, 0, 1)`; no transition before the first measure and under reduced motion
- A `ResizeObserver` re-measures when the list resizes
Related
Loading source.