State of Houdini
summary
Demos show concrete APIs not marketing: a CSS Paint worklet draws a responsive pink circle as a background image with auto‑repaint, automatic sizing and off‑main‑thread execution for better low‑end performance; an Animation Worklets example runs time mapping on the compositor for frame‑perfect scroll‑linked and bounce timing and is entering a Chrome 71 origin trial; an early Custom Layout API implements masonry and randomized layouts during the browser layout phase though the spec and implementation are still volatile.
AI-written summary · about
chapters (29)
- 0:00Intro
- 0:28What is Houdini
- 2:23Houdini API Structure
- 2:57Houdini Worklets
- 5:40CSS Paint
- 9:16Paint Demo
- 10:37Main Thread
- 11:02No DOM Overhead
- 12:07Performance Primitives
- 12:36Dependencies
- 13:09Clock
- 14:22CSSPaint
- 15:14Three Picks
- 15:43Brick Emoji
- 16:04Animation Worklet
- 16:33Web Animations
- 17:27Animation API
- 17:56Animation callback
- 19:46Bounce graph
- 20:13Document timeline
- 20:42Scroll linked effects
- 21:23Scroll snap points
- 22:01Three Picks API
- 22:49Layout API
- 23:34Layout callback
- 23:58Random Offset
- 24:11Browser Layout
- 24:39Masonry Layout
- 25:40Houdini Ready Yet
