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

messin' with portfolio ideas using CSS + SVG 🤌

anyway, happy #7E9! 🤙 this year's new year resolution: 5120x2880

first words of the year: "babe wake up, it's new year, the gongs are going now"

something festive 🎄 happy holidays y'all 🤙

Amazon drivers channeling that Santa energy hard no doorbell, no knock — just yeet the package and run if chimneys were an option, it would be nothing but net

started from System.out.println now we're here

jus' browsin' @muzli.bsky.social and see my face

last week was my last week as a DX engineer at Vercel ┬┴┬┴┤•ᴥ•ʔ▲├┬┴┬┴

the wild part? 5 minutes with @astro.build and you can use it as a cross-document Pixelated View Transition 🤖 @​view-transition { navigation: auto; } then apply the demo code to the ::view-transition pseudo-elements 🚀

pixelated image transitions with CSS and generative SVG masks transition the mask-position on two stacked images to reveal a backdrop tricks like these are a good example of solving from a different perspective with CSS an exploding view that breaks it down 👇

CanDick™

there's a reason Michelin star chefs ship less to your table it's higher quality

The year is 2077. Your AI butler has just finished cooking a Michelin-star meal and mowing the lawn, yet your Elgato Key Light still randomly disconnects from Wi-Fi...

pro tip: leave messages for yourself in your code to spur you on 💪 loaded up the UI for a branch worked on last week... <h3>no f****** idea 💀</h3>