Curated archive of 25 design references, UI interactions, and animations published by jhey ʕ•ᴥ•ʔ on X.
eased gradients hit different in dark mode 🌚 now with draggable be... - jhey ʕ•ᴥ•ʔ
eased gradients hit different in dark mode 🌚 now with draggable bezier handles to find the fade that fits 🧑🍳
@jh3yybuilt a real-time writing linter powered by jev 📝 write custom rul... - jhey ʕ•ᴥ•ʔ
built a real-time writing linter powered by jev 📝 write custom rules like “flag anything that sounds like a linkedin post” receipt printer included 🖨️ (includes audio)
@jh3yyʕ-ᴥ-ʔ - jhey ʕ•ᴥ•ʔ
ʕ-ᴥ-ʔ
@jh3yybuilt-in carousel micro-interactions with css scroll-driven animati... - jhey ʕ•ᴥ•ʔ
built-in carousel micro-interactions with css scroll-driven animation li { view-timeline: --item inline } li::scroll-marker { animation: grow linear both; animation-timeline: --it...
@jh3yy
i need to throw some love at my controls ai is awesome but i strugg... - jhey ʕ•ᴥ•ʔ
i need to throw some love at my controls ai is awesome but i struggled with working on a few demos at once before. now that's 10x because i can jus' speak my ideas into a bunch of...
@jh3yy"can I use it for images?" – Yep! Could even combine it with CSS sc... - jhey ʕ•ᴥ•ʔ
"can I use it for images?" – Yep! Could even combine it with CSS scroll-driven animation CSS, am I right?
@jh3yyliquid slider <input type=range> + CSS + SVG filter + delta scale o... - jhey ʕ•ᴥ•ʔ
liquid slider <input type=range> + CSS + SVG filter + delta scale on pointermove
@jh3yyone way w/ css stack an image 2x filter 1st, unclip 2nd on :hover a... - jhey ʕ•ᴥ•ʔ
one way w/ css stack an image 2x filter 1st, unclip 2nd on :hover a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: c...
@jh3yycustom <select> with CSS select { &, &::picker(select) { appearance... - jhey ʕ•ᴥ•ʔ
custom <select> with CSS select { &, &::picker(select) { appearance: base-select; } }
@jh3yylil css + svg glow loader prototype - jhey ʕ•ᴥ•ʔ
lil css + svg glow loader prototype
@jh3yya solid CSS technique for morphing surfaces anchor() + @starting-s... - jhey ʕ•ᴥ•ʔ
a solid CSS technique for morphing surfaces anchor() + @starting-style
@jh3yystate-aware product cards slept on posting my take w/ view transiti... - jhey ʕ•ᴥ•ʔ
state-aware product cards slept on posting my take w/ view transitions
@jh3yyreminder: you don't need duplicated text for this css text effect t... - jhey ʕ•ᴥ•ʔ
reminder: you don't need duplicated text for this css text effect text-shadow + 1lh translate span { text-shadow: 0 -1lh var(--clr); } a:is(:focus-visible, :hover) span { translat...
@jh3yyadd to cart button interaction jus' css + svg + await element.getAn... - jhey ʕ•ᴥ•ʔ
add to cart button interaction jus' css + svg + await element.getAnimations() transitioning grid-template keeps it responsive
@jh3yyCSS card parallax with pointermove + custom props <div class=ring s... - jhey ʕ•ᴥ•ʔ
CSS card parallax with pointermove + custom props <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } tr...
@jh3yymessin' with css frosted + saturated borders using background-clip... - jhey ʕ•ᴥ•ʔ
messin' with css frosted + saturated borders using background-clip + backdrop-filter
@jh3yythe trick: SVG displacement filter via CSS filter property. use on... - jhey ʕ•ᴥ•ʔ
the trick: SVG displacement filter via CSS filter property. use on scaled duplicate content in the view finder element. that way, you don’t need to worry about backdrop-filter sup...
@jh3yyprogressive css-only pagination indicators w/ anchor positioning na... - jhey ʕ•ᴥ•ʔ
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 na...
@jh3yysidebar details CSS auto-height transition w/ grid li > div[inert]... - jhey ʕ•ᴥ•ʔ
sidebar details CSS auto-height transition w/ grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow ke...
@jh3yyai keys - jhey ʕ•ᴥ•ʔ
ai keys
@jh3yyexplore - jhey ʕ•ᴥ•ʔ
explore
@jh3yySVG filters provide a basic lighting system you can sync with a lit... - jhey ʕ•ᴥ•ʔ
SVG filters provide a basic lighting system you can sync with a little JavaScript and use in your web apps ... not as powerful but pretty cool
@jh3yyconfigurable chromatic aberration as requested – adjust to your lik... - jhey ʕ•ᴥ•ʔ
configurable chromatic aberration as requested – adjust to your likin'
@jh3yydynamic toggle with CSS :has() .control:not(:has(:first-of-type:che... - jhey ▲
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
@jh3yycurved scrollbar powered by GSAP + CSS scroll-snap + SVG - jhey ▲
curved scrollbar powered by GSAP + CSS scroll-snap + SVG
@jh3yy