Serein

[00]

Abstract

Serein is an open-source browser studio for animated WebGL hero backgrounds. Pick a hand-written GLSL preset, shape it with palettes and motion controls, flip on Hero Mode for real typography — then export the whole thing as a single self-contained file, around 4kb, with zero dependencies and no attribution.

[01]

Problem

Every tool in this space has the same catch: design a background in their editor, then load their runtime script on your site forever — or install their package plus ~150kb of three.js. The thing you ship should be yours.

[02]

Solution

Serein renders every preset as a hand-written GLSL fragment shader on raw WebGL2 — no three.js — which is exactly what makes the tiny export possible. The editor runs entirely in the browser with no backend: every design serialises into the URL, so the address bar is the save file. Exports come as React, vanilla JS or raw GLSL, with adaptive quality that steps down below 30fps, context-loss recovery, and a prefers-reduced-motion fallback baked in.

[03]

Outcome

A single pasted file replaces a runtime SDK: ~4kb, dependency-free, owned outright — no account, no watermark, no strings. Open source under MIT and live to try in the browser.

[04]

Capabilities