SRATZEL.DEV // LAB

THE
LAB

Live-Experimente // Keine Write-ups // Nur Spielereien

Dinge, die zu viel Spaß machen, um sie in einer Projektseite zu vergraben. Alles hier läuft live in deinem Browser. Einiges davon braucht einen Chromium-Browser und sagt dir das auch ehrlich.

LAB_01EMPFOHLEN

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_02

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_03

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_04

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_05

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_06

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
LAB_07

The_Oasis

ENTER [→]

A cubic ocean to calm down in: a sailboat on a caustic water surface, kelp and fish below, clouds above. Modeled in Spline and fully self-hosted, the scene never calls home. Drag to orbit.

#Spline#3D#SelfHosted
LAB_08EMPFOHLEN

Beach_Sunset

ENTER [→]

A stylized beach with a real wave shader: toon water, a tide that comes and goes, palms in the wind. Pick from four weathers, drag the sun across the sky, or sync time and weather to your real sky. Built in Blender, rendered in three.js.

#Three#GLSL#Blender#3D