The Universe Is Showing You Something It Isn't Showing Anyone Else
Source: Sylvanshine — the retroreflective glow of dew-laden conifer forests Named by: Alistair Fraser, Pennsylvania State University, 1994 Tech: WebGL2 fragment shader + GSAP ScrollTrigger Techniques: SDF tree silhouettes, Snell’s law ray tracing, contact angle animation, parallax depth layers Direction: Scroll-driven macro-to-micro zoom through six scales of magnification
The Phenomenon
You’re driving through a forest at night. Your headlights sweep across the conifers and the trees transform — glowing white, as if dusted in snow. Fraser called this sylvanshine, from Latin silva (forest) + shine. His description: “the normally Stygian forest transformed into a vision of snow-covered trees in the moonlight.”
Most people drive past it. They think it’s frost, or a trick of the eye. Almost nobody stops to realize what they’re seeing: millions of tiny lenses, each one independently sending light back to them.
The Physics
The mechanism is hidden in the geometry of a water droplet.
Conifer needles are coated in epicuticular wax — a waxy bloom that makes their surface hydrophobic. Water doesn’t spread flat across the needle. It beads up. The wax pushes the contact angle past 140 degrees, forcing each droplet into a near-perfect sphere.
And a sphere is a lens.
Light from your headlights enters the droplet, refracts through the curved surface (Snell’s law, n=1.333), converges to a point on the leaf behind, bounces off that surface, re-enters the sphere, and refracts again on exit — aimed directly back at the source. Your headlights. Your eyes. You.
Below 90 degrees contact angle: nothing special. At 140 degrees: retroreflection enhancement jumps by two orders of magnitude. The droplet becomes a mirror that works only for the observer standing next to the light source.
The Scroll
The experience is a journey through six scales of magnification. You start on a dark road with headlight cones piercing darkness and conifer silhouettes. You watch the trees ignite with retroreflective particles — nearest to farthest, a cascade of white points. You zoom into a single tree, then a single needle, then a single droplet forming on the waxy surface.
The contact angle climbs from 90 to 140 degrees. You watch the droplet transform from a flat puddle to a sphere.
Then the payoff: 16 parallel light rays enter the sphere from the left. You watch each one refract, converge, bounce, and return. One ghost ray at the edge fails — enters too steeply, refracts too sharply, exits the far side aimed at nothing. Proof that retroreflection isn’t magic. It requires the right geometry.
A circle — the aperture of your attention — frames the entire journey. It shrinks as you zoom deeper, tightens to a microscope at the needle scale, then expands past the viewport for the finale. The forest returns. Every glint is now warm amber, understood. They shift when you move your cursor. Proof: the light is aimed at you.
The Tech
A single fullscreen WebGL2 canvas renders all six scenes in one fragment shader pass. The uProgress uniform (0.0 to 1.0) drives everything — scene selection, element lifecycle, circle radius, text reveals. GSAP ScrollTrigger maps 900vh of scroll height to this single float.
Each scene is a function: sceneRoad, sceneGlow, sceneApproach, sceneNeedle, sceneLens, sceneReturn. Scene weights are computed with overlapping smoothstep ranges, then normalized — so transitions are always smooth crossfades.
The ray optics in Scene 5 implement actual Snell’s law refraction: incident direction, surface normal, and the ratio of refractive indices produce the refracted direction. Rays intersect the sphere (ray-circle intersection), refract inward (air to water, n=1/1.333), trace to the back surface, reflect, trace to the exit point, and refract outward (water to air, n=1.333). The result is rendered as distance fields — each pixel computes its distance to the nearest ray segment.
No Three.js, no scene graph. Just a quad, a shader, and a scroll position.