Animated Background With Warp Tunnel
ProFull-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

