Light Tunnel Background
Flight down a twisting barrel of light, with a defocused vanishing point.
PrimitiveShadersAdvanced
$ npx remotion-ui@latest add light-tunnel-bgA flat field remapped onto the inside of a cylinder. Depth comes from the
reciprocal radius, so the wall rushes past as a pixel approaches the middle of
the frame, and the angle comes from atan plus a twist coupled to that depth.
This is the one background in the lane with a vanishing point. The others move
across a flat plane, this one travels toward something.
ribbons is rounded to an integer and that is not a convenience. The twist is
added before the angle wraps, so a fractional repeat count leaves a hard seam
running down the line where atan changes sign. Integer counts wrap cleanly and
the barrel has no visible join.
ringDensity places rings evenly in log(r) rather than in r. Spaced evenly
in r they bunch into a solid bright mass at the centre and disappear at the
rim; spaced logarithmically they hold roughly the same apparent width all the
way in, which is what keeps the folds readable instead of smearing.
defocus is the other half of that. 1/r is singular at the exact centre of
the frame, and the usual fix, clamping the radius, is also the usual tell: it
leaves a flat disc with a hard rim parked in the vanishing point. Here a
nine-tap Gaussian disk whose radius grows as r falls resolves the singularity
the way a lens does, by losing focus. Set it to 0 to see what the clamp would
have looked like.
Hue is keyed to the ribbon index rather than to the clock, so a ribbon keeps its colour for the whole flight. Driving hue from depth instead makes the entire barrel cycle through the palette as you travel, which reads as a screensaver.
Render with --gl=angle. Motion comes from the frame only, so the same frame
renders to identical pixels every time.
Depth comes from the reciprocal radius and the angle from atan plus a depth-coupled twist, so this is the one background in the lane with a vanishing point. Two details carry it: rings are spaced evenly in log(r) rather than r, which keeps the folds the same apparent width all the way in instead of bunching at the centre; and the singularity at r=0 is resolved by a nine-tap Gaussian defocus that grows as the wall recedes, rather than by clamping the radius, which leaves a flat disc with a hard rim in the vanishing point. Hue is keyed to the ribbon index rather than the clock, so a ribbon keeps its colour instead of the barrel cycling. Render with --gl=angle.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/light-tunnel-bg- Use when: full-frame shader backgrounds and ambient GPU fields.
- Customize: backgroundColor, colors, ribbons, twist, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { LightTunnelBg } from "@/remotion/primitives/light-tunnel-bg";
// Render with --gl=angle
<LightTunnelBg ribbons={14} twist={0.16} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | "#050505" | Plate behind the tunnel, and the colour the far centre falls off to. |
| colors | [string, string, string] | ["#e4ac59", "#e07a5f", "#c2557a"] | Three ribbon tints, distributed around the barrel by ribbon index. |
| ribbons | number | 12 | How many ribbons run down the barrel. Rounded to an integer: a fractional count leaves a seam where the angle wraps. |
| twist | number | 0.22 | How hard the barrel twists with depth. 0 gives straight ribbons. |
| ringDensity | number | 3.2 | Rings per unit of log-depth. Higher packs the folds tighter. |
| defocus | number | 0.035 | Radius of the centre defocus, in frame heights. 0 leaves the vanishing point sharp. |
| intensity | number | 1 | Overall brightness. |
| speed | number | 1 | Flight speed down the barrel. 0 freezes the tunnel. |