see how far i get, at some point 🥲

jus’ a nice visual that makes me want to look around at different geometric art for inspo 💯

one of the few things i’ve seen lately where i’m like “i wanna build one of those” 👏

thanks for sharing, thought the sphere was real cool too

component level view transitions finally 🙌

does not surprise me tbh

would def approach differently now, these demos are over 3 years old

would be good to see detection + corner-shape usage too now

Supercharged CSS with Anchor Positioning [Chrome Canary] (Drag/Double Click the nodes) ...

👋 here are a couple (feels like an eternity ago 🥲)

[1] "charge" lines (drag nodes) codepen.io/jh3y/pen/Pox...
[2] "post-it" board (add + drag + connect in pane) codepen.io/jh3y/pen/MWq...

love the "whack a dialog" demo 😅 reminded me of this one i did for CSS day with [popover] 🎈

so true though, fun experimentation has multiple benefits 💯

not only do you learn something, but it's also great for finding API limits or surfacing browser bugs/issues, wish we saw more of it!

you can import anonymously too but of course doesn’t solve if you are someone writing a bunch of <link> tags

that concept of an anonymous layer to wrap reset is sound though, it’s been around a moment. mentioned in this topic that may interest if you haven’t seen it

css.oddbird.net/layers/link-...

another way: combine import with layer like you can for 3rd party style overrides

@import "reset.css" layer(reset);
@layer normalize, reset, base, etc;

🙏🙏🙏

2025: made stuff
2026: make more stuff 🧑‍🍳

the ideal would be a mix of this + offset-path cause they both have their trade offs/limits 🥲

yeah, textPath gets overlooked 💯

it’s a shame there isn’t a nice way to magically scale the text to fit a path neatly

(the scale/blend trick is a nice touch)

almost time to sit down and put together the 2025 demo reel 👨‍🍳

2024 👇 (not posted here)

i have just the one for you that i’ve been working on 🙌 a definite gsap to the rescue demo!

i will say, i think it looks great 👏

works great for me. one small thing i see that doesn’t happen every single time but if you open a demo, sometimes you get a flash of the page before it fades in on the page transition. that’s Safari iOS.

they were unbelievable, would def make the trip to Leeds for them alone

it’s true, steph still talks about these potatoes

this event changed my life, our lives 🥹🫶

@seaotta.dev

it is important to know which order you'll be going in

this is the weird case wherre a rudimentary infinite scroller works "seamlessly" until scroll-snap enters the room which starts to intefere with things

instead of battling it, i'm jus' gonna try and take it out of the equation 😅

in unrelated news, i'm writing my own scroll-snap this week, ya know, for browser parity 😅

this 💯 my one hope/idea around this that’s related would’ve been an extension to anchor positioning that was like anchor(pointer x)/anchor(pointer y)

felt like a way that would open up easy pointer position passing to styles 🤔

super easy CSS sticky scroll hide/reveal 🧑‍🍳

.sticky-atc {
position: fixed;
inset: auto 0 0 0;
transition: translate 0.26s cubic-bezier(.55,0,.67,1.25);

/* hide when scrolling down */
@container scroll-state(scrolled: bottom) {
translate: 0 100%;
transition-delay: 0.5s;
}
}

haha – well, it worked with the API from a couple of years back
then it had to be switched to [popover] + <button> because the API moved and we lost some of the functionality hooks we had + it needed to work in my deck

i'll have to try and piece it together again

small details that matter 🧑‍🍳

use CSS pseudoelements to bridge the :hover gap w/ :has() + inset

a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }

jus' see a cat with the biggest lips sliding to a halt

correct ✅ although i've been lookin' at some other options too

i really want some more "editing" type features so i often end up exporting and then doing other things in Screenflow

this demo continues to be my baseline gauge/one of the final bosses for where we're at with this API 😅

the only atlas you should be invested in. touch grass.

apple-style disclosure w/ CSS details + summary 👨‍🍳

::details-content {
interpolate-size: allow-keywords;
transition: content-visibility, height;
transition-behavior: allow-discrete;
}
[open]::details-content { height: fit-content; }

CSS :has() handling the image swaps 🤙