Three.js Scroll Lightning Energy Orb — GSAP Charge-Up Effect

The Three.js Scroll Lightning Energy Orb snippet builds a glowing sphere that swells, brightens, and crackles with jagged lightning arcs as the visitor scrolls, climaxing in a rapid-fire discharge burst near the end of the pinned stage. A single scrubbed charge.t value, driven by GSAP ScrollTrigger, feeds every visual channel — scale, emissive intensity, point-light brightness, and bolt frequency — so the whole buildup reverses cleanly on scroll-up.

A fresnel-like rim glow without writing a shader

Convincing energy-orb glow usually means a fresnel shader that brightens edges facing away from the camera. This snippet fakes that effect with pure geometry: a second sphere, glow, sits scaled up around the core and is rendered with side: THREE.BackSide. Because only its inner (back-facing) surface is drawn, and additive blending stacks its light onto whatever is behind it, the silhouette edges of the glow sphere read as a soft halo that thickens exactly where the sphere curves away from the camera — the same visual cue a real fresnel term produces, achieved with a stock MeshBasicMaterial instead of custom GLSL.

Why bolts are rebuilt, not tweened

A naive lightning effect might animate a fixed jagged line's vertices smoothly from one shape to another. Real electricity doesn't ease between two paths — it re-strikes along an entirely new, unpredictable route every time. The snippet's jaggedPath() function generates a fresh set of midpoints, displaced with random jitter that peaks at the middle of the bolt and tapers toward both anchored ends, and regenerateBolts() is called on a short randomized timer rather than once. Regenerating the geometry's position attribute in place (needsUpdate = true) every 45-260ms, instead of allocating new BufferGeometry objects, is what keeps the flicker both visually chaotic and cheap: one shared Float32Array sized for the maximum possible bolt count is reused and partially overwritten every cycle.

setDrawRange caps the visible bolt count

Just like the reveal technique in the constellation web snippet, the bolt geometry is allocated once at its maximum size (26 bolts × 9 segments) and geometry.setDrawRange() decides how many of those segments actually render this cycle. Early in the charge sequence only 2-3 bolts are visible; as t climbs toward 1 the count target grows toward the maximum, and during the final discharge window the snippet forces the full 26-bolt count on every flicker tick for a sustained crackling burst. No bolt geometry is ever added to or removed from the scene graph — only the draw range and the buffer contents change.

Charge intensity is layered, not switched

Rather than a single value driving one property, t fans out into several coordinated channels: core.scale grows toward 1.9×, emissiveIntensity ramps from 1.0 toward roughly 3.4, and the THREE.PointLight intensity climbs from 1.5 toward 6.5 — each also gets a small Math.sin(clock * 6) flicker term scaled by t, so the orb visibly hums harder as it charges rather than just growing uniformly brighter. A slower independent Math.sin(clock * 3.2) breathing term is blended in at every charge level so the orb never looks perfectly static even at t = 0.

The discharge climax is a state change, not a curve

Rather than trying to encode a sudden burst into the easing curve itself, the animation loop checks t > 0.88 each frame and flips a discharging boolean. Once true, the bolt regeneration timer switches to a much shorter, tighter random interval and always requests the maximum bolt count, producing a visibly distinct rapid-fire climax in the last stretch of scroll rather than a smooth continuation of the earlier gradual buildup — similar in spirit to how the magnetic particles snippet flips into a distinct release state past a threshold.

PointLight intensity gives the flicker physical weight

Because coreLight is a real THREE.PointLight positioned at the orb's center, its intensity swings are what sell the crackle as *energy* rather than just moving lines — nearby geometry (or, in a customized scene, other props) would visibly brighten and dim in sync with each bolt cycle. Pairing an emissive-material core with an actual dynamic light source is a lightweight combination also used by the holographic globe and galaxy formation snippets to make glowing scroll effects feel like they cast real light rather than being flat, self-illuminated shapes.