01
The silk
Domain-warped fbm value noise — five octaves folded twice — rendered on a
single full-screen triangle. Capped at 0.66 DPR and
1.2 MP so it stays cool and quiet.
aurora
AURORA
WebGL silk·wordmark template
ScrollOverview
Three quiet systems,
one surface.
Aurora is a single HTML file — no framework, no build step, no dependencies. A hand-written fragment shader weaves the silk, a variable font breathes through the wordmark, and one soft light binds them to your cursor.
02
The wordmark
Fraunces, per-letter, driven through font-variation-settings. Letters
swell toward the pointer and settle into a slow breathing wave when nobody is
looking.
03
The light
A cool aurora bloom that follows the cursor and drags the silk with it. On touch, the finger is the cursor; left alone, the light tours the page on its own waypoints.
Specimens
One axis,
nine hundred voices.
The wordmark effect is nothing more than a weight axis moved with intent. Drag the slider to feel the range the cursor plays across.
Aurora140
Aurora340
Aurora560 italic
Aurora780
Shader palette
#04070a
#123b33
#1d5a4e
#2a1b52
#e6f3ef
About
Small on purpose.
Aurora is a template for pages that want presence without weight — a product teaser, a studio front door, a release page. Everything ships in one file you can read top to bottom: the markup, the styles, the shader, and the little machine that drives them.
It degrades the way good pages should. No WebGL? The silk steps aside and the typography carries the room. Reduced motion requested? Every animation stops and the page stands still, fully legible. The tab goes hidden? The render loop sleeps. If the GPU drops the context, the page recovers or quietly lets the background go.
Take it, rename the wordmark, retint the silk. The palette lives in five CSS variables and three shader constants.
- Files
- one
- Dependencies
- none
- Framework
- none
- Fonts
- Fraunces & Inter
- Render cap
- 1.2 megapixels
- Reduced motion
- fully static