Scene Backdrop
WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд. Pro · 3D и моушн › Моушн для любых компонентов
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add scene-backdropnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { SceneBackdrop } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
scene * | ReactNode | The scene behind the content: a WebGL scene (ShaderAurora, LiquidSurface, ParticleFabric, ShaderGradient), a CSS one (HorizonGrid, an effects background) or any element. It fills the backdrop. | |
attachment | 'scroll' | 'sticky' | 'scroll' | scroll — the scene fills the section and scrolls with it; sticky — it stays on screen while a tall section scrolls past. |
veil | 'none' | 'flat' | 'bottom' | 'center' | 'none' | A wash of the page colour over the scene, so text on it stays readable: everywhere, rising from the bottom, or around the middle. |
veilOpacity | number | 0.55 | Strength of the veil, 0–1. |
pointer | boolean | true | The scene follows the pointer over the whole section, content included (for scenes that react to it). |
Похожие компоненты
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
- Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
- Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
Назад: Presence · Далее: Scroll Cylinder · Весь раздел «3D и моушн»