iiinova — where your digital self keeps evolving

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 17/09/2026

had to repost because i posted the wrong video, missing a detail 🤦‍♂️ i would rather lose the "likes" and have the correct video on my timeline 🙏 the spotlight is meant to reveal the password, so here's a darker version with the shader tweaked 🤙

4503

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 17/09/2026

one does not simply reveal a password 👁️

731934

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 08/04/2026

closed the lid on the stroller to block the sun but can’t see me. straight out 😴 (sporting best pants today 💯)

191

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 26/01/2026

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!

050

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 15/01/2026

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

41678

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 20/12/2025

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

0420

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 11/11/2025

it’s true, steph still talks about these potatoes

130

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 11/11/2025

this event changed my life, our lives 🥹🫶 @seaotta.dev

140

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 23/10/2025

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

0472

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/10/2025

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

2557

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/10/2025

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

290

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/10/2025

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

170

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/10/2025

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

0141

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/10/2025

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 🤙

2777

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 19/10/2025

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

1674

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 16/10/2025

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 🤙

1823

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 16/10/2025

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

3120

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 15/10/2025

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

410315

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 14/10/2025

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! 🧑‍🍳

59011

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 09/10/2025

add to cart 🛒 configurable css + svg 👇

0441

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 09/10/2025

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)

1755

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 26/07/2025

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

101350

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 11/07/2025

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

3663

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 08/07/2025

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

1353348

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 08/07/2025

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

4844

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 08/07/2025

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

New Macbook Pro box sitting on Jhey's desk

6260

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 03/07/2025

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

2696

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 27/06/2025

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

1601

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 23/06/2025

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

4932

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 23/06/2025

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

31158

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 18/06/2025

spray paintin' in figma 🤙

0190

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 16/06/2025

configurable chromatic aberration with SVG ✨

1858

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 12/06/2025

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

518420

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 06/06/2025

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

polaroid snap of Jhey and Vercelians at company offsite laid on a table

141231

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/05/2025

no support? use a thin "sentinel" element that you watch with IntersectionObserver to toggle attribute styling 🤙 if (!CSS.supports('container-type: scroll-state')) { new IntersectionObserver(([e]) => { root.dataset.stuck = !e.isIntersecting }).observe(sentinel) }

0180

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 22/05/2025

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

3935

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 21/05/2025

hold to confirm signature ✍️

3794

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 26/04/2025

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 🤙

829215

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 15/04/2025