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

almost time to sit down and put together the 2025 demo reel 👨‍🍳 2024 👇 (not posted here)

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; } }

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%; }

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 🤙

use it, don’t fight it

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) }

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙

you ever take an enneagram test? we did them for an onsite last week. honestly answered a lot of things for me 💯 high recommend type 3

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-fallbacks: flip-block,flip-inline; } That's it 👆 Keeps the menu tethered to the button (may as well bring over some hits from the other place)

Opportunities will appear in the place you dedicate your energy to. The results will not always be immediate but dedication and perfecting whatever your craft is and showing up publicly does lead to new doors. You have to show up how you want to be perceived though.

cross-browser liquid toggle 👨‍🔬 CSS + SVG filter + drag mechanics 🧑‍🍳 (exploding view 👇)

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

add to cart 🛒 configurable css + svg 👇

cursor tracking on 3D CSS surfaces 👨‍🍳 inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙 the key: measuring the 4 corners, check the reveal 👇 (ideal for 2D canvas w/ 3D transforms)

🚨💚🤙 BREAKING: Jhey Tompkins to Shopify, here we go! Agreement in place between all parties involved

little details: hold to confirm signature ✍️ signature playback mirrors the timing of your strokes not just what you drew, but how you drew it, retaining the feel and personality

SVG filters provide a basic lighting system you can sync with a little JavaScript and use in your web apps 💡 ... not as powerful as MacOS implementation but pretty cool

you can just <select> things 🧑‍🍳 custom select with CSS (progressively enhanced) select { &, &::picker(select) { appearance: base-select; } }

obligatory "new role, new macbook" post wHAt dO i inSTaLl fiRsT? i jus' run a node script and it does it all for me 🧑‍🍳

css cyber[popover] 2025 w/ sfx jus' javascript for the audio and keyboard shortcuts — [popover], starting-style, linear(), and mask for the rest 🤙

happy birthday to my absolute world @seaotta.dev 🫶 ~3 years ago, went to speak at a conference in leeds, the rest is history

thank you all – building on CodePen has truly changed my life and shaped my career in ways never imagined

had to try CSS filter + SVG glass displacement on webcam input – crank saturation for cheap gold ✨

spray paintin' in figma 🤙

configurable chromatic aberration with SVG ✨

havin' a play with: backdrop-filter: url(#glass); Gecko/Webkit 🙏

this was my last week at Vercel ▲ it's been great – super excited for what's next ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @​container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

wild

hold to confirm signature ✍️

dynamic toggle with CSS :has() 🎁 .control:not(:has(:first-of-type:checked)) .indicator { translate: 100% 0; } leverage [type=radio]:checked with :has() to set the visuals 🤙

finally wrote up making a 3D split flap display! ✈️ 👉 open.substack.com/pub/craftofui/p/time-travel-with-javascript

dark side of the theme △🌈 View Transitions being a gift 🎁

"roll for premium" with CSS, [type=range], and an SVG noise filter 🤙

didn't think i'd be going to a Gaga concert this year... I like some of the Gaga songs, what she know about CSS? 💀

CSS + SVG + Safari bruh 🥵

exploring CSS + SVG flames 🔥 ...very much a side quest to a planned demo

<table> highlighting with CSS :has() 💡 td:has(~ td:hover), /* previous sibling cells */ table:has(td:nth-of-type(3):hover) /* column cells */ tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(3) { background: var(--highlighted); }

CSS one-liners with potential high-value gains hyphens: auto; to achieve a better visual balance where needed 🤌 (other constraints that you might not be able to control, etc.)

is this peak male performance? ☕️

JheyOverflow™

nothing quite like your wife telling you all about the great set of tits she saw whilst in the park this morning 🐦

Steph is slowly becoming the Ryan Gosling of Poppins The other night, as the credits rolled for a film, Steph was looking up uppercase Poppins totally convinced it was being used 💀

how do i condition my brain to jus' get better at posting random stuff and thoughts here more? (example 👆💀)

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap extra bonus: use a scroll animation to toggle scroll-snap at either end of the scroller

TV: what name precedes 'rabbit' in the name of a North American species of hare? @seaotta.dev (confidently): Roger 👀💀

home improvements