Jhey ʕ·ᴥ·　ʔ

playin' with stickers again 🕹️ different materials, sounds, wear marks via css or webgl 🧑‍🍳

trans<form>er

slop grenade™

get /skills 🥤

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 ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴

wild

hold to confirm signature ✍️

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 🤙

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