Features

Playground

Change a setting, watch the result, copy the CSS that produces it.

Change a setting, see the motion, copy the code

This is the real animation, not a recording. The CSS is generated from the same values you are editing.

Preset

Easing

Duration: 500ms

fade-up

played 0×

card.css

.card {
  animation: fade-up 500ms ease-out both;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

What moves

The preview replays through the Web Animations API whenever the preset or the easing changes, and the CSS is generated from the same values. With reduced motion it only plays when you press Replay.

Built from

Block source

Install via CLI:pnpm add @voltui/components lumen-icons

TypeScript

Loading editor…

One standalone component. Paste it into your project, point the imports at your Volt path, and wire the buttons to your own routes.

Every animation here is guarded by prefers-reduced-motion, and the colours come from theme tokens — try a different preset with the switcher in the header and the block follows.