BACK TO WORK 6 EXPERIMENTS

SRATZEL.DEV // LAB

THE
LAB

Live Experiments // No Write-Ups // Just Toys

Things that are too much fun to bury inside a project page. Everything here runs live in your browser. Some of it needs a Chromium browser, all of it is honest about that.

LAB_01NEW

Glass_Lab

ENTER [→]

Five liquid glass experiments on one CSS layer stack: a lens that follows your cursor, glass over real scrolling text, a stitched seam, a theme-aware modal and the chromatic aberration variant that was too expensive to ship.

#CSS#SVG#backdrop-filter#Chromium
LAB_02NEW

Dialect_Morpher

ENTER [→]

Eleven complete design systems from the Dialect UI project, interpolated live. Colors and radii blend, fonts snap at the midpoint. Drag the slider and watch Swiss melt into Y2K.

#DesignTokens#CSS#EveryBrowser
LAB_03NEW

Side_Rays

ENTER [→]

Volumetric light rays as a WebGL fragment shader, ported from React Bits to Vue and OGL. Every uniform on a live control: colors, spread, tilt, falloff, origin corner. Copy the whole component when you are done playing.

#WebGL#OGL#Shader#Vue
LAB_04NEW

Lightning

ENTER [→]

The React Bits Lightning shader ported to Vue: fbm noise bends a line into a bolt and paints the fog around it. Strike mode makes it flash briefly at random intervals, and every strike jumps the shader time, so no two bolts are alike.

#WebGL#Shader#fbm#Vue
LAB_05NEW

Lanyard

ENTER [→]

A physics ID badge you can grab and throw: the React Bits Lanyard rebuilt without the physics engine or the GLB. A hand-rolled verlet rope, and the card is drawn live on a canvas in this site's own design.

#Three#Verlet#Physics#Vue
LAB_06NEW

Particle_Morph

ENTER [→]

150,000 GPU particles in one draw call, forming words, a portrait and whatever you type into them. No simulation: the whole flight is stateless choreography in the vertex shader. Cursor repulsion included, every knob live.

#WebGL#OGL#Particles#Vue