Acid Squares

A crystalline corridor of stacked squares receding into depth.

Default

Every prop is wired to the controls underneath. The corridor is raymarched in a WebGL fragment shader and dents under the cursor.

Demo Content

FeaturesAbout Sign up

New Creative Components

A luminous crystal corridor of stacked squares.

Get started Learn more

Customize

Color 1

Color 2

Color 3

Detail

Speed0.7

Wave Depth1

Color Shift0

Zoom1.3

Density10

Spread0.3

Step Size0.002

Glow1

Exposure2700

Brightness1

Contrast1

Opacity1

Cursor Collapse

Collapse Strength0.1

Cursor Radius0.35

Blur0

Grain

Grain Intensity0.05

API Reference

AcidSquares

Prop	Type	Default	Description
`color1`	`string`	`'#5227FF'`	Violet core color used for the dim depths of the corridor.
`color2`	`string`	`'#A855F7'`	Pink mid-tone color used for the glowing crystal faces.
`color3`	`string`	`'#FFFFFF'`	White highlight color used for the hottest edges.
`detail`	`"low" \| "medium" \| "high"`	`'medium'`	Raymarch quality tier (20 / 32 / 48 steps). Higher looks richer but costs more.
`speed`	`number`	`0.7`	Speed of the forward drift through the lattice.
`waveDepth`	`number`	`1`	How far the view gently drifts in and back out as the corridor breathes. 0 holds it still.
`zoom`	`number`	`1.3`	Field of view into the corridor. Higher zooms in.
`density`	`number`	`10.0`	How tightly the boxes of the lattice are packed.
`glow`	`number`	`1.0`	Gain applied to the accumulated light along each ray.
`exposure`	`number`	`2700`	Tone-mapping exposure. Higher values darken the render.
`spread`	`number`	`0.3`	Controls how the ray step grows each iteration; strongly shapes the look.
`stepSize`	`number`	`0.002`	Minimum ray step. Larger values thin out the glow.
`colorShift`	`number`	`0`	Rate of the gentle brightness shimmer cycling over time.
`contrast`	`number`	`1`	Contrast applied around the mid-tones of the final image.
`brightness`	`number`	`1.0`	Overall brightness multiplier before tone mapping.
`opacity`	`number`	`1.0`	Overall opacity of the effect over the transparent background.
`mouseInteraction`	`boolean`	`true`	Enables a soft depression that sinks the lattice downward around the pointer.
`mouseStrength`	`number`	`0.1`	How deeply the cursor presses the lattice down inside the affected area.
`mouseRadius`	`number`	`0.35`	Size of the area around the pointer that collapses, as a fraction of the view height.
`blur`	`number`	`0`	Softens the whole effect with a post-process Gaussian blur. 0 is crisp; 1 is a soft haze.
`grain`	`boolean`	`true`	Adds a faint animated film grain over the final image for a subtle analog texture.
`grainIntensity`	`number`	`0.05`	Amplitude of the grain overlay. 0 disables it entirely.
`lightMode`	`boolean`	`false`	Renders the effect over an opaque white background instead of a transparent one.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. Place it behind content with enough contrast.

Warm Tooltip Aero Shards