Portal Background for React

Rings fly out of a vanishing point toward you, growing, thickening and brightening as they get close and turning a little on the way, so the screen reads as a tunnel with a soft light at its far end. The rings are rounded three-lobed loops in one still SVG drawing, laid over a blurred copy of themselves so they glow; CSS keyframes zoom the whole drawing by one ring and start over, so each ring takes the place of the next. They're cyan, indigo and violet unless you pass your own colours: deeper with slightly heavier lines on a light page, brighter and richer on a dark one.

Use it for launches, game intros, onboarding steps and sci-fi heroes. For a tunnel of streaking beams, use Warp; for flying through stars, Starfield; for rings that turn in place, Circles.

Installation

Usage

import { Portal } from "@/components/ui/portal";

The tunnel sits behind whatever you put inside, its vanishing point at the centre of the container. Give the container a height; for the whole page, className="fixed inset-0 -z-10" with no children.

<Portal className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Step through</h1>
</Portal>

Demos

Colors

colors={["var(--primary)", "var(--muted-foreground)"]} builds the tunnel from your theme's own colours, cycled ring by ring; the light at the far end mixes the first two.

Twist

A slow spiral: twist={0.8} turns each ring most of a lobe on its way, speed={0.5} halves the pace and count={20} packs the rings closer.

Accessibility

The tunnel is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion the tunnel stands still, with rings at every depth. Nothing flashes. The rings fade to almost nothing toward the vanishing point and the light there is at most a quarter of the colour, so a centred headline in your foreground colour reads well, while the brightest rings pass near the edges.

FAQ

API Reference