Docs·Closing Plasma

Closing Plasma

A premium footer-ready plasma background with atmospheric noise and smooth pointer-driven flow.

Installation

pnpm dlx shadcn@latest add @componentry/closing-plasma

Usage

import { ClosingPlasma } from "@/components/ui/closing-plasma"

<div className="w-full h-screen">
  <ClosingPlasma
    speed={1}
  />
</div>

API Reference

Property	Type	Default
`speed` Animation speed multiplier.	`number`	`1`
`turbulence` Amount of layered FBM deformation.	`number`	`1`
`mouseInfluence` Strength of pointer distortion.	`number`	`1`
`grain` Procedural grain intensity.	`number`	`1`
`sparkle` Sparkle highlight intensity.	`number`	`1`
`vignette` Edge falloff intensity.	`number`	`1`
`opacity` Final alpha of the plasma output.	`number`	`1`
`interactive` Enables pointer interaction and drift response.	`boolean`	`true`
`darkColorA` Dark palette base tone.	`string`	`"#0d0d14"`
`darkColorB` Dark palette mid tone.	`string`	`"#1f2540"`
`darkColorC` Dark palette highlight tone.	`string`	`"#4a6191"`
`lightColorA` Light palette base tone.	`string`	`"#f0f2f7"`
`lightColorB` Light palette mid tone.	`string`	`"#d7dceb"`
`lightColorC` Light palette highlight tone.	`string`	`"#bcc5e0"`
`children` Optional overlay content rendered above the plasma layer.	`ReactNode`	—
`className` Additional CSS classes for the root container.	`string`	—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X