Magic tricks with Houdini

on YouTube ↗31m

" summary

Claims that Houdini lets JavaScript extend browser render engines at render‑engine speed, with concrete pieces: worklets that run on parallel threads, the Typed OM for structured CSS values, CSS.paintWorklet to draw scalable canvas backgrounds and masks, and the layout API to author custom display algorithms. Demonstrations include transitioning registered custom properties as colors, off‑main‑thread scroll‑driven animations, and a Blink implementation of a masonry layout that works, but current support is Chrome Canary only and APIs are frequently breaking.

AI-written summary · about

" chapters (6)

1. 0:00Intro
2. 8:43Custom Properties
3. 16:56CSS Animation API
4. 17:08Animation Worklet
5. 21:21CSS Layout API
6. 29:20CSS Masonry Layout

" related talks

• 27mMagic Tricks with HoudiniSamuel Richard · Nordic.js 2018
• 36mMagic Tricks with CSS HoudiniSamuel Richard · Full Stack Fest 2017
• 39mMagic Tricks with CSS HoudiniSamuel Richard · ColdFront 2017
• 25mHoudini - how you too can write a browser redndering engine!Naina Raisinghani · DinosaurJS 2018
• 26mHoudini Tricks: Magic in the Future of CSSMassimo Artizzu · CSS Day 2019
• 36mHoudini — CSS That Is JavaScriptNikita Dubko · OdessaJS 2018
• 22mCSS HoudiniNegar Jamalifard · JSWorld Conference 2022
• 27mState of HoudiniSurma · Chrome Dev Summit 2018