Можливості

Пісочниця

Змініть налаштування, подивіться результат і скопіюйте CSS, який його створює.

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

Що рухається

Попередній перегляд відтворюється через Web Animations API щоразу, коли змінюється пресет або крива, а CSS генерується з тих самих значень. Зі зменшеним рухом він відтворюється лише після натискання «Повторити».

Зібрано з

Код блока

Встановити через CLI:pnpm add @voltui/components lumen-icons

TypeScript

Завантаження редактора…

Один standalone-компонент. Вставте його у проєкт, спрямуйте імпорти на свій шлях до Volt і підключіть кнопки до власних маршрутів.

Кожну анімацію тут захищає prefers-reduced-motion, а кольори походять із токенів теми — оберіть інший пресет перемикачем у шапці, і блок піде за ним.