Hero Templates
Depth Stage
ProA DOM hero stage where any children become parallax layers in real 3D. Pointer-tracked tilt, spring physics, a following spotlight, depth of field, staggered entrance, zero canvas.
Install
Props
What It Demonstrates
- Parallax
- Background and foreground move at different speeds while scrolling, creating depth.
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Reduced motion
- Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
- Hover effect
- Visual change when the cursor moves over an element.
Related Components
Grid HorizonPro
A synthwave horizon in one fragment shader. A glowing grid floor, a banded sun, parallax ridges and a pulse rolling out of the vanishing point.
Eclipse FlarePro
A total eclipse under liquid-glass copy: a streamered corona, a diamond-ring flare on the breath, god-rays marched through drifting cirrus in one jittered pass.
Shard OrbitPro
A giant crystal monolith turning on its axis in a glitter field, or a halo or helix of instanced shards lit by the pulsing core, drag-orbited beside left-aligned copy, fully GPU-driven.
TidalPro
A dusk ocean under flat, left-aligned copy: noise-warped swells with wind ripple, sunlit crests, a sun path and breaking foam, raymarched in one bounded pass.
Liquid ChromePro
A liquid-chrome form of fused spheres over a black mirror floor: rectangular studio softboxes, one mirror bounce and soft occlusion, sphere-traced in one pass beside left-aligned copy.
MonolithPro
A monumental slab floating over a reflective grid floor, rendered as a fogged 3D scene you can orbit.