Shockwave

A ring of displaced light expanding from a point, with a little chromatic split on its front. A one-shot.

Reach160Width14.0Amount9.0Chroma0.35Duration0.90

<Fx effect="shockwave" />

Features

Get runets.

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

import { Fx } from 'runets'

<div className="card"> {/* position: relative */}
  <Fx effect="shockwave" />
</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.

Reads a backdrop: an image or a painted canvas given to the layer, refracted or sampled per pixel.

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/surface.ts in runets, MIT licensed.