fragms
Studio

A glow on the inside edge of a shape, moving with a voice. Wrap an element, use it bare, or lay it over the whole screen.

Demo voice

NeedsReactTheme

Source
curl --create-dirs -o src/components/aura.tsx https://fragms.simonveprek.cz/source/aura -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme

Saves src/components/aura.tsx and theme.tsx beside it. No setup, works in any React project.

import { Aura, demoLevel } from "@/components/aura";export function Example() {  return (    <Aura level={demoLevel} className="rounded-[46px]">      <Screen />    </Aura>  );}
level

How loud the voice is. The glow swells with it. Pass a function to have it read every frame.

0 to 1() => numberDefault 0
palette

The colours that travel round the edge. Four of your own work too.

auroraoceanembermono[a, b, c, d]
intensity

How far the glow reaches into the shape.

0.411.8
speed

How fast the colours travel. 0 holds them still.

013
radius

Corner radius in pixels. Left out, it follows the element it wraps.

numberDefault the wrapper's own
fixed

Lays the glow over the whole screen. Clicks pass through.

truefalse
// Around any element. It picks up the corner radius for you<Aura level={level} className="rounded-3xl">  <Card /></Aura>// As a shape of its own, in four colours of your choosing<Aura  level={0.4}  palette={["#00e0ff", "#0066ff", "#7a5cff", "#00ffa3"]}  className="size-40 rounded-full"/>// Across the whole screen, above everything. Clicks pass through<Aura fixed level={level} />

What's new

  1. 2.0
    • Takes its glow and pace from the Theme when it has none of its own
  2. 1.0
    • First release
NextPoints