Scene Backdrop
WebGL or CSS scene behind a regular UI: hero, cards, dashboard. Pro · 3D and motion › Motion for any component
Puts a scene under ordinary interface — a hero with buttons and a form, a grid of cards, a whole dashboard — without the two getting in each other's way: the scene lies in its own layer under the content (isolated, so no z-index outside is needed), takes no clicks and no focus and is hidden from assistive technology, while the content above stays fully interactive. A scene that reacts to the pointer still sees it over the content. One backdrop behind many cards costs one WebGL context instead of one per card; the scene pauses off screen and in a hidden tab, as it does on its own.
Installation
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';Props
| 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). |
Related components
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
- Parallax Layers — Depth layers that shift with scroll and cursor
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
Previous: Presence · Next: Scroll Cylinder · All 3D and motion