Plasma
Free
A flowing plasma color field that the pointer warps like a lens.
Feel the heat
Move over the field to look through the lens
Customize
#ff784f
1
1
1
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/plasma.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/plasma.tsx.
Usage
import { Plasma } from "@/components/ui/plasma";
<section className="relative h-[600px]">
<Plasma colors={["#ff784f", "#ffc24a", "#e2552b"]} opacity={0.8} />
</section>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | ["#ff784f", "#ffc24a", "#e2552b"] | Three hex colors the field cycles through. |
| speed | number | 1 | Flow speed multiplier. |
| scale | number | 1 | Size of the plasma cells. Larger values make broader shapes. |
| opacity | number | 1 | Overall opacity, from 0 to 1. |
| lens | number | 0.7 | Strength of the lens that follows the pointer, from 0 to 1. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion