@vibe-labs/design-transitions

Transition, animation, and easing tokens and utilities for the Vibe Design System.

Usage

@import "@vibe-labs/design-transitions";

Contents

Tokens & Keyframes (transitions.css)

Duration Tokens (@layer vibe.tokens)

Token	Value
--duration-instant	0ms
--duration-fast	75ms
--duration-normal	150ms
--duration-moderate	200ms
--duration-slow	300ms
--duration-slower	500ms
--duration-lazy	700ms

Easing Tokens (@layer vibe.tokens)

Standard: --ease-linear · --ease-default · --ease-in · --ease-out · --ease-in-out

Expressive: --ease-spring · --ease-bounce · --ease-elastic · --ease-smooth

Directional: --ease-decel (enter) · --ease-accel (exit) · --ease-sharp

Keyframe Animations

Defined globally (outside @layer), namespaced with vibe- prefix:

Family	Keyframes	Use case
Fade	vibe-fade-in, vibe-fade-out	Opacity transitions
Scale	vibe-scale-in, vibe-scale-out	Modals, popovers, tooltips
Slide	vibe-slide-in-{up|down|left|right}, vibe-slide-out-{up|down|left|right}	Content, dropdowns, toasts (8px nudge)
Panel	vibe-panel-in-{left|right|bottom}, vibe-panel-out-{left|right|bottom}	Drawers, sheets (100% off-screen)
Attention	vibe-spin, vibe-ping, vibe-pulse, vibe-bounce, vibe-wiggle, vibe-shake	Looping emphasis / feedback

Generated Utilities (transitions.g.css)

All classes generated into @layer vibe.utilities.

Duration

.duration-{name} — instant, fast, normal, moderate, slow, slower, lazy

Easing

.ease-{name} — linear, default, in, out, in-out, spring, bounce, elastic, smooth, decel, accel, sharp

Transition Property

.transition-all · .transition-colors · .transition-opacity · .transition-transform · .transition-shadow · .transition-size

Each sets transition-property, with duration/easing defaulting to --transition-duration / --transition-easing (fallback: normal / ease-out).

Delay

.delay-{name} — same scale as duration

Animation Utilities

Looping: .animate-wiggle · .animate-bounce · .animate-pulse · .animate-spin · .animate-ping

One-shot: .animate-shake

Enter: .animate-fade-in · .animate-scale-in · .animate-slide-in-{up|down|left|right}

Exit: .animate-fade-out · .animate-scale-out

Control: .animate-none · .animate-paused · .animate-running · .animate-once · .animate-infinite

Fill mode: .animate-fill-both · .animate-fill-forwards · .animate-fill-none

Reduced Motion (@layer vibe.accessibility)

• .motion-reduce — minimizes duration/iteration on prefers-reduced-motion: reduce
• .motion-safe — removes animation/transition entirely on prefers-reduced-motion: reduce

Dist Structure

File	Description
index.css	Barrel — imports both files below
transitions.css	Tokens, keyframe definitions
transitions.g.css	Generated utility classes

Dependencies

None — this package is self-contained.

Build

npm run build