Animated Background With Warp Tunnel

Pro

Full-bleed WebGL background with radial light streaks rushing through a spiral tunnel toward a cursor-following vanishing point, built on Three.js with a three-stop depth gradient, fog, twist, film grain, and separate light and dark defaults.

When to use Animated Background With Warp Tunnel

Streaks of light rushing outward from a vanishing point that follows the cursor around the section. It reads as speed and depth, and it is by some distance the most assertive thing in this category. Radial motion pulls the eye toward the centre, which is useful when there is exactly one thing in the centre worth looking at.

So: a launch announcement, a countdown, a single claim in large type. Not a section with a paragraph in it, where the streaks and the text pull in opposite directions and the reader loses. Twist, fog and the depth gradient are all props, and dialling the twist down turns it from a tunnel into a soft radial wash if you want the depth without the velocity. Test it once with reduced motion enabled before shipping, since this is the block where that setting matters most.

Block details

Category
Motion
Renders
WebGL canvas. Compiles a shader before the first frame
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
@react-three/fiberclsxnext-themestailwind-mergethree
Source
492 lines, 16 KB in one file
Install
wensity add animated-background-with-warp-tunnel --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
webgl, three.js, shader, tunnel, radial, streaks, light, dark, background
Last updated

More motion