CSS Houdini & Paint API
CSS Houdini & Paint API — Explore CSS Houdini — Paint Worklets, Typed OM, Properties and Values API for extending CSS capabilities. The guide walks through What is Houdini?, Paint Worklet Basics, Typed OM (Object Model). CSS Houdini is a set of APIs that give developers direct access to the browser's CSS rendering engine. It includes: Paint API (custom paint worklets), Layout API (custom layouts), Typed OM (typed CSS values), Properties & Values API (registered custom properties with types), Animation Worklet (scroll-linked animations). Houdini enables polyfilling CSS features without performance penalties. Create a custom paint worklet: registerPaint("my-pattern", class { paint(ctx, geom, properties) { /* drawing code */ } }). Load the worklet: CSS.paintWorklet.addModule("paint-worklet.js"). Use in CSS: background-image: paint(my-pattern). The paint method receives a CanvasRenderingContext2D, geometry dimensions, and custom properties. Supports animate for time-based effects. The guide is organized into 3 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is.