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

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

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