iiinova — where your digital self keeps evolving

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

one does not simply reveal a password 👁️

731934

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 · 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

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

Reposted by Jhey ʕ·ᴥ·　ʔ

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 21/11/2024

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)

922031

Reposted by Jhey ʕ·ᴥ·　ʔ

Web Witch 🔮 Stephanie Stimac @seaotta.dev · 15/10/2025

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.

2503

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

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

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

1676

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

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

3814

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

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

1328835

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

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? 💀

1130

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

CSS + SVG + Safari bruh 🥵

4421

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

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

3563

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

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

1438438

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 31/01/2025

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

31267

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 31/01/2025

is this peak male performance? ☕️

top-down desk shot of Jhey's desk featuring a latte with Jhey's best latter art to date

3290

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 30/01/2025

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

2310

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

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 💀

media.tenor.com

a man is sitting in a car talking to a woman and saying papyrus .

ALT: a man is sitting in a car talking to a woman and saying papyrus .

5411

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

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

3220

Jhey ʕ·ᴥ· ʔ

Jhey ʕ·ᴥ·　ʔ