.Awesome-CSS-Houdini { }

A curated list of CSS Houdini resources.

🤔 Is Houdini ready yet‽

The first question that we do when we view a new technology, thanks to Surma we have a great table to see the status of APIs and the browsers support.

Is Houdini ready yet‽

Is Houdini ready yet‽


📚 Documentation


📦 Libraries

LibraryDescription
Extra.CSSA CSS Houdini library for making your site a little more #extra.

📖 Articles

NameAPIs
CSS HoudiniWorklets Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API
Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard OfWorklets Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API Parser API
Houdini: Demystifying CSSWorklets Paint API Layout API Typed OM Custom Properties & Values API Font metrics
Say hello to Houdini and the CSS Paint APIPaint API
What Houdini Means for Animating TransformsAnimation Worklet
Working with the new CSS Typed Object ModelTyped OM
New ways to make your web app jank with Houdini – An introductionWorklets Typed OM Custom Properties & Values API Paint API Layout API Font metrics Compositor Worklet
Exploring the CSS Paint APIPaint API Custom Properties & Values API
Simple Interactive Pie Chart with CSS Variables and Houdini MagicCustom Properties & Values API
Houdini is like Babel but for CSSTyped OM Custom Properties & Values API Paint API Animation Worklet Layout API Parser API
A Houdini Quickstart: registerPropertyCustom Properties & Values API
CSS Paint in Action: Bar ChartPaint API Custom Properties & Values API
The CSS Paint APIPaint API
CSS Paint APIPaint API
Houdini's Animation WorkletAnimation Worklet
New horizons in CSS: Houdini and the Paint APIPaint API
CSS Custom Properties in DepthCustom Properties & Values API
A Practical Overview Of CSS HoudiniWorklets Paint API Layout API Typed OM Custom Properties & Values API Font metrics

🎙 Podcasts

PodcastSpeaker
Houdini ReloadedUna & Chris Dhanaraj
Modern Web PodcastSurma, Aimee Knight, Vitalii Bobrov

💻 Samples

SamplesAPIs
CSS Houdini 🤩Worklets Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API
CSS Houdini Experiments 🤩Custom Properties & Values API Paint API Layout API
Houdini Samples (Google Chrome Labs)Custom Properties & Values API Paint API Animation Worklet Layout API
Houdini's CSS Paint PolyfillPaint API
Using Houdini CSS Paint API with Rough.jsPaint API
Ana Tudor's Houdini samplesCustom Properties & Values API Paint API Animation Worklet
KarstenBuckstegge's houdini-experimentsPaint API
AndresCuervo's css-houdini-experimentsPaint API
Hello HoudiniPaint API
extra.cssPaint API
CSS Houdini experimentsPaint API
Jeffsum cloneCustom Properties & Values API
CSS Paint DemosPaint API

📺 Talks

TalkConference | ChannelSpeaker
Houdini: Demystifying the Future of CSSGoogle I/O 2016Surma
Houdini Task ForceBlinkOn 5 2016Ian Kilpatrick
Houdini and the Future of WebBlinkOn 6 2016
Polyfills & Houdini | Browser API SpecialCSS Day 2017Phil Walton
The Future of CSS: CSS HoudiniCSS Day 2017Tab Atkins
CSS Houdini - from CSS variables to JavaScript and backNDC Conferences 2017Serg Hospodarets
Houdini, the Future of CSSDrupalCon Vienna 2017Chris Ruppel
Animation WorkletHTTP203 AdventSurma
CSS Houdini: From CSS Custom Properties to JavaScript Worklets and backVoxxed Days Thessaloniki 2018Serg Hospodarets
Magic tricks with HoudiniCSSConf Australia 2018Sam Richard
Houdini the new CSS MagicJSUnconf 2018Karsten Buckstegge
Houdini - What lies aheadJSConf Iceland 2018Arun Michael Dsouza
State of HoudiniChrome Dev Summit 2018Surma
How to Be #Extra with CSS HoudiniYou Gotta Love Frontend 2019Una Kravetz
CSS Houdini & The Future of StylingJSConf EU 2019Una Kravetz
Design System Magic with CSS HoudiniCSSconf EU 2019Sam Richard
When Houdini Met GoldblumCSS Camp 2019Oliver Turner

📺 Video Tutorials

VideoAuthor
Animate gradient components independently with CSS vars & Houdini magicAna Tudor
Möbius beacons with CSS transforms, variables and Houdini magicAna Tudor
Cube rings with CSS variables & Houdini magicAna Tudor
Neon trails on torus with CSS variables & Houdini magicAna Tudor
moon grid with clip-path, CSS variables & Houdini magicAna Tudor
Rainbow bar spinner with CSS vars & Houdini magicAna Tudor
Pointless 🌈 stairs with CSS variables & Houdini magicAna Tudor
Temperature display change: conic-gradient, CSS vars, Houdini magicAna Tudor
CSS Painting and Custom PropertiesNate Jacobs
Creating a Custom CSS Houdini Paintlet!Coursetro

📄 Slides


🗣 People that talk about CSS Houdini