Speed1×
Slow motion multiplier
Reduced motion
Show
Hardcoded durations and curves
58 measured58Hardcoded sitesmeasured against core@0.5.0
34Durations and delays
24Curves
12Durations with no curvesilently taking the CSS default
Four families, two of them blocked
Reduced-motion escapes
19 sitesblocked
Blocked: Decide whether --duration-instant is 0 or 0.01ms before sweeping any of these.
core/hooks/containerReveal.stylex.ts:253core/hooks/containerReveal.stylex.ts:261core/hooks/containerReveal.stylex.ts:267core/BottomSheet/BottomSheet.tsx:94core/BottomSheet/BottomSheetPanel.tsx:149core/BottomSheet/BottomSheetSwitcher.tsx:105+13 more in the table below
Table interaction tint
12 sitesmechanical
Today — 150ms, default curve
Row one
Row two
Row three
Hardcoded 150ms with the CSS default curve.Proposed — --duration-state, --ease-state
Row one
Row two
Row three
The state token, at 175ms with --ease-state.state
core/Table/plugins/columnResize/useTableColumnResize.tsx:248core/Table/plugins/columnResize/useTableColumnResize.tsx:248core/Table/plugins/columnResize/useTableColumnResize.tsx:248core/Table/plugins/columnResize/useTableColumnResize.tsx:248core/Table/plugins/groupedRows/useTableGroupedRows.tsx:179core/Table/plugins/rowExpansion/useTableRowExpansion.tsx:87+6 more in the table below
Ambient loops
3 sitesblocked
Today — hardcoded, outside the scale
Today the loop slows to 3s rather than stopping. Slower vestibular motion is still vestibular motion, and it reads as a hung interface.
Stopped
Degrade: loops stop and are replaced with a static determinate state. Opacity and colour feedback survive; movement does not.
Blocked: Needs the ambient-band decision.
core/Chat/ChatMessageMetadata.tsx:77lab/ChatReasoning/ChatReasoning.tsx:152core/StatusDot/StatusDot.tsx:56
Curves authored by hand
20 sitesmechanical
core/BottomSheet/BottomSheet.tsx:109core/BottomSheet/BottomSheetPanel.tsx:172core/BottomSheet/BottomSheetSwitcher.tsx:114core/Chat/ChatDictationButton.tsx:75core/Chat/ChatMessageMetadata.tsx:78lab/Chat/ChatTypingIndicator.tsx:79+14 more in the table below
Every site
| Component | Site | Property | Today | Becomes |
|---|---|---|---|---|
| (shared) | core/hooks/containerReveal.stylex.ts:253 | transitionDelay | 0s | --duration-instant |
| (shared) | core/hooks/containerReveal.stylex.ts:261 | transitionDelay | 0s | --duration-instant |
| (shared) | core/hooks/containerReveal.stylex.ts:267 | transitionDelay | 0s | --duration-instant |
| (shared) | core/hooks/useKeyboardHint.tsx:135 | transitionDuration | 150ms | --duration-state |
| BottomSheet | core/BottomSheet/BottomSheet.tsx:94 | transitionDuration | 0.01s | --duration-instant |
| BottomSheet | core/BottomSheet/BottomSheet.tsx:109 | transitionTimingFunction | linear | --ease-linear |
| BottomSheet | core/BottomSheet/BottomSheetPanel.tsx:149 | transitionDuration | 0.01s | --duration-instant |
| BottomSheet | core/BottomSheet/BottomSheetPanel.tsx:172 | transitionTimingFunction | cubic-bezier(0.3, 0, 0.6, 0.6) | --ease-exit |
| BottomSheet | core/BottomSheet/BottomSheetSwitcher.tsx:105 | transitionDuration | 0.01s | --duration-instant |
| BottomSheet | core/BottomSheet/BottomSheetSwitcher.tsx:114 | transitionTimingFunction | linear | --ease-linear |
| Button | core/Button/Button.tsx:380 | animationDuration | 1ms | --duration-instant |
| Chat | core/Chat/ChatComposerDrawer.tsx:208 | transitionDelay | 0ms | --duration-instant |
| Chat | core/Chat/ChatDictationButton.tsx:75 | transitionTimingFunction | ease-out | --ease-state |
| Chat | core/Chat/ChatMessageMetadata.tsx:77 | animationDuration | 1.5s | no token reaches |
| Chat | core/Chat/ChatMessageMetadata.tsx:78 | animationTimingFunction | ease-in-out | --ease-state |
| Chat | lab/Chat/ChatTypingIndicator.tsx:79 | animationTimingFunction | ease-in-out | --ease-state |
| Chat | lab/Chat/ChatTypingIndicator.tsx:85 | animationDelay | 160ms | --duration-state |
| Chat | lab/Chat/ChatTypingIndicator.tsx:88 | animationDelay | 320ms | --duration-enter |
| ChatReasoning | lab/ChatReasoning/ChatReasoning.tsx:152 | animationDuration | 4s | no token reaches |
| ChatReasoning | lab/ChatReasoning/ChatReasoning.tsx:153 | animationTimingFunction | linear | --ease-linear |
| CircularProgress | lab/CircularProgress/CircularProgress.tsx:188 | animationTimingFunction | linear | --ease-linear |
| CircularProgress | lab/CircularProgress/CircularProgress.tsx:210 | animationTimingFunction | ease-in-out | --ease-state |
| CommandPalette | core/CommandPalette/CommandPaletteInput.tsx:62 | transitionDuration | 1ms | --duration-instant |
| CommandPalette | core/CommandPalette/CommandPaletteInput.tsx:63 | transitionDelay | 150ms | --duration-state |
| DateInput | core/DateInput/TouchDateField.tsx:254 | transitionTimingFunction | linear | --ease-linear |
| DateInput | core/DateInput/TouchDateField.tsx:256 | transitionDuration | 0.01s | --duration-instant |
| DateInput | core/DateInput/TouchDateField.tsx:311 | transitionTimingFunction | linear | --ease-linear |
| DateInput | core/DateInput/TouchDateField.tsx:313 | transitionDuration | 0.01s | --duration-instant |
| DateInput | core/DateInput/TouchDateField.tsx:375 | transitionDuration | 0.01s | --duration-instant |
| DateInput | core/DateInput/TouchDateField.tsx:390 | transitionTimingFunction | linear | --ease-linear |
| DateInput | core/DateInput/TouchDateField.tsx:392 | transitionDuration | 0.01s | --duration-instant |
| DateInput | core/DateInput/TouchDateField.tsx:442 | transitionDuration | 0.01s | --duration-instant |
| DateInput | core/DateInput/TouchDateField.tsx:492 | transitionTimingFunction | linear | --ease-linear |
| DateInput | core/DateInput/TouchDateField.tsx:494 | transitionDuration | 0.01s | --duration-instant |
| DateInput | core/DateInput/Wheel.tsx:172 | animationTimingFunction | linear | --ease-linear |
| Drawer | lab/Drawer/Drawer.tsx:161 | transitionDuration | 0.01s | --duration-instant |
| Drawer | lab/Drawer/Drawer.tsx:234 | transitionDuration | 0.01s | --duration-instant |
| Lightbox | core/Lightbox/Lightbox.tsx:190 | transitionTimingFunction | ease-out | --ease-state |
| LogStream | lab/LogStream/LogStream.tsx:173 | transitionTimingFunction | ease-out | --ease-state |
| MobileNav | core/MobileNav/MobileNav.tsx:132 | transitionDuration | 0.01s | --duration-instant |
| MobileNav | core/MobileNav/MobileNav.tsx:162 | transitionDuration | 0.01s | --duration-instant |
| ProgressBar | core/ProgressBar/ProgressBar.tsx:260 | animationTimingFunction | ease-in-out | --ease-state |
| Spinner | core/Spinner/Spinner.tsx:265 | animationTimingFunction | linear | --ease-linear |
| StatusDot | core/StatusDot/StatusDot.tsx:56 | animationDuration | 2s | no token reaches |
| StatusDot | core/StatusDot/StatusDot.tsx:57 | animationTimingFunction | ease-in-out | --ease-state |
| Stepper | core/Stepper/Step.tsx:388 | transitionTimingFunction | linear | --ease-linear |
| Table | core/Table/plugins/columnResize/useTableColumnResize.tsx:248 | transition | 150ms | --duration-state |
| Table | core/Table/plugins/columnResize/useTableColumnResize.tsx:248 | transition | 150ms | --duration-state |
| Table | core/Table/plugins/columnResize/useTableColumnResize.tsx:248 | transition | ease | --ease-state |
| Table | core/Table/plugins/columnResize/useTableColumnResize.tsx:248 | transition | ease | --ease-state |
| Table | core/Table/plugins/groupedRows/useTableGroupedRows.tsx:179 | transitionDuration | 150ms | --duration-state |
| Table | core/Table/plugins/rowExpansion/useTableRowExpansion.tsx:87 | transitionDuration | 150ms | --duration-state |
| Table | core/Table/plugins/stickyColumns/useTableStickyColumns.tsx:234 | transition | 150ms | --duration-state |
| Table | core/Table/plugins/stickyColumns/useTableStickyColumns.tsx:234 | transition | ease | --ease-state |
| Table | core/Table/plugins/stickyColumns/useTableStickyColumns.tsx:260 | transition | 150ms | --duration-state |
| Table | core/Table/plugins/stickyColumns/useTableStickyColumns.tsx:260 | transition | ease | --ease-state |
| Table | core/Table/plugins/tree/useTableTreeData.tsx:251 | transitionDuration | 150ms | --duration-state |
| Table | core/Table/plugins/tree/useTableTreeData.tsx:267 | transitionDuration | 150ms | --duration-state |
Literals in use
| Value | Sites |
|---|---|
| 0.01s | 13 |
| linear | 11 |
| 150ms | 10 |
| ease-in-out | 5 |
| ease | 4 |
| ease-out | 3 |
| 0s | 3 |
| 1ms | 2 |
| cubic-bezier(0.3, 0, 0.6, 0.6) | 1 |
| 0ms | 1 |
| 1.5s | 1 |
| 2s | 1 |
| 160ms | 1 |
| 320ms | 1 |
| 4s | 1 |
By component
| Component | Sites |
|---|---|
| Table | 12 |
| DateInput | 11 |
| Chat | 7 |
| BottomSheet | 6 |
| (shared) | 4 |
| CommandPalette | 2 |
| MobileNav | 2 |
| StatusDot | 2 |
| ChatReasoning | 2 |
| CircularProgress | 2 |
| Drawer | 2 |
| Button | 1 |
| Lightbox | 1 |
| ProgressBar | 1 |
| Spinner | 1 |
| Stepper | 1 |
| LogStream | 1 |
Sweep order
| Step | Why this order |
|---|---|
| 1. Land the semantic tokens as aliases | Nothing to migrate to until they exist, and aliasing means nothing shifts perceptually while the sweep runs. |
| 2. Add the lint rules in warn mode | Produces the real inventory continuously, so this page stops being a snapshot. |
| 3. Answer the two blocked families | Whether --duration-instant is 0 or 0.01ms, and whether the slow band grows an ambient tier. |
| 4. Sweep | Mechanical once the tokens and the answers both exist. |
| 5. Flip lint to error | Only once the count is zero, or the remainder is explicitly allowlisted. |