2025-12-09 13:33:27
I don't have enough time to play with all these amazing webGL tools right now! Maybe you do‽
This post is a quick round up of webGL tools that I've come across this year. Maybe you'll have fun in one.
I'm already a sucker for Strudel, but Hydra is a sick way to take the code and drive a visual.
The rad Pablo Stanley has a wake of great tools behind them, and Efecto is no exception.
I recently got early access to this one, was on a waiting list for so long I forgot I registered. But, worth the wait, was able to make some rad stuff in a short amount of time.
A Figma-like design tool but built for the web, with the web, rendering to DOM so WYSIWYG 100%. Mega bonus, it's got sweet drop in webGL effects.
Putting an animated webGL effects behind a beautiful artboard is so sick; the canvas feels alive and exciting.
This one had me hooked for a bit too, I think it's the one I have the most projects in. Intuitive UI, great presets, and LOTS of ways to add interactivity.
Did I miss one?
2025-12-06 12:32:46
A fun use case for @custom-media queries is to toggle styles based on a feature flag.
Imagine an edge worker that toggles true or false in a CSS file, and the rest of your styles can tap in and adapt.
you name it.
Define an enabled feature like:
@custom-media --feature-flag true;
Or a disabled feature like:
@custom-media --debug-flag false;
Use them like:
@media (--feature-flag) {
body {
…
}
}
.component {
@media (--debug-flag) {
…
}
}
Use nesting, query from JavaScript, or both.
The spec, a CSS Tricks article, post by Stefan Judis, a polyfill, a premade set in Open Props (anticipating the feature), and there's been good browser implementation activity recently in Firefox (marked FIXED!) and Chrome, not webkit as much.
I'm excited, it's a great feature.
2025-12-05 14:34:16
Fit width text in 1 line of CSS:
h1 {
text-grow: per-line scale;
}
Prototype available in Canary 145+
2025-11-30 05:47:37
Ever noticed how white text on a black background looks thicker than black text on a white background, even though the weights are the same?
This post teaches you how to account for this and adjust perceived font weight for dark mode without layout shift, with variable fonts and the GRAD axis.
g…RAD! 👈😎👈
Test your eyes and feel the problem space with the following demo
(def open it up larger):
See the Pen by Adam Argyle (@argyleink) on CodePen.
To test:
Flip between light and dark. Look closely at font weights in the "un-adjusted" and "adjusted" example content.
The goal:
The visual weight to not perceptively change when switching between light and dark. This means, when in dark mode, using a negative value for GRAD to reduce the perceived thickness.
Some play:
In dark mode, use the slider to adjust the GRAD axis to see how it changes the perceived weight of the font in the adjusted example. Feel free to fine tune the slider to find the perfect balance for your eyes, flipping back and forth, adjust the slider until you see no weight change when flipping themes.
I think it's easier to notice the difference in the paragraph text than the heading text, but you find which is easier to notice for yourself.
It's subtle:
Don't expect this to jump out at you, but you'll struggle to unsee once you see.
Humans perceive white on black vs black on white differently. We learned it from the world, the way shadows and light have given us biases and expectations. Our squishy human eye has been through some things you know?
Read more about irradiation illusion.
This impacts typography in dark mode, as the perceived weight of a font changes in dark mode, without intention from the CSS authors. The light text appears thicker than the dark text counterpart, even though the font weight is the same.
CSS can account for this illusion 🤓
Before variable fonts, font weight was the only way to adjust the perceived weight of a font, but this changes the glyph size. This can cause accidental layout shift, aka a janky experience.
GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.
Here, you'll recognize this classic issue. Hover the links in the below demo to see a small preview of the type of layout shift that can occur.
See the Pen by Adam Argyle (@argyleink) on CodePen.
With variable fonts, we can use the GRAD axis to adjust the perceived weight of a font without changing the glyph size.
This allows us to adjust the perceived weight of a font without causing layout shift. That's what the "fixed" example is using.
So far we've only adjusted the perceived weight of a font in dark mode with a negative value for GRAD, and for links being hovered that use a positive value for GRAD, but we can go even further:
See the Pen by Adam Argyle (@argyleink) on CodePen.
This allows us to adjust the perceived weight of a font based on the users contrast preferences.
If the user prefers more contrast, without layout shift, we can use a positive value for GRAD to increase the perceived thickness. In dark mode, we can use a negative value for GRAD to reduce the perceived thickness while still maintaining their preference.
body {
--GRAD: 0;
font-variation-settings: "GRAD" var(--GRAD);
}
@media (prefers-contrast: more) { body { --GRAD: 700 } }
@media (prefers-contrast: less) { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { body { --GRAD: 150 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: less) { body { --GRAD: -150 } }
Users will never ask for something like this. They'll just be able to easily read the content in your design in a way that feels natural.
Time to check if your favorite font has a GRAD axis.
Also, this is just the beginning, a foot in the door. It’s worth learning more about the relationship between grade and weight, and fine tune instances to produce the results your users and you will want.