Playground
Tune all three effects live, copy the exact JSX, and share the URL — the current configuration is encoded in the link.
— fpstick —
JSX
import { Ethereal } from 'ethereal-glow'
<button className="relative isolate">
<span className="relative z-10">…</span>
<Ethereal
themes={{
dark: {
colors: ["rgb(255,50,100)", "rgb(40,180,220)", "rgb(50,200,80)", "rgb(180,40,240)", "rgb(255,160,30)", "rgb(100,70,255)", "rgb(40,140,255)", "rgb(240,50,180)", "rgb(30,185,170)"],
glowBlur: 14,
strokeOpacity: 1.14,
innerOpacity: 0.7,
bloomOpacity: 0.8,
strength: 1,
saturation: 1,
brightness: 1,
},
}}
colors={["rgb(158,8,45)", "rgb(0,101,130)", "rgb(14,123,35)", "rgb(99,0,143)", "rgb(155,86,0)", "rgb(43,21,156)", "rgb(0,72,155)", "rgb(142,4,98)", "rgb(0,108,97)"]}
path="around"
place="both"
hover="boost-speed"
duration={8}
spotW={120}
spotH={72}
trail={1.5}
trailFade={0.55}
spotBlur={3}
hotspots={2}
hotSpread={28}
wander={0.12}
needles={10}
glowBlur={8.4}
strokeOpacity={1.42}
innerOpacity={0.49}
bloomOpacity={0.88}
strength={1.25}
saturation={1.3}
brightness={0.8}
/>
</button>preset
States
palette
tone