A premium footer-ready plasma background with atmospheric noise and smooth pointer-driven flow.
| Prop | Type | Default |
|---|---|---|
speedAnimation speed multiplier. | number | 1 |
turbulenceAmount of layered FBM deformation. | number | 1 |
mouseInfluenceStrength of pointer distortion. | number | 1 |
grainProcedural grain intensity. | number | 1 |
sparkleSparkle highlight intensity. | number | 1 |
vignetteEdge falloff intensity. | number | 1 |
opacityFinal alpha of the plasma output. | number | 1 |
interactiveEnables pointer interaction and drift response. | boolean | true |
darkColorADark palette base tone. | string | "#0d0d14" |
darkColorBDark palette mid tone. | string | "#1f2540" |
darkColorCDark palette highlight tone. | string | "#4a6191" |
lightColorALight palette base tone. | string | "#f0f2f7" |
lightColorBLight palette mid tone. | string | "#d7dceb" |
lightColorCLight palette highlight tone. | string | "#bcc5e0" |
childrenOptional overlay content rendered above the plasma layer. | ReactNode | — |
classNameAdditional CSS classes for the root container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { ClosingPlasma } from "@/components/ui/closing-plasma"
<div className="w-full h-screen">
<ClosingPlasma
speed={1}
/>
</div>