aurav0.1

Thirty elements. One line each.

Raymarched orbs, liquid metal, holo foil, caustics, real glass refraction. WebGL, zero dependencies, MIT. Drop a tag in, it works in React, Vue, Svelte, Astro or plain HTML.

Browse all 30 Source on GitHub
30 elements 1 shared GL context 0 dependencies 14 kB gzipped

Install

Nothing to configure. The tag registers itself.

<!-- CDN: one file, no build step --> <script src="https://aura.bles-software.com/aura.min.js"></script> <aura-fx effect="plasma-orb" size="120"></aura-fx>
# or from the repo, then import once anywhere in your app npm install github:stas4000/aura-fx import 'aura-fx'; // registers <aura-fx> and <aura-text> import { AuraFX } from 'aura-fx/react'; // React 18 wrapper (React 19 needs no wrapper)

All 30 elements

Every tile below is live WebGL, not a video. Click one to open the playground.

Playground

plasma-orb

Why it is built this way

Three decisions you would otherwise hit later.

One GL context, thirty elements

Browsers cap live WebGL contexts at around 16. A page of components blows past that and starts killing the oldest ones. aura renders every instance through a single shared context and blits, so the page above works with all 30 running at once.

Off-screen means off

Each element watches itself with an IntersectionObserver. Scroll it out of view and it stops costing you a frame. Device pixel ratio is capped at 2, because nobody can see the fourth sample on an orb.

Respects the system

prefers-reduced-motion freezes every effect on a composed still frame instead of disabling it. Text effects stay real text: selectable, searchable, readable by a screen reader. No WebGL2 gets a CSS gradient, not an empty box.

Copied