Violet Cascade
Violet Cascade is a particle background in the UI HUB particle backgrounds collection. One Three.js scene with two additive point clouds plus a reflection plane, all driven by shared uniforms. A 14,000-point 'beam' (uFlow 1) and a 7,000-point 'ring' halo (uFlow 0) share one vertex/fragment shader.
The component is driven by 4 documented props (className, style, compact, hint), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Three.js WebGLRenderer + ShaderMaterial with custom GLSL (one shared particle shader + one pool shader); Points + BufferGeometry with custom aSeed (vec4) and aSize attributes; PerspectiveCamera with fov derived per-resize from the visible extent.
Preview the particle background in the browser above, copy the source, and paste it into your project. Particle Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Violet Cascade?
A floating violet ring of 21,000 additive particles spins and cascades downward into a reflective pool of procedural light streaks, with pointer repulsion, a click pulse, parallax tilt toward the cursor and a CSS-blurred bloom pass.
Violet Cascade at a glance
- Category
- Particle Backgrounds
- Pricing
- Free to use
- Libraries
- React and Three.js
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Violet Cascade works
One Three.js scene with two additive point clouds plus a reflection plane, all driven by shared uniforms. A 14,000-point 'beam' (uFlow 1) and a 7,000-point 'ring' halo (uFlow 0) share one vertex/fragment shader. Per particle: seed = (angle, radialBiasedRadius, lifePhase, speed) where speed is (1 or 2)/2.88 so the loop is seamless. The beam's life = fract(phase + uTime*speed) makes particles fall from ringY (1.42) down by fall (1.35); its alpha = pow(1-life,1.5)*(.45+.55*twinkle) and color mixes hi vec3(.93,.85,1) to lo vec3(.36,.2,1) by smoothstep(0,.55,life). The ring is a near-static halo (life = phase*.035), full hi color, alpha = .55+.45*twinkle. Both apply a pointer repulsion f = exp(-dot(d,d)/.14)*uAct and push xy by normalize(d)*f*.38, and scale alpha by (1 + uPulse*.8 + f*1.2). gl_PointSize = aSize*uPx*(1+f*1.4)*(20/-mv.z) gives perspective sizing. The group tilts: rotation.x = tilt (.14) and parallax rotation.y toward pointer x and rotation.x toward pointer y, eased by .06. The pool mesh (PlaneGeometry 2.4x1.3 at y = poolY+0.35) is a fragment-shader field of vertical streaks: value-noise column pattern (col = p.x*48 + sin(t*9+uTime*2)*.8), smoothstep streak mask * upward env exp(-t*3.2), plus a bright surface band exp(-(t/.09)^2), an x envelope exp(-(|x|/.72)^4), a pointer glow mx = exp(-(p.x-uMouse.x)^2/.07)*uAct and a click pulse uPulse that decays (uPulse *= .04^dt). A second 2D canvas holds a quarter-scale drawImage of the WebGL frame, screen-blended and CSS-blurred into a bloom.
Technical information for Violet Cascade
| Category | Particle Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders, HTML canvas, blend modes, CSS filters |
| State change | a violet ring of particles hovering above a faint reflective pool in a near-black stage to a full violet cascade: the ring spins and particles stream down into the shimmering streak pool while the whole group tilts toward the pointer |
| Props | 4 configurable |
| Usage example | Not published yet |
What Violet Cascade requires
- Three.js WebGLRenderer + ShaderMaterial with custom GLSL (one shared particle shader + one pool shader)
- Points + BufferGeometry with custom aSeed (vec4) and aSize attributes
- PerspectiveCamera with fov derived per-resize from the visible extent
- AdditiveBlending with depthWrite disabled
- seeded deterministic RNG for particle layout
- ResizeObserver on the container + window resize (recomputes camera + bloom canvas)
- requestAnimationFrame render loop driven by THREE.Clock with capped delta
- second 2D canvas bloom (downscaled drawImage + CSS blur)
- pointermove / pointerdown / pointerleave / pointerup listeners on the container with getBoundingClientRect-local coordinates
- prefers-reduced-motion matchMedia (0.25x time scale)
- full dispose on unmount (cancel rAF, disconnect ResizeObserver, dispose geometries/materials/renderer)
Violet Cascade questions
What is Violet Cascade?
A floating violet ring of 21,000 additive particles spins and cascades downward into a reflective pool of procedural light streaks, with pointer repulsion, a click pulse, parallax tilt toward the cursor and a CSS-blurred bloom pass.
How does Violet Cascade work?
One Three.js scene with two additive point clouds plus a reflection plane, all driven by shared uniforms. A 14,000-point 'beam' (uFlow 1) and a 7,000-point 'ring' halo (uFlow 0) share one vertex/fragment shader. Per particle: seed = (angle, radialBiasedRadius, lifePhase, speed) where speed is (1 or 2)/2.88 so the loop is seamless. The beam's life = fract(phase + uTime*speed) makes particles fall from ringY (1.42) down by fall (1.35); its alpha = pow(1-life,1.5)*(.45+.55*twinkle) and color mixes hi vec3(.93,.85,1) to lo vec3(.36,.2,1) by smoothstep(0,.55,life). The ring is a near-static halo (life = phase*.035), full hi color, alpha = .55+.45*twinkle. Both apply a pointer repulsion f = exp(-dot(d,d)/.14)*uAct and push xy by normalize(d)*f*.38, and scale alpha by (1 + uPulse*.8 + f*1.2). gl_PointSize = aSize*uPx*(1+f*1.4)*(20/-mv.z) gives perspective sizing. The group tilts: rotation.x = tilt (.14) and parallax rotation.y toward pointer x and rotation.x toward pointer y, eased by .06. The pool mesh (PlaneGeometry 2.4x1.3 at y = poolY+0.35) is a fragment-shader field of vertical streaks: value-noise column pattern (col = p.x*48 + sin(t*9+uTime*2)*.8), smoothstep streak mask * upward env exp(-t*3.2), plus a bright surface band exp(-(t/.09)^2), an x envelope exp(-(|x|/.72)^4), a pointer glow mx = exp(-(p.x-uMouse.x)^2/.07)*uAct and a click pulse uPulse that decays (uPulse *= .04^dt). A second 2D canvas holds a quarter-scale drawImage of the WebGL frame, screen-blended and CSS-blurred into a bloom.
Which category does Violet Cascade belong to?
Violet Cascade is listed under Particle Backgrounds in the UI HUB catalog. Particle backgrounds render tens of thousands of points on the GPU: spheres, halos, fields and constellations that drift, glow and react to the pointer. They are the heaviest components in the library, so each one lists its rendering approach and requirements before you copy it. Use them as hero backdrops, section backgrounds or full-page intros where a static gradient would fall flat.
What does the className prop do in Violet Cascade?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Violet Cascade?
Optional inline styles for the root container. It defaults to {}.
Is Violet Cascade free to use?
Violet Cascade is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Violet Cascade use?
Violet Cascade uses React and Three.js and is styled with Tailwind CSS.
What does Violet Cascade need to run?
Violet Cascade needs Three.js WebGLRenderer + ShaderMaterial with custom GLSL (one shared particle shader + one pool shader), Points + BufferGeometry with custom aSeed (vec4) and aSize attributes, PerspectiveCamera with fov derived per-resize from the visible extent and AdditiveBlending with depthWrite disabled.