Shader Spiral Pass

Fly into the hero spiral and emerge through its soft center into the next scene

Installation

$ pnpm dlx shadcn@latest add @remocn/shader-spiral-pass

Usage

shaderSpiralPass() covers the outgoing scene with the original hero spiral, accelerates the camera straight toward its center, then opens a feathered exit onto the next scene. The vanishing point remains centered throughout the move. The incoming scene settles as the tunnel passes beyond the frame.

The transition reuses Light Tunnel, including its fast inward flow, rotating ribbons, fixed color phase, halftone and soft center. Installing the transition installs that dependency as well.

tsx

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { shaderSpiralPass } from "@/components/remocn/shader-spiral-pass";
 
export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={120}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 72 })}
      presentation={shaderSpiralPass({ spirals: 3, zoom: 14 })}
    />
    <TransitionSeries.Sequence durationInFrames={120}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Use linearTiming: camera acceleration, shader coverage and the exit are built into the presentation. The default transition takes 72 frames (2.4 seconds at 30 fps); the preview includes holds before and after it. Give both scenes their own opaque backgrounds for a complete scene exchange.

Props

Prop	Type	Default
speed	number1 Shader flow rate, clamped to 0–5. At 0 the material clock stops, but the camera and scene transition still follow presentation progress.
spirals	number3 Hero ribbon repetitions, rounded and clamped to 1–6.
twist	number0.7 Spiral winding and circular motion, clamped to 0–2.
zoom	number14 Camera magnification reached during the pass, clamped to 2–24.
softness	number0.12 Maximum exit feather width as a fraction of the shorter composition dimension, clamped to 0.02–0.3. Also capped at 12% of the current opening radius to keep the scene inside the exit.
timeOffset	number0 Initial shader time in seconds.

speednumber
Shader flow rate, clamped to 0–5. At 0 the material clock stops, but the camera and scene transition still follow presentation progress.
Default1
spiralsnumber
Hero ribbon repetitions, rounded and clamped to 1–6.
Default3
twistnumber
Spiral winding and circular motion, clamped to 0–2.
Default0.7
zoomnumber
Camera magnification reached during the pass, clamped to 2–24.
Default14
softnessnumber
Maximum exit feather width as a fraction of the shorter composition dimension, clamped to 0.02–0.3. Also capped at 12% of the current opening radius to keep the scene inside the exit.
Default0.12
timeOffsetnumber
Initial shader time in seconds.
Default0

Rendering

WebGL2 renders the opaque spiral, and a radial mask on the incoming React scene confines it to the central exit. The mask stays in screen space while the scene scales inside it. Its narrow feather lies inside the opening, so text cannot show through the surrounding ribbons. The exit opens during the final 36% of the transition. Scenes remain ordinary HTML layers; no screenshots, HTML capture or network textures are needed. The outgoing scene is exchanged only after the shader fully covers it. The exit expands beyond the diagonal of the composition, leaving no shader residue at the end in landscape or portrait.

Time and camera movement derive from transition progress and duration. Seeking reproduces the same frame. GPU resources are disposed when the presentation ends; WebGL allocation and compilation failures produce explicit render errors.