Reveal
Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот. Pro · 3D и моушн › Моушн для любых компонентов
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add revealnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { Reveal } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
asChild | boolean | false | Animates the only child (a Card, a Button, a section) instead of wrapping it in a div: no extra element. |
preset | 'fade' | 'up' | 'down' | 'start' | 'end' | 'scale' | 'pop' | 'flip' | How the element enters: up rises, fade only fades, scale / pop grow, start / end slide in, flip swings up in 3D. | |
distance | number | Travel, px. Default: the theme's --ui-motion-distance. | |
duration | number | Length, ms. Default: the theme's --ui-motion-enter. | |
delay | number | Wait before entering, ms. | |
spring | SpringName | The spring the move follows. Default: the theme's --ui-motion-spring (pop bounces). | |
once | boolean | Enter once (default) or each time the element scrolls back into view. | |
amount | number | Visible share that starts the entrance, 0–1. | |
margin | string | Grows or shrinks the viewport that counts, like a CSS margin. | |
disabled | boolean | Off: the element is simply shown. | |
fade | boolean | Fade in while moving (default). false: only the move plays and the element keeps its full opacity, so its text is at its final contrast from the first frame (a figure that must stay readable, a scale emphasis). The fade preset then has nothing left to play. |
Похожие компоненты
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
Назад: Confetti · Далее: Stagger · Весь раздел «3D и моушн»