Pulse Lattice
Pulse Lattice is a particle background in the UI HUB particle backgrounds collection. A single Three.js Mesh of hex-lattice ribbon edges. The grid is generated once: over extentX 80 and z from zFar -110 to zNear 60, hexagonal cells (hexR 1.6, horizontal step sqrt(3)*R, vertical step 1.5*R, odd rows offset) contribute their 6 edges, deduplicated by a rounded-coordinate Set, then each edge expands to a 4-…
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; procedurally built BufferGeometry: hex-edge lattice expanded to quads with aCorner/aEnd attributes and an index buffer; screen-space ribbon expansion in the vertex shader (uses uRes in device pixels).
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 Pulse Lattice?
An interactive infinite hexagonal lattice of additive ribbon edges over black that breathes with a central bulge and a ring dip, tints purple→blue→cyan by height, and responds to hover, drag-orbit, zoom, click ripples and view presets.
Pulse Lattice 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 Pulse Lattice works
A single Three.js Mesh of hex-lattice ribbon edges. The grid is generated once: over extentX 80 and z from zFar -110 to zNear 60, hexagonal cells (hexR 1.6, horizontal step sqrt(3)*R, vertical step 1.5*R, odd rows offset) contribute their 6 edges, deduplicated by a rounded-coordinate Set, then each edge expands to a 4-vertex quad (aEnd = other endpoint, aCorner = (along 0/1, side ±1)) with an index buffer. One ShaderMaterial (additive, depthTest/depthWrite off, DoubleSide) does everything per frame. Vertex: displace both endpoints by height(xz) = uAmp*uPeak*exp(-r2/(2*uSigma^2)) - uDip*uDipDepth*exp(-r2/(2*uDipSigma^2)) plus up to 4 ripple rings (uRip arrived positions, expanding at uSpeed) using cos(x*0.8)*exp(-x^2/9)*exp(-age*0.8)/(1+0.07r); project both ends, build a screen-space normal, and offset by aCorner.y * a screen-space half-width lerped between uLine.x/uLine.y by clamp(14/dist); pass vH = wp.y/uPeak, vSide, and a distance fade vFade from uFade (+uShift). Fragment: t = clamp(vH*1.15 + uAmp*0.45), color purple->blue->cyan, alpha = (1-smoothstep(0.55,1,abs(vSide))) * vFade. The cover profile (ease/gauss) is retained. Interaction: hover ramps uAmp (0->1) with a short dip; the pointer casts onto the y=0 plane (Raycaster + Plane) to move uCenter (bump, lerped by follow 0.22) which drags the bulge under the cursor; dragging orbits yaw/pitch (rotSpeed 0.0055, clamped pitch -1.2..1.53), wheel/pinch scale R (clamped 8..60), a click spawns a ripple + speed boost, double-click/keys 0/t/u and the HUD set front/angle/top/under (goal/current orbit smoothed by damp 0.12). Camera sits at target + R*(sin yaw cos pitch, sin pitch, cos yaw cos pitch) looking at target [0,0.2,-16]; port fov widens on portrait.
Technical information for Pulse Lattice
| Category | Particle Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | HTML canvas |
| State change | a dormant violet hex grid on black with the hint and view HUD to a woken lattice pulsing purple→cyan with the bulge tracking the pointer, orbiting and rippling on click |
| Props | 4 configurable |
| Usage example | Not published yet |
What Pulse Lattice requires
- Three.js WebGLRenderer + ShaderMaterial with custom GLSL
- procedurally built BufferGeometry: hex-edge lattice expanded to quads with aCorner/aEnd attributes and an index buffer
- screen-space ribbon expansion in the vertex shader (uses uRes in device pixels)
- Raycaster + Plane intersection to place the pointer bump on the y=0 floor
- Pointer Events with pointer capture + two-pointer pinch zoom
- orbit goal/current smoothing + MathUtils.clamp limits
- ResizeObserver on the container + window resize (recomputes camera aspect/fov and uRes)
- requestAnimationFrame render loop driven by THREE.Clock with capped delta
- prefers-reduced-motion matchMedia (drops the breathing term)
- full dispose on unmount (cancel rAF, disconnect ResizeObserver, dispose geometry/material/renderer, remove all listeners)
Pulse Lattice questions
What is Pulse Lattice?
An interactive infinite hexagonal lattice of additive ribbon edges over black that breathes with a central bulge and a ring dip, tints purple→blue→cyan by height, and responds to hover, drag-orbit, zoom, click ripples and view presets.
How does Pulse Lattice work?
A single Three.js Mesh of hex-lattice ribbon edges. The grid is generated once: over extentX 80 and z from zFar -110 to zNear 60, hexagonal cells (hexR 1.6, horizontal step sqrt(3)*R, vertical step 1.5*R, odd rows offset) contribute their 6 edges, deduplicated by a rounded-coordinate Set, then each edge expands to a 4-vertex quad (aEnd = other endpoint, aCorner = (along 0/1, side ±1)) with an index buffer. One ShaderMaterial (additive, depthTest/depthWrite off, DoubleSide) does everything per frame. Vertex: displace both endpoints by height(xz) = uAmp*uPeak*exp(-r2/(2*uSigma^2)) - uDip*uDipDepth*exp(-r2/(2*uDipSigma^2)) plus up to 4 ripple rings (uRip arrived positions, expanding at uSpeed) using cos(x*0.8)*exp(-x^2/9)*exp(-age*0.8)/(1+0.07r); project both ends, build a screen-space normal, and offset by aCorner.y * a screen-space half-width lerped between uLine.x/uLine.y by clamp(14/dist); pass vH = wp.y/uPeak, vSide, and a distance fade vFade from uFade (+uShift). Fragment: t = clamp(vH*1.15 + uAmp*0.45), color purple->blue->cyan, alpha = (1-smoothstep(0.55,1,abs(vSide))) * vFade. The cover profile (ease/gauss) is retained. Interaction: hover ramps uAmp (0->1) with a short dip; the pointer casts onto the y=0 plane (Raycaster + Plane) to move uCenter (bump, lerped by follow 0.22) which drags the bulge under the cursor; dragging orbits yaw/pitch (rotSpeed 0.0055, clamped pitch -1.2..1.53), wheel/pinch scale R (clamped 8..60), a click spawns a ripple + speed boost, double-click/keys 0/t/u and the HUD set front/angle/top/under (goal/current orbit smoothed by damp 0.12). Camera sits at target + R*(sin yaw cos pitch, sin pitch, cos yaw cos pitch) looking at target [0,0.2,-16]; port fov widens on portrait.
Which category does Pulse Lattice belong to?
Pulse Lattice 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 Pulse Lattice?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Pulse Lattice?
Optional inline styles for the root container. It defaults to {}.
Is Pulse Lattice free to use?
Pulse Lattice 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 Pulse Lattice use?
Pulse Lattice uses React and Three.js and is styled with Tailwind CSS.
What does Pulse Lattice need to run?
Pulse Lattice needs Three.js WebGLRenderer + ShaderMaterial with custom GLSL, procedurally built BufferGeometry: hex-edge lattice expanded to quads with aCorner/aEnd attributes and an index buffer, screen-space ribbon expansion in the vertex shader (uses uRes in device pixels) and Raycaster + Plane intersection to place the pointer bump on the y=0 floor.