Animations

Entangle ships a small set of shared keyframes and utility classes so components don’t redefine the same animations over and over. They are exposed as both raw keyframe references (for use inside your own Vanilla Extract recipes) and ready-to-apply class names. Every utility class respects prefers-reduced-motion: reduce by halting the animation.

Import

import {
  animSpin,
  animPulse,
  animBlink,
  animFadeIn,
  spinKeyframe,
  pulseKeyframe,
  blinkKeyframe,
  fadeInKeyframe,
} from 'entangle-ui';

Utility classes

Apply directly to any element via className:

import { animSpin } from 'entangle-ui';

<svg className={animSpin}>
  <circle cx="8" cy="8" r="6" stroke="currentColor" fill="none" />
</svg>;

Utility	Animation	Typical use
animSpin	1s linear infinite rotate (0deg → 360deg)	Loading rings, refresh icons
animPulse	1.5s ease-in-out infinite opacity (1 → 0.4 → 1)	Skeleton placeholders, soft pings
animBlink	1s steps(1) infinite opacity toggle	Cursor blinks, attention prompts
animFadeIn	One-shot opacity 0 → 1, normal transition timing	Mount transitions, toast appearance

When the user has prefers-reduced-motion: reduce enabled in their OS, every utility class above sets animation: none automatically.

Keyframes for custom recipes

Use the exported keyframe references when you want to compose your own animation in a Vanilla Extract recipe:

my-component.css.ts

import { style } from '@vanilla-extract/css';
import { spinKeyframe } from 'entangle-ui';

export const slowSpin = style({
  animation: `${spinKeyframe} 4s linear infinite`,
});

This keeps the keyframe definition shared across the bundle (smaller CSS) and avoids drift from copy-pasted versions.

Reduced motion

The prefers-reduced-motion media query is the source of truth — utility classes react to it automatically. If you build your own animation with the keyframes, opt into the same behavior:

import { style } from '@vanilla-extract/css';
import { pulseKeyframe } from 'entangle-ui';

export const myPulse = style({
  animation: `${pulseKeyframe} 1.5s ease-in-out infinite`,
  '@media': {
    '(prefers-reduced-motion: reduce)': {
      animation: 'none',
    },
  },
});

Where they’re used internally

Component	Keyframe
Spinner (ring)	spinKeyframe
Spinner (pulse)	pulseKeyframe
Spinner (dots)	pulseKeyframe

Button’s built-in loading spinner and ChatTypingIndicator keep their own local keyframes for now and will migrate to these utilities in a follow-up patch — switch to the shared utilities first when authoring new components.