Libraries/Motion presets
Motion presets
Shared spring and easing values for sliding thumbs and rolling content, with a reduced-motion fallback.
- Version
- 1.0.1
- Tier
- Library
- Updates taken
- Minor and patch
- Files
- 1
Preview
No visual preview: this item has no markup of its own.
Install
In a project already set up on the contract, which is what registers the @ja3dan prefix. If yours isn't, set it up first.
bunx shadcn@latest add @ja3dan/motion Also installs motion if the project doesn't have them.
Related items
Source
What lands in your project, read from the published item rather than the working tree.
// Shared motion vocabulary. Anything that slides a thumb or rolls content in from// the direction of travel uses these, so tuning one tunes all of them./** A thumb or highlight sliding between slots. Firm, barely any overshoot. */export const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const;export const EASE = [0.23, 1, 0.32, 1] as const;/** Content arriving from the direction of travel. Short enough to feel instant. */export const ROLL = { duration: 0.18, ease: EASE } as const;/** A small indicator turning or scaling in place (sort arrows). */export const TURN = { type: "spring", stiffness: 500, damping: 32 } as const;/** What every one of the above becomes under `prefers-reduced-motion`. */export const STILL = { duration: 0 } as const;