Speed1×
Slow motion multiplier
Reduced motion
Show
Live previews
Sliding indicators
ADDToday — per-item cross-fade
Core’s TabList. Each tab draws its own indicator and they cross-fade on opacity, so nothing travels and the eye has to re-find the selection after every change.
Proposed — one indicator travels
One indicator for the strip, moved with transform on --ease-move. Compositor-only, and the eye can follow it. Jump between distant tabs to judge the duration — a bar crossing five tabs feels different from one crossing two.
travel
TabList. The right one is a swizzled copy of that same source with three changes — a hasTravellingIndicator prop, one indicator in the strip positioned over the selected tab, and a context flag telling each Tab to suppress the indicator it draws for itself. It lives at proposed/TabList/, so the difference you are watching is the diff. The position is measured from the DOM rather than tracked in state, because the tabs size themselves — that ResizeObserver is the only real cost the proposal adds, and is the part to review if it ships.The proposed pane uses --ease-move rather than the entry curve, because the indicator is already on screen: it needs a legible path, not an arrival accent. This is also the strongest candidate for the layout spring, since a travelling indicator is exactly the interruptible case.Disclosure bake-off
PARTIAL — three techniquesGrid tracks — CodeBlock, ChatNo measurement needed, and it survives content changing mid-transition. Cannot be used on a table row, which is why this may not be the single winner.
Astryx ships nine duration tokens and one easing token.Nine surfaces disclose content, using three different techniques.
Height interpolationNeeds a scrollHeight measurement on every open, so streaming content fights it. Works anywhere, including a table row.
Astryx ships nine duration tokens and one easing token.Nine surfaces disclose content, using three different techniques.
Height + offset fade — CollapsibleHeight plus a delayed content fade. The newest component uses this, and it is the only one that does.
Astryx ships nine duration tokens and one easing token.Nine surfaces disclose content, using three different techniques.
reveal
SideNav rail collapse
ADDToday — the rail snapsToday: the real SideNav snaps between its widths, so the page beside it jumps.
Skip to content
ProjectsThe page beside the rail.
Proposed — the rail animates, the page follows its edgeThe rail’s width animates on the lab’s collapse-and-expand duration and decelerating curve. The content is AppShell’s flex sibling, so its edge follows the rail in the same frame, and the page is anchored to that edge, so it moves with the rail instead of half as far. Reduce Motion snaps.
Skip to content
ProjectsThe page beside the rail.
Both panes are the real
AppShell and SideNav, collapsed through SideNav’s own controlled collapsible config. The proposal animates the rail’s width on the lab’s collapse-and-expand duration (--duration-reveal) and decelerating curve (--ease-entry), so tuning either token reaches it. The content is AppShell’s flex sibling, so its edge follows the rail in the same frame with no script per frame. The page is anchored to that edge (margin-inline: 0 auto) rather than centered in its own widening space, so it moves with the rail instead of half as far, and never re-centers. Reduce Motion snaps.The transform alternative — translate the rail and clip it — keeps the animation on the compositor but leaves the content beside it un-reflowed until the end, which reads worse than the layout cost.Skeleton → content
ADDToday — content hard-swapsContent hard-swaps the instant it arrives, at a moment the user cannot predict.
Astryx Motion48 of 104 core components animate something.Audited against core@0.5.0.
Proposed — crossfade with overlapSkeleton fades out while content fades in, overlapping just enough that the box is never empty.
Astryx Motion48 of 104 core components animate something.Audited against core@0.5.0.
crossfade
Chip add and remove
ADDToday — instant
designmotiontokens
Chips appear and disappear on a frame. The canonical scale-in case, unanimated.Proposed — scale in, accelerate away
designmotiontokens
Scale-in with opacity; removal accelerates away and the neighbours close the gap.add
remove
List add, remove and reorder
ADDToday — instant
Item 1Item 2Item 3Item 4
Reorder is instant, so the user has to re-read the list to find out what changed.Proposed — FLIP on --ease-move
Item 1Item 2Item 3Item 4
FLIP: measure, move, invert, play. Rows travel on --ease-move, so a change the user did not initiate stays followable.FLIP — measure, move, invert, play — is the technique here because the rows are genuinely re-laid-out and only the visual correction is animated. Try it at 4×: a shuffle that is legible at 4× and illegible at 1× means the duration is too short, not that the technique is wrong.
Checkbox tick
ADDToday — real CheckboxInputReal CheckboxInput — the tick appears instantly
Draw
Draws along its path
Scale
Scales in
Stat value change
ADDToday — replaces itself
1,247The number replaces itself, so a change of 4 and a change of 4,000 look identical.
Proposed — counts
1,247Counts to the new value. Needs a delta threshold so a jump from 12 to 1,300,000 does not spin for a second.
NavItem hover tint
ADDToday — snaps on hover
Overview
Projects
Settings
Today: the tint snaps on at once wherever the device hovers.State token, fine pointers only
Overview
Projects
Settings
The theme's state token (--duration-fast on --ease-standard), only on a fine pointer that hovers.ProgressBar fill
PARTIALToday — real ProgressBar, width
Width is a layout property: every frame of every tick re-lays out the bar. A fast upload ticks often enough to behave like a layout loop.
Proposed — transform: scaleX
The same fill on transform: scaleX, so it runs on the compositor. The cost shows at the ends: the rounded caps squash at small values, which is why this needs an exception or a different structure before it ships.