Parallax 3D objects

Scene & Content

shape (default: "mix") — Controls what 3D geometry the floating objects use. You can pass a specific shape name ("icosahedron", "octahedron", "tetrahedron", "dodecahedron", "box", "torus", or "cone"), and every object in the scene will use that same geometry. If you leave it as "mix", each object randomly picks one of those shapes, giving you a varied cloud of forms. Internally, all objects share one geometry when a single shape is chosen, which is slightly more memory-efficient.

objectCount (default: 14) — How many 3D objects are created and scattered in the scene. Values are rounded to a whole number and clamped to a minimum of 1. More objects means a denser cloud, but also more work for the GPU each frame.

distance (default: 18) — How far the camera sits from the center of the scene (along the Z axis). Larger values push the camera back, making the whole cloud appear smaller and flatter; smaller values bring the camera closer, so objects fill the frame and feel more immersive. Must be at least 1.

Motion & Interaction

speed (default: 1) — A global time multiplier for all animation. It scales both the object spinning and the slow drifting motion. 1 is normal speed, 2 is double speed, 0.5 is slow-motion, and values near 0 make the scene almost stand still.

parallax (default: 1) — How strongly the scene reacts to your mouse pointer. At 0 the pointer has no effect at all; at 1 you get the standard tilt/slide response; higher values exaggerate the effect. It scales both the camera movement and object shifts.

parallaxMode (default: "rotation") — Chooses between two styles of mouse-driven parallax:

• "rotation" — the entire group of objects rotates and the camera swings around in response to the pointer, like orbiting around the scene. This gives a "looking around" feel.
• "translation" — the objects themselves slide in the opposite direction of the pointer (mouse right → objects drift left, mouse down → objects drift up), with nearer objects moving further than distant ones. The camera and group stay fixed, so it feels like a layered, depth-based shift rather than a camera orbit.

perspective (default: 50) — The camera's field of view in degrees, clamped between 5 and 170. Low values create a telephoto look (flatter, less distortion); high values create a wide-angle/fisheye look (more dramatic depth, more distortion at the edges).

Color

colorMode (default: "hue") — How object colors are determined:

• "hue" — each object gets its own color generated from the hue base value plus a random offset, producing a varied, rainbow-like palette. The two colored point lights also get tinted hues.
• "solid" — all objects and lights use the exact color you specify, giving a monochromatic look.

hue (default: 280, i.e. purple) — The base hue (0–360 on the color wheel) used when colorMode is "hue". All object colors and light colors are derived from this number (0 = red, 120 = green, 240 = blue, etc.).

hueSpeed (default: 0) — How fast the entire color palette slowly cycles through the color wheel over time, in degrees per second. At 0 the colors stay fixed. In the example call at the bottom it's set to 50, so the full palette rotates roughly every 7 seconds. Notably, this runs on wall-clock time and is unaffected by speed — you can freeze the geometry while colors keep shifting.

color (default: "#a855f7", a purple) — The solid color used by all objects and lights when colorMode is "solid". It's ignored in "hue" mode. When hueSpeed is active in solid mode, this color's saturation and lightness are preserved while its hue rotates.

background (default: "#05030a", a near-black) — The scene's background color, rendered behind all objects.

Glow & Post-Processing Effects

bloomStrength (default: 0) — The intensity of the bloom (UnrealBloom) effect, which makes bright areas of the scene glow and bleed light. 0 disables it entirely; typical values range from ~0.3 for a subtle glow to ~1.5 for a strong neon effect. The example uses 0.7.

bloomRadius (default: 0.6) — How soft and spread out the bloom glow is. Lower values make the glow tight and sharp; higher values make it hazy and diffuse.

bloomThreshold (default: 0) — The brightness level a pixel must exceed before it blooms. At 0 everything blooms (creating an overall dreamy haze); raising it means only the brightest highlights (like specular glints on the metallic objects) glow.

saturation (default: 1) — A post-processing pass that adjusts color saturation of the final image. 1 is unchanged, 0 is fully grayscale, values above 1 over-saturate. The example uses 0.55, giving a slightly muted, filmic palette.

exposure (default: 1) — The tone-mapping exposure of the renderer (using ACES Filmic tone mapping). Values above 1 brighten the whole scene; below 1 darken it. It behaves like an exposure compensation dial on a camera.

Screen Effects (final shader pass)

chromaticAberration (default: 0) — Simulates a lens defect where red and blue channels shift slightly outward from the image center, creating subtle colored fringing. 0 disables it; small values like 0.002–0.01 give a subtle analog/CRT feel, higher values look glitchy. The effect grows stronger toward the edges of the screen.

scanline (default: 0) — Overlays horizontal CRT-style scanlines across the image (the brightness of each line depends on the screen's pixel row). 0 disables it; 1 applies full-strength darkening between lines, giving a retro monitor look.

vignette (default: 0) — Darkens the corners and edges of the frame, drawing the eye toward the center. 0 disables it; 1 applies a strong dark vignette. Uses a smooth falloff so it fades in gradually from center to edge.

Depth of Field

bokeh (default: 0) — The strength of the depth-of-field (blur) effect. 0 disables it entirely (everything stays sharp, and the effect costs no GPU time since the pass isn't even created). Values up to 1 increase both the "aperture" (how much blur is applied) and the maxblur limit (how blurry out-of-focus areas can get). The example uses 0.5 for a moderate cinematic blur.

bokehFocus (default: 0.15) — Where the focus plane sits, as a value between 0 and 1. The code measures the nearest and farthest object distances from the camera; bokehFocus: 0 focuses on the very closest objects, 1 focuses on the farthest, and in-between values focus somewhere along that range. Everything outside the focus region gets blurred. The example uses 0 (actually 0.15 is the default — the example call overrides it to 0), keeping objects near the camera crisp while the back of the cloud melts into soft bokeh.

One last thing worth knowing: the function also respects the browser's "prefers reduced motion" accessibility setting automatically — if the user has it enabled, the animation loop never starts and just a single static frame is rendered.