Plasma Rift

Cyan and emerald plasma ribbons fold into a dark, flowing vortex.

Cyan, white, and emerald ribbons fold into a dark vortex inspired by luminous plasma. Move the pointer to shift the vanishing point.

Plasma Rift is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the plasma-rift-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/plasma-rift-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { PlasmaRiftBackground } from "@/components/hangry-ui/shader/plasma-rift-background";

<PlasmaRiftBackground speed={0.2} intensity={0.9}
  className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">Through the rift.</h2>
</PlasmaRiftBackground>

Props

Prop	Type	Default	Description
`speed`	`number`	`0.2`	Nonnegative animation speed. Set 0 to freeze the ambient flow.
`intensity`	`number`	`0.9`	Color brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Bend and brighten the color field near the pointer.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu