Cloaked Design SystemFoundations

Motion

Compare the complete easing and duration scales, then see how real components use motion to explain changes.

Implementation preview

COMPLETE STORYBOOK REFERENCE

Compare motion side by side

Replay all three easing curves and duration timings. Compare how each transition moves, and check the still presentation used for reduced motion.

1 story

Motion selectedOpen canvas

Example source

packages/design-system/src/foundations/Foundations.stories.tsxExport Motion

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Full story catalog JSON ↗

Choose with the experience in mind

Compare one timing decision at a time

The three easing graphs race against a linear reference at the same speed. The three duration tracks share one curve, so their 150, 200 and 300 millisecond timings are easy to compare.

Follow the component’s behavior

Disclosure, navigation, loading and value changes use motion for different reasons. Inspect their actual component stories before composing a new interaction.

Respect reduced motion

Honor the operating system's reduced-motion preference, including changes while the page is open. The example removes spatial animation when reduced motion is enabled and never starts on its own.

Keep the exact definition close

These values come directly from the design-owned source. Aliases, expressions, theme selectors, and source files are retained.

Full motion reference 6 definitions

Source value	Selector	Source file
`cubic-bezier(0.2, 0.9, 0.3, 1)`	`:root`	`packages/design-system/src/tokens/motion.css`
`cubic-bezier(0.4, 0, 0.6, 0.3)`	`:root`	`packages/design-system/src/tokens/motion.css`
`cubic-bezier(0.77, 0, 0.175, 1)`	`:root`	`packages/design-system/src/tokens/motion.css`
`150ms`	`:root`	`packages/design-system/src/tokens/motion.css`
`200ms`	`:root`	`packages/design-system/src/tokens/motion.css`
`300ms`	`:root`	`packages/design-system/src/tokens/motion.css`

Design-owned preview Version 0.2.0-preview.1 6 definitions

Build from the same decisions

Give an agent the guidance, source values, and working example together.

Agent handoff

Use the Cloaked motion foundations.
Read https://design.cloaked.team/data/foundations/motion.json first.
Use the exact token names, values, and theme selectors in this contract.
Check the shared foundation-motion example and preserve its visual intent.
Verify keyboard access, both themes, responsive layout, and reduced-motion behavior where applicable.
Treat this design-owned version as an implementation preview, pending sign-off.

Motion contract JSON Complete token source JSON Build with an agent Guide

Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1