Horizon Grid
Бесконечная сетка-пол, уходящая к светящемуся горизонту. Pro · 3D и моушн › WebGL
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add horizon-gridnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { HorizonGrid } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
speed | number | 0.8 | Cells the floor travels per second; 0 stops it. |
cell | number | 56 | Size of a grid cell near the viewer, px. |
horizon | number | 0.5 | Height of the horizon from the top of the area, 0–1. |
tilt | number | 76 | How steeply the floor recedes, degrees: closer to 90 is flatter and longer. |
color | string | Colour of the lines and the glow. Default: the theme's accent colour. | |
sun | boolean | false | A sun sinking into the horizon, cut by slits. |
interactive | boolean | true | The vanishing point drifts a little towards the pointer. |
Похожие компоненты
- Shader Aurora — Северное сияние на WebGL-шейдере, тянется к курсору
- Shader Gradient — Живой градиент на шейдере для hero: цвета перетекают и обтекают курсор
- Liquid Surface — Водная гладь на GPU: рябь за курсором, всплеск от клика
- Particle Fabric — Ткань из десятков тысяч светящихся точек: складки, курсор, волны
- Particle Picture — Частицы собираются в картинку или текст и перетекают между ними
- Dot Globe — Глобус из точек на WebGL2: маркеры, дуги с импульсами, вращение мышью
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Назад: Dot Globe · Весь раздел «3D и моушн»