Bounce Light Field
A dark room seen from above, lit by a lamp you carry. Every slab throws a real traced shadow, sharp at its base and softening with distance, and light that lands on a slab bounces back in the accent colour. Real-time 2D global illumination by radiance cascades; a press leaves an ember of light behind.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Light finds its way in.
Every shadow is traced, every surface glows back. The room is lit by the hand that moves through it.
Props
"use client";
import { useEffect, useRef } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* BounceLightField: a dark room seen from above, lit by a lamp you carry.
* The pointer is the lamp. Light pours across the floor, every slab throws a
* real shadow (hard near its base, softening with distance, exactly as an
* area light does), and light that lands on a slab bounces off it in the
* accent colour, so the shadows fill with a faint coloured glow. A press
* leaves a small ember of light behind; up to three burn and slowly fade.
*
* This is real 2D global illumination by RADIANCE CASCADES (Alexander
* Sannikov's method), in WebGL2 fragment shaders:
* - the slabs are baked once into a distance field, the lamps stay analytic;
* - six cascades of probes trace rays: cascade 0 has a probe every 2 px
* looking in 4 directions over a 2 px interval, and each cascade above
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this background
Most cursor-light backgrounds draw a soft glow under the pointer. This one lights a room. The slabs on the floor are baked once into a distance field; the lamp you carry stays exact. Six cascades of light probes then trace rays: the finest has a probe every two pixels looking four ways over a short distance, and every cascade above it has a quarter of the probes, four times the directions and four times the reach, so each costs the same. Merged from the coarsest down, they give every pixel the light arriving from every direction, which is why the shadows behave like real ones, crisp where a column meets the floor and widening into soft penumbrae further away. Slabs re-emit the light that reached them a frame ago in your accent colour, so light keeps bouncing and the shadows fill with a faint coloured glow. Three rooms ship: a colonnade that fans the light into rays, scattered monoliths and a field of orbs. Press to leave an ember; three can burn at once.
Curator’s note
Radiance cascades are the technique the graphics community has been excited about since 2024: noise-free global illumination at a fixed cost. This is a dependency-free WebGL2 implementation of the 2D form, aimed at one job: making a hero section feel lit by the visitor's hand.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Ink Aura Field
backgroundsDark water holding two inks: the pointer paints a pale ink through it as it passes, and a press drops cobalt that lands, blooms outward in a ring and curls into the first. A real GPU fluid with knobs for how far the ink travels, how much it ripples and how long it lingers.
Chladni Sand Field
backgroundsFine sand on a black vibrating plate. The pointer tunes the plate, so the grains shiver loose and crawl into a new symmetric nodal-line figure; a press strikes it and a shock spreads while the figure re-forms. Real standing-wave maths on the GPU, with knobs for complexity, settle, strike and the calm zone behind your copy.
Physarum Vein Field
backgroundsA living transport network on black. Hundreds of thousands of slime-mould agents grow a luminous web of veins; your cursor is food, so the web reaches toward it, and a press plants a glowing node the network connects to with thick trunk veins before slowly letting go.