Magic Tricks with Houdini

on YouTube ↗27m

" summary

Houdini claims to let JavaScript extend the CSS engine via worklets and typed OM so custom properties become typed and animatable, paint worklets draw backgrounds/borders at render speed, and animation worklets run scroll-driven parallax off the main thread. Examples: CSS.registerProperty makes gradients transition smoothly, a paint worklet draws scalable borders, and a masonry layout is implemented in masonry in 50 lines. APIs remain early and unstable with API-incompatible changes still landing.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 0:45What is Houdini
3. 1:23Can we do this already
4. 2:05Can we use Houdini
5. 3:15Worklets
6. 5:40Typed om
7. 7:24Custom properties
8. 11:03Paint API
9. 14:43Animation API
10. 18:10Layout API
11. 20:21Layout Child

" related talks

• 31mMagic tricks with HoudiniSamuel Richard · CSSConf AU 2018
• 36mMagic Tricks with CSS HoudiniSamuel Richard · Full Stack Fest 2017
• 39mMagic Tricks with CSS HoudiniSamuel Richard · ColdFront 2017
• 48mHoudini - New Era of CSSVidit Anjaria, Saket Kumar · DrupalCon Amsterdam 2019
• 42mHow to Be #Extra with CSS HoudiniUna Kravetz · YGLF 2019: Code Camp
• 46mGetting extra with CSS HoudiniUna Kravets · Frontend United 2019
• 27mDesign System Magic with CSS HoudiniSamuel Richard · CSSConf EU 2019
• 26mHoudini Tricks: Magic in the Future of CSSMassimo Artizzu · CSS Day 2019