Hero Templates
Penumbra
ProA cloud of dark shards hangs between a spotlight and a wall, beside left-aligned copy. From most angles its shadow looks like noise. Turn the cloud to its true angle and the shadow spells a word. Let go and it turns back.
Install
Props
What It Demonstrates
- Loop
- An animation that repeats, a set number of times or infinitely.
- Drag
- Moving an element by grabbing it, often with momentum when released.
- Momentum
- Motion that carries velocity, especially after a drag or interruption.
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Reveal
- Content is uncovered gradually, often by animating a clip-path or mask.
- Float
- A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.
- Hardware acceleration
- Animating transform and opacity lets the GPU keep motion smooth.
Related Components
Warp RunPro
A star-streak tunnel rendered as velocity-stretched lines; the pointer steers, dragging banks the ship.
SilvergrassPro
A field of silver grass under the moon, beside left-aligned copy. Wind rolls across thousands of blades drawn on the GPU. The grass parts around the pointer, a click sends a ring of wind through it, and a drag turns the view.
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.