gamma logo

1

Plasma

PreviousNext

A mesmerizing plasma shader animation rendered with WebGL, perfect for dynamic backgrounds and previews.

Installation

pnpm dlx shadcn@latest add @gammaui/plasma

The Plasma component renders an animated shader background using WebGL. It dynamically adapts to the size of its container — making it perfect for embeds, hero sections, or preview boxes.

Props

PropTypeDefaultDescription
(none)——The Plasma component currently takes no props. It automatically fits its parent container and adapts to resizing.

Example Variants

Fullscreen Background

<div className="fixed inset-0">
  <Plasma />
</div>

Features

  • ⚡ WebGL Shader Animation — Smooth GPU-accelerated rendering with fluid plasma motion.
  • 📏 Responsive & Contained — Scales to any container using ResizeObserver.
  • 🎨 Customizable Colors (via Shader) — Easily adjustable color palette in the GLSL fragment code.
  • 🧩 Lightweight — No external libraries, pure WebGL and React.
  • 🌑 Dark Mode Friendly — Looks beautiful in both light and dark environments.

Tips

  • Use the component inside a container (e.g. div with a fixed height) — it auto-fills the available space.
  • You can tweak the shader’s bgColor1, bgColor2, or lineColor inside the fragment shader for unique looks.
  • Great for hero sections, component previews, or subtle animated backdrops.