@vibe-labs/design-transitions

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

Installation

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

Tokens

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

Utilities / Generated Classes

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

---

Usage Guide

Provides transition, animation, easing, and duration utilities for consistent motion in the Vibe Design System.

Import

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

Common Patterns

1. Smooth hover state on a card

<div class="transition-all duration-normal ease-out hover:shadow-lg hover:bg-elevated">
  Card with hover effect
</div>

2. Button with colour transition

<button class="transition-colors duration-fast ease-out bg-accent hover:bg-accent-dark">
  Click me
</button>

3. Fade in a new element

<div class="animate-fade-in duration-moderate ease-decel">
  Content that fades in on mount
</div>

4. Loading spinner

<svg class="animate-spin duration-slow" viewBox="0 0 24 24">
  <circle class="opacity-25" .../>
  <path class="opacity-75" .../>
</svg>

5. Slide-in panel / drawer

<aside class="animate-slide-in-left duration-moderate ease-decel animate-fill-both">
  Sidebar panel content
</aside>

6. Respect reduced motion preferences

Wrap animated elements with .motion-safe to remove animation entirely when the user has requested reduced motion:

<div class="motion-safe animate-fade-in">
  Animation removed if prefers-reduced-motion: reduce
</div>

<div class="motion-reduce animate-pulse">
  Animation minimised if prefers-reduced-motion: reduce
</div>

Token Reference

Token	Value	Use
--duration-fast	75ms	Micro-interactions
--duration-normal	150ms	Default UI transitions
--duration-moderate	200ms	Slightly deliberate motion
--duration-slow	300ms	Significant state changes
--ease-decel	—	Enter animations (decelerate)
--ease-accel	—	Exit animations (accelerate)
--ease-spring	—	Bouncy, physical feel
--ease-out	—	Standard, clean feel