Glow

Bloom around a shape: a soft breathing halo, neon that cools instead of cutting off, a spectrum flowing round the border, or text bloom from a mask.

Generate

StyleColourHot coreThirdRadius14.0Intensity1.00Inner0.00Occlusion0.15Breathe0.60Breathe period2.60Heat1.00Hot0.60Aura speed0.12Rim width0.60Reach4.50

<Fx effect="glow" preset="Soft" />

Features

Soft, neon, aura (a spectrum flowing round the border) and mask (text bloom) styles.
Heat: neon cools and deepens instead of switching off.
Breathing on a continuous phase, so speed changes never jump.

Projects: each cardAttention as heat: a card warms while you look at it and cools, never cuts off, when you leave.
Home: Get in touchAn invitation breathes; it does not blink.

Get runets.

git clone https://github.com/ziyam-khan/runets

import { Fx } from 'runets'

<div className="card"> {/* position: relative */}
  <Fx effect="glow" />
</div>

Prop	Type	What it does
`effect`	`string`	The effect’s id, as in the address of this page.
`preset`	`string`	One of the presets above; the first by default.
`params`	`Params`	Any parameter from the table, over the preset.
`place`	`'under' \| 'over'`	Under the parent’s content (fills, halos) or over it (sparkles, glass). Default under.
`radius`	`number`	Corner radius in points; the parent’s own border radius by default.
`backdrop`	`string \| Paint`	What glass and distortion read: an image URL, or a function that paints a canvas the size of the parent.
`mask`	`Paint`	An alpha mask for mask glow and text sheen.
`hot`	`boolean`	Drives heat: the layer lights in 60 ms and cools over half a second instead of cutting off.
`trigger`	`number`	Change it to fire a one-shot now (ping, ripple, burst, shockwave, zap).
`wake`	`number`	Change it to redraw for a second when something the layer reads, such as its occluders, moves on its own.
`shape`	`(time, w, h) => Rect`	The effect’s shape inside the parent, per frame: a lens that drifts.

Name	Range	Default
`style` Style	soft, neon, aura	`soft`
`color` Colour	color	`0x7c5cff`
`core` Hot core	color	`0xf4f0ff`
`third` Third	color	`0x22d3ee`
`radius` Radius	1 to 64	`14`
`intensity` Intensity	0 to 3	`1`
`inner` Inner	0 to 1	`0`
`occlusion` Occlusion	0 to 1	`0.15`
`breathe` Breathe	0 to 1	`0.6`
`breathePeriod` Breathe period	0.4 to 8	`2.6`
`heat` Heat	0 to 1	`1`
`hot` Hot	0 to 1	`0.6`
`auraSpeed` Aura speed	0 to 1	`0.12`
`rimWidth` Rim width	0.2 to 3	`0.6`
`reach` Reach	2 to 8	`4.5`

The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus.
Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling.
Off screen, in a hidden tab or once settled, the layer draws nothing.
data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed.

The code is in src/fx/glsl/emit.ts in runets, MIT licensed.