A rather geeky/technical weblog, est. 2001, by Bramus
The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs
Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel so futuristic and appealing? Can we build some of these with the web technologies we have today?
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow.
See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen.
Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.
It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started
If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial.
One of the side-effects when drawing things with a Houdini Paint Worklet and relying on Math.random() in your code, is that your layout might be jumpy.
Check out my CSS Houdini Paint Worklet that draws colorful circles for example: whenever you resize the available space or change one of its properties — or some of the other CSS properties — the circles are being drawn, at random places with random colors.
Sometimes this side-effect is unwanted: say you have a Paint Worklet that draws some random lines underneath an element. If you were to animate the --line-width on hover you don’t want it to draw different lines, but you want to keep the same lines in place, and only adjust their width.
To solve around this, Jake Archibald shows us how to implement mulberry32, which has consistent output no matter how many times you call it:
Computers can’t really do random. Instead, they take some state, and do some hot maths all over it to create a number. Then, they modify that state so the next number seems unrelated to the previous ones. But the truth is they’re 100% related.
If you start with the same initial state, you’ll get the same sequence of random numbers. That’s what we want – something that looks random, but it’s 100% reproducible.
Go check out the demos Jake has built. As per usual these are top-notch, and help explain everything well.
css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles
Last night — inspired by the Paint Worklet demos on Houdini.how — I decided to give Houdini a spin myself and created my own Paint Worklet. The result is css-houdini-circles which draws a bunch of random circles on the background.
Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.
It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started
As a user you can configure the number of circles, the size range, the opacity range, and the colors to use. In true Houdini style these are all configured using CSS Custom Properties.
.element {
--colors: #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e;
--min-radius: 20;
--max-radius: 100;
--num-circles: 30;
--min-opacity: 10;
--max-opacity: 50;
background-image: paint(circles);
}~
Here’s a CodePen demo for you to play with:
(Hit “Edit on CodePen” and change the CSS Custom Properties to your liking)
~
What first started out as a demo on CodePen, eventually led to me creating and publishing it as a package on NPM.
npm install css-houdini-circlesFurthermore I also created a pull request to add the site to the Houdini.now website. I was quite surprised to learn it already got merged and is already published on the website 🙂
😊 New Paint Worklet published on https://t.co/GJs2zMSOa6
css-houdini-circles by @bramus #css #cssHoudini #PaintWorklet #worklet pic.twitter.com/uRBmvKA0Lh
— CSS Houdini (@csshoudini) December 11, 2020
~
Feel free to fork the repo to have a starting point to creating your own Paint Worklet. If you know how to work with HTML canvas, I’m confident you’ll find it very easy to do so.
css-houdini-circles source (GitHub) →css-houdini-circles on npm →
In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how
CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as well as how to use them cross-browser with the Houdini Paint Polyfill. Also learn about a new resource to help you quickly get started with exploring Houdini in your own projects today.
During #ChromDevSummit, Houdini.how got announced:
Houdini.how is a library and reference for Houdini worklets and resources. It provides everything you need to know about CSS Houdini: browser support, an overview of its various APIs, usage information, additional resources, and live paint worklet samples. Each sample on Houdini.how is backed by the CSS Paint API, meaning they each work on all modern browsers. Give it a whirl!
Cross-browser paint worklets and Houdini.how →
Houdini.how →
Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.
It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started
Mariko Kosaka has created a small PWA that fills your screen with water over a duration of 20 seconds. After first using CSS animations to animate the water (video), she eventually turned to Houdini‘s CSS Paint API
Adrian Bece writing for Smashing Magazine:
Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process.
Houdini’s browser support is improving and some APIs are available for use today, so it’s a good time to become familiar with them and experiment. We are going to take a look at each part of Houdini, its current browser support and see how they can be used today using progressive enhancement.
Smashing Magazine: A Practical Overview Of CSS Houdini →
🖥 New to Houdini and not a big fan of all that text? This 2018 Houdini Slidedeck by Ibe Vanmeenen was very nice to see.
📈 Now’s a good time to compare Is Houdini Ready Yet‽ with the version from 2016. That’s a lot of green that got added since then 🙂
At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini.
CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to expand and polypill language, all while keeping the performance at an up-high. All hail Houdini!
The talk itself has a very nice build-up, and Ibe’s a great speaker. Highly recommended!
Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this.
CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over!
The example shown above merely defines a value and is quite a basic one. Typed OM however contains way more stuff. Here’s a few examples:
// CSSUnitValue objects
const {value, unit} = CSS.number('10');
// ~> value === 10, unit === 'number'
// CSSMathValue objects
new CSSMathSum(CSS.vw(100), CSS.px(-10)).toString();
// ~> "calc(100vw + -10px)"
// Basic Arithmetic operations
CSS.percent(50).max(CSS.vw(50)).toString()
// ~> "max(50%, 50vw)"
// Conversions
el.attributeStyleMap.get('width').to('mm');
// ~> CSSUnitValue {value: 132.29166666666669, unit: "mm"}
// …With the Paint API already being shipped (and more stuff on its way), Chrome is leading the pack when it comes to Houdini support:
Really looking forward to more Houdini features/support, as it will change everything (see these cool experiments for example).