Warp Background

CSS 3D perspective folds four grid walls into a tunnel, and beams fly along those walls into the distance for a warp-speed effect. Pure CSS transforms and keyframes, with no WebGL dependency.

Warp Background is a React warp speed tunnel grid background built with Tailwind CSS. The beams are animated entirely with CSS 3D transforms and @keyframes, with Motion used only to detect reduced motion, and the four walls are sized with container query units (cqw/cqh) so they follow the card size without recalculation.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<WarpBackground/>

    </div>
  );
}

When to use

• CTA cards for product launches or release announcements
• Feature sections about speed or deployment on developer tool and AI product home pages
• Key visual cards for event sign-ups or countdown pages
• Empty states or waiting screens that would otherwise look bare

Installation

npx webberui@latest add https://webberui.com/r/warp-background.en.json

Usage

import { WarpBackground } from "@/components/ui/warp-background";

<WarpBackground className="p-10">
  <h3 className="text-2xl font-semibold">Through the warp</h3>
</WarpBackground>

The container needs explicit dimensions: set the height and padding through className (for example h-[320px] max-w-md p-10), and put the layout that centers the foreground content on className too.

Examples

Centered CTA card

Put the centered layout in className; with beamHue fixed, every beam shares one hue.

<WarpBackground
  beamHue={210}
  className="flex h-[360px] max-w-xl items-center justify-center p-10 text-center"
>
  <div>
    <h3 className="text-2xl font-semibold">Deploys in 30 seconds</h3>
    <p className="mt-2 text-neutral-500">Connect a Git repository and every push builds and ships.</p>
  </div>
</WarpBackground>

Stronger warp and denser beams

A smaller perspective exaggerates the depth; beamsPerSide adds beams per wall, and a shorter beamDuration makes them fly faster.

<WarpBackground
  perspective={60}
  beamsPerSide={5}
  beamSize={4}
  beamDuration={2}
  beamDelayMax={2}
  className="h-80 p-10"
>
  {/* foreground content */}
</WarpBackground>

beamSize sets both the grid cell size and the beam width, as a percentage of the container.

Full-bleed dark section

The container defaults to rounded corners, a border and a light background. className is merged with cn, so you can turn it into a full-bleed dark section and brighten the grid lines.

<WarpBackground
  gridColor="rgba(255,255,255,0.12)"
  className="h-[480px] rounded-none border-0 bg-neutral-950 px-6 py-20 text-white"
>
  {/* foreground content */}
</WarpBackground>

Props

Accessibility

• When the user has "reduce motion" enabled at the system level, only the static perspective grid is kept and the beams do not fly
• The background layer carries aria-hidden and pointer-events-none, so it interferes with neither foreground interaction nor announcement
• Because the beams use random hues, they only render after the client has mounted, avoiding an SSR hydration mismatch

FAQ

Does it need WebGL or canvas?

No. The grid is a CSS gradient background, the tunnel is four walls folded with 3D transforms, and the beams are CSS @keyframes animations. The only dependencies are motion (for reduced-motion detection), clsx and tailwind-merge.

Does it work with the Next.js App Router? Any hydration issues?

It works; the file already starts with "use client". Beam positions, delays and hues are random, so beams only render after the component mounts on the client. The server and the first render output just the static grid, so there is no hydration mismatch.

How should I size the container?

Give it an explicit height in className, such as h-80 or h-[360px]. The walls are sized in container query units relative to the container, so without a height the tunnel is only as tall as the foreground content.

How do I change the colours?

gridColor sets the grid line colour and beamHue fixes the beam hue (0–360); without it, each beam picks a random hue. Override the container background and border in className.

Does it respect reduced motion?

Yes. With "reduce motion" on, only the static perspective grid is shown and no flying beams are rendered.