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