Gravitational Lens

<GravitationalLens>CSS Modules

Spacetime well that bends the field behind it.

InstallationColoxo CLI

npx coloxo add gravitational-lens

ES Module ImportPlayground / npm package

import { GravitationalLens } from '@coloxo/ui/visuals';

1. Live preview

This is the real component, not a recording. Move the pointer over it, then adjust the renderer settings.

Fragment shader

<GravitationalLens quality="low" />

2. Usage

Spacetime well that bends the field behind it. npx coloxo add gravitational-lens copies this effect in a Tailwind project or a Coloxo CSS project, and adds @coloxo/ui to package.json. You can also import it from @coloxo/ui/visuals.

3. Performance notes

Effects render on demand and dispose their GPU context when unmounted.

Every effect pauses when scrolled out of view or when the tab is hidden, so an idle page costs nothing.
quality caps the device pixel ratio. Keep it at low when several effects share one viewport.
With respectReducedMotion enabled, the effect renders a single static frame instead of animating.
The output is a decorative canvas hidden from assistive technology. Never place essential content only inside the effect.

4. Props

Name	Type	Default	Description
gravityStrength	number	0.6	Pull of each mass, 0–1.
lensRadius	number	0.12	Edge length of the brightest core, in normalized units.
centerPosition	VisualPoint	`{ x: 0.5, y: 0.5 }`	Gravitational centre as normalized coordinates.
trailLength	number	0.7	Persistence of the light streaks, 0–1.
color	string	Coloxo blue	Streak colour, any CSS colour.
massCount	1 \| 2	2	Number of masses: `1` for a single well, `2` for an orbiting pair.
attract	boolean	true	Whether the paired mass attracts or pushes. Ignored when `massCount` is 1.
paused	boolean	false	Render a single static frame instead of animating.
respectReducedMotion	boolean	true	Freeze to a static frame when prefers-reduced-motion is set.
quality	"low" \| "medium" \| "high"	medium	Caps the renderer pixel ratio. Use low for grids of many effects.
className / style	string / CSSProperties	—	Applied to the container element.