Jhey ʕ·ᴥ· ʔ
@jhey.dev
⚡️ makin' ideas click
👨🍳 staff design engineer @shopify (ex @google, @vercel 🫡)
📚 making ui/ux course craftofui.dev
👰♀️ @seaotta.dev
👨🍳 staff design engineer @shopify (ex @google, @vercel 🫡)
📚 making ui/ux course craftofui.dev
👰♀️ @seaotta.dev
the ideal would be a mix of this + offset-path cause they both have their trade offs/limits 🥲
January 10, 2026 at 8:47 PM
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)
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)
January 10, 2026 at 8:40 PM
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)
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)
2024 👇 (not posted here)
December 20, 2025 at 5:38 PM
almost time to sit down and put together the 2025 demo reel 👨🍳
2024 👇 (not posted here)
2024 👇 (not posted here)
i have just the one for you that i’ve been working on 🙌 a definite gsap to the rescue demo!
December 15, 2025 at 1:45 PM
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.
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.
December 12, 2025 at 2:38 PM
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.
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
November 11, 2025 at 1:53 PM
they were unbelievable, would def make the trip to Leeds for them alone
it’s true, steph still talks about these potatoes
November 11, 2025 at 1:43 PM
it’s true, steph still talks about these potatoes
November 11, 2025 at 1:41 PM
it is important to know which order you'll be going in
October 24, 2025 at 10:18 AM
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 😅
instead of battling it, i'm jus' gonna try and take it out of the equation 😅
October 23, 2025 at 9:44 PM
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 😅
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 😅
October 23, 2025 at 9:39 PM
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 🤔
felt like a way that would open up easy pointer position passing to styles 🤔
October 22, 2025 at 11:48 PM
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 🤔
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;
}
}
.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;
}
}
October 22, 2025 at 11:22 PM
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;
}
}
.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
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
October 22, 2025 at 5:18 PM
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
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%; }
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%; }
October 22, 2025 at 4:54 PM
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%; }
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
October 22, 2025 at 4:39 PM
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
i really want some more "editing" type features so i often end up exporting and then doing other things in Screenflow
October 22, 2025 at 1:13 PM
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
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 😅
October 22, 2025 at 1:07 PM
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.
October 22, 2025 at 12:55 PM
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 🤙
::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 🤙
October 22, 2025 at 9:45 AM
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 🤙
::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 🤙
only reason i like it is because it makes it easier for me to replicate the controls, etc. for web as they’re easier to reference this way haha
October 20, 2025 at 11:44 AM
only reason i like it is because it makes it easier for me to replicate the controls, etc. for web as they’re easier to reference this way haha
yeah 💯 floating-ui orrrr jus' roll your own rudimentary anchor if you don't need flip, etc.
i do this for Shopify, where anchor isn't supported, i do a rudimentary anchor with custom properties and have hide on resize/scroll 🤙
i do this for Shopify, where anchor isn't supported, i do a rudimentary anchor with custom properties and have hide on resize/scroll 🤙
October 20, 2025 at 11:07 AM
yeah 💯 floating-ui orrrr jus' roll your own rudimentary anchor if you don't need flip, etc.
i do this for Shopify, where anchor isn't supported, i do a rudimentary anchor with custom properties and have hide on resize/scroll 🤙
i do this for Shopify, where anchor isn't supported, i do a rudimentary anchor with custom properties and have hide on resize/scroll 🤙
no problem 🙏 i'll remember to snap a clip of it or something when i'm back on the shopBook 😅
yeah, the sheer amount of demos produced overwhelms me at the idea of trying to make them all fit into this format haha
i did audit the last couple of years and the config template has evolved
yeah, the sheer amount of demos produced overwhelms me at the idea of trying to make them all fit into this format haha
i did audit the last couple of years and the config template has evolved
October 19, 2025 at 4:53 PM
no problem 🙏 i'll remember to snap a clip of it or something when i'm back on the shopBook 😅
yeah, the sheer amount of demos produced overwhelms me at the idea of trying to make them all fit into this format haha
i did audit the last couple of years and the config template has evolved
yeah, the sheer amount of demos produced overwhelms me at the idea of trying to make them all fit into this format haha
i did audit the last couple of years and the config template has evolved
easing is everything
use different CSS timing functions per axis for motion paths 👨🍳
.p {
animation: x .8s var(--x-time), y .8s var(--y-time);
animation-composition: accumulate; 👈
}
@keyframes x { to { translate: var(--x) 0 }
@keyframes y { to { translate: 0 var(--y) }
use different CSS timing functions per axis for motion paths 👨🍳
.p {
animation: x .8s var(--x-time), y .8s var(--y-time);
animation-composition: accumulate; 👈
}
@keyframes x { to { translate: var(--x) 0 }
@keyframes y { to { translate: 0 var(--y) }
October 19, 2025 at 4:49 PM
easing is everything
use different CSS timing functions per axis for motion paths 👨🍳
.p {
animation: x .8s var(--x-time), y .8s var(--y-time);
animation-composition: accumulate; 👈
}
@keyframes x { to { translate: var(--x) 0 }
@keyframes y { to { translate: 0 var(--y) }
use different CSS timing functions per axis for motion paths 👨🍳
.p {
animation: x .8s var(--x-time), y .8s var(--y-time);
animation-composition: accumulate; 👈
}
@keyframes x { to { translate: var(--x) 0 }
@keyframes y { to { translate: 0 var(--y) }