// live demo

Paint Worklet

The entire background behind this text is drawn by CSS itself. A CSS.paintWorklet module registers a registerPaint('flow') class that traces a flow-field through procedural noise. Three animatable custom properties — declared with @property and animated by a CSS keyframe — repaint the worklet every frame. No <canvas>, no requestAnimationFrame, no JS render loop.

• CSS Houdini
• CSS Paint API
• @property
• Worklet (plain JS)

Drag the sliders. The painted background repaints live.

Heads up: your browser doesn’t support the CSS Paint API (Houdini), so you’re seeing a layered-gradient fallback instead of the live flow-field. The worklet runs in Chromium-based browsers (Chrome, Edge, Arc, Opera).