Características

Playground

Cambia un ajuste, mira el resultado y copia el CSS que lo produce.

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);
  }
}

Qué se mueve

La vista previa se reproduce con la Web Animations API cada vez que cambian el preset o la curva, y el CSS se genera a partir de los mismos valores. Con movimiento reducido solo se reproduce al pulsar Repetir.

Construido con

Código del bloque

Instalar por CLI:pnpm add @voltui/components lumen-icons

TypeScript

Cargando el editor…

Un componente standalone. Pégalo en tu proyecto, apunta los imports a tu ruta de Volt y conecta los botones a tus propias rutas.

Cada animación aquí está protegida por prefers-reduced-motion, y los colores salen de los tokens del tema — prueba otro preset con el selector de la cabecera y el bloque lo sigue.