Caustics★ groundsLight through water; the strongest ambient ground in the catalogue, and it retints from the tokens.
WebGL≈3.7k tok · 3%shader-caustics · awwwards · base
Aurora curtains★ groundsSlow vertical light — ambient without competing with a headline.
WebGL≈3.7k tok · 3%shader-aurora-curtains · awwwards · base
Aurora hero★ groundsThe original WebGL aurora; still the safest bold ground.
WebGL≈3.1k tok · 2%aurora-hero · awwwards · base
Neural net pulse★ groundsA quiet node network for tech briefs, at a fraction of a shader's prompt cost.
Canvas≈1.4k tok · 1%neural-net-pulse · subtle · base
Floating orbs★ groundsThe cheapest ambient ground there is: pure CSS, no script.
CSS≈1.1k tok · <1%floating-orbs · subtle · base
Glass refraction orb★ heroesA lit glass orb — the clearest single 3D hero object.
WebGL≈3.3k tok · 3%hero-glass-orb · awwwards · base
Fresnel distorted sphere★ heroesA breathing fresnel surface; reads as premium on any palette.
WebGL≈3.2k tok · 3%hero-fresnel-sphere · awwwards · base
Kinetic typography★ typeThe staple text reveal; light, and fits almost any hero.
Script≈1.2k tok · <1%kinetic-typography · bold · base
Text scramble★ typeA decode effect for a headline or label, at about 550 tokens of code.
Script≈549 tok · <1%text-scramble · subtle · base
Hover-tilt cards★ interaction3D tilt on hover for cards; small, useful, everywhere.
Script≈1.8k tok · 1%hover-tilt · bold · base
Count-up stats★ dataStats that count up on scroll; the plainest proof-of-scale device.
Script≈1.2k tok · <1%count-up · bold · base
A light beam around a card border in CSS — one-shot by design, to draw the eye once.
CSS≈814 tok · <1%border-beam · bold · baseThis is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
See plans