@jh3yy: we made a new thing... some of the details that are felt but perhaps go unnoticed

we made a new thing…

some of the details that are felt but perhaps go unnoticed

the preloader is a combo of svg dots + inline css custom properties

delay, speed, drift, travel, glow, all handled at render

negative delays bring it to life from the off

side note: highly advocate for creating prototypes that store config state in their url

makes it easy to collab and iterate, jus’ share a url!

we spin up prototypes and ping them around as Quick links

the hero text doesn’t “type”

visual characters are split with css delays + scroll state flips visibility

no dom churn, jus’ choreographed and stepped opacity transitions

nav pill reveals on scroll and is a tiny state machine

:hover/:focus-visible to open

it’s a stacked css grid transition so no content measuring

[aria-expanded=true] → grid-template-rows: 1fr

side note: use a little :hover affordance here by using the container as the trigger (padding exaggerated here)

this avoids your users getting into states they don’t want like accidentally closing things

(check out Fitts’s Law as an aside )

nav link underlines are a lil’ css scale trick

scale on x 0 → 1 switch the transform-origin for entry/exit

a nice little detail

video modals use view transitions

the tricky part isn’t the video morph, it’s ensuring proper overlay behavior

that requires a view-transition for the nav too + some z-index to avoid collisions depending on scroll position

card text reveals are progressively enhanced css scroll-triggered fades, no js

css view-timeline flips –scroll-reveal 0 → 1 then opacity & translate transition

–scroll-reveal-index adds stagger, and we update responsively to match the visual grid

we also have some progressive enhancement on this little media carousel

css scroll-driven animations play nice with scroll-snap and drive the scaling effect

one shared tooltip feels cleaner

follows the cursor, tilts with pointer velocity, morphs between links

less DOM. fewer listeners

pre-render what you can. keep DOM stable. animate properties the browser likes

add a11y before the polish. then make the little details feel inevitable

well done to the whole team on this one go read more tech breakdown on the main thread ↓

that was a fun one to work on. funny enough, was showing someone that on the phone earlier today

we’ll have another edition soon enough with other interest points for sure!