Prism flow

A dark background crossed by a soft band of light that bends and drifts, its edges splitting into colour like light through a prism. It leans toward your pointer; put anything on top.

Backgrounds, hover, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/prism-flow.tsx https://motion-brew.com/r/prism-flow.tsx

One self contained file for React and Tailwind CSS: prism-flow.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PrismFlow } from "@/components/prism-flow";

export default function Hero() {
  return (
    <PrismFlow className="h-dvh">
      <h1 className="absolute inset-0 grid place-items-center text-[48px] font-semibold text-white">
        Light, bent
      </h1>
    </PrismFlow>
  );
}

Props

Prop	Type	Default	Description
colors	[string, string, string, string]	an ember ramp	Edge to edge across the band
background	string	"#050507"	What the light sits on
speed	number	2.7	Drift speed, 0 to 5
width	number	2.75	Band width, 0.2 to 5
spread	number	1.45	How far the colours fan out, 0 to 4
warp	number	1	How much the band curls, 0 to 2.5
intensity	number	2.25	Brightness, 0.2 to 4
grain	number	1.75	Film grain, 0 to 2.5
echo	boolean	true	The fainter trailing band
interactive	boolean	true	Lean toward the pointer
children	ReactNode		On top
className	string		Size it; minimum height 320px

More backgrounds

Spatial gallery: A WebGL media tunnel of images and videos that never ends: scroll or drag to travel, and the ring twists into a turning spiral as you go.
Pixel blast: A background of dithered pixel clouds that drift, shimmer and light up under the cursor.
Contour lines: A background of live topographic lines that bend around the cursor.
Pixel scroll: A scroll-driven pixel transition from one color or image to another, with directions, patterns, easings and accent pixels in the moving band.

All animated react backgrounds and shaders