FX · Backgrounds

WarpTunnel

Rounded frames rushing toward the viewer, like flying down a tunnel.

Engage

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/warp-tunnel.json

Usage

React
import WarpTunnel from "@/components/fx/warp-tunnel"

const [paused, setPaused] = useState(false)

<WarpTunnel paused={paused}>
    <button aria-pressed={paused} onClick={() => setPaused(p => !p)}>
        {paused ? "Play" : "Pause"} background
    </button>
</WarpTunnel>

Accessibility contract

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Zooming motion is a strong vestibular trigger: keep `speed` slow and give users a visible pause control.
Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the tunnel as still, nested frames.

API Documentation

Prop	Type	Default	Description
color	string	violet, 60%	Frame colour.
rings	number	10	Frames in flight.
speed	number	6	Seconds for a frame to reach you.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.