Light Warp is an animated WebGL scene of warm light streaks rushing through a bent hourglass, with chromatic fringes, hot white cores and drifting stardust. Use it for a high-energy hero, a product reveal or a transition section. Zoom, waist width, waist skew, tilt and twist shape the hourglass; strands, streak length and flare set the light; chromatic dispersion, glow, stardust and exposure control the finish. Flow speed, variation, timeline offset and palette are editable live, and the HTML, React and Svelte exports share the same original renderer.
How this shader works
Light Warp sends warm light streaks rushing through a bent hourglass shape, with chromatic fringes, hot white cores and drifting stardust. It suits a high-energy hero, a product reveal or a transition section. Zoom, Waist width, Waist skew, Tilt and Twist shape the hourglass. Strands, Streak length and Flare set the light, and Chromatic dispersion, Glow, Stardust and Exposure control the finish.
Tips
- Waist width sets how narrow the middle of the hourglass is. Raise it for a wider, calmer tunnel.
- Tilt and Waist skew lean the shape. Small values keep it close to symmetrical.
- Lower Chromatic dispersion to remove the coloured fringes for a cleaner warm light.
- Swap Warm streaks for a cool colour to turn the scene blue or violet.
Questions
How do I make a light speed or warp tunnel animation?
Open Light Warp, raise Flow speed and Streak length for a sense of speed, and set Strands for how dense the light is. Export it as an HTML file, a React or Svelte component or an MP4 video.
What does Variation do?
It picks a different arrangement of the streaks while keeping your other settings.
Preview and customize in the browser. Exports require membership.