motion should be dynamic — adapting to the interaction instead of playing the same fixed values every time. in this example the pill's stretch and blur scale with how fast it travels. Apple takes dynamic motion to the extreme with liquid glass. it's too much for my liking.

browser default text selection colors often sucks! and every browser handles them differently. using `::selection` CSS pseudo-element to set a custom highlight color based on your design system should be the standard for web interfaces.

browser default text selection colors often sucks! and every browser handles them differently. using `::selection` CSS pseudo-element to set a custom highlight color based on your design system should be the standard for web interfaces.

recreated this component from Linear's homepage. here using `useSpring` from motion/react (@motion.dev). using a spring will always feel more fluid and natural for interactions that aren't strictly mapped to the cursor.

recreated this component from Linear's homepage. here using `useSpring` from motion/react (@motion.dev). using a spring will always feel more fluid and natural for interactions that aren't strictly mapped to the cursor.

another good example of `tabular-nums` in action. must have for columns of right-aligned numbers (tables, invoices, dashboards). normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs. where tabular stays perfectly flush ~

Soren@sorenblank.com · 5mo ago

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

another good example of `tabular-nums` in action. must have for columns of right-aligned numbers (tables, invoices, dashboards). normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs. where tabular stays perfectly flush ~

Soren@sorenblank.com · 5mo ago

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ). you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`. .tabular-nums { font-variant-numeric: tabular-nums; }

do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead. this impl satisfies both groups: – click the email address for the `mailto` link – or click the icon to copy to clipboard

do you click on `mailto` links? maybe some of you do. but i’ve seen many ( me included ) prefer to just copy the email address instead. this impl satisfies both groups: – click the email address for the `mailto` link – or click the icon to copy to clipboard

"w/o prediction cone" VS "w/ prediction cone"

Soren@sorenblank.com · 6mo ago

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.

a "Table of Contents" component inspired from devouringdetails.com . tho this is a bit simpler version for my blogs ( you can see them here sorenblank.com/writing ). you can try it from here: sorenblank.com/writing/scroll-tracking-table-of-contents

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

SVG is really fun! here my recent exploration of svg dashed animations for tryarchitect. `stroke-dashoffset` being used here to animate the offset effect. can be bit tricky. @keyframe { from { stroke-dashoffset: 0; } to { stroke-dashoffset: ${-dashCycle}; } }

SVG dashed animation on buttons ~ i've been experimenting how i can use this effect in different ui components. it goes well with buttons i think. looks pretty seamless when you are using it along some transform movements of the component.

Soren@sorenblank.com · 6mo ago

SVG is really fun! here my recent exploration of svg dashed animations for tryarchitect. `stroke-dashoffset` being used here to animate the offset effect. can be bit tricky. @keyframe { from { stroke-dashoffset: 0; } to { stroke-dashoffset: ${-dashCycle}; } }

ever seen these small dead zones in a list of closely stacked elements? im seeing this more often. this can be easily fixed using css `::before` pseudo element on each element: ::before { content: ""; position: absolute; inset: -10px 0; /* extends 10px vertically */ }

a "Table of Contents" component inspired from devouringdetails.com . tho this is a bit simpler version for my blogs ( you can see them here sorenblank.com/writing ). you can try it from here: sorenblank.com/writing/scroll-tracking-table-of-contents

How I optimized video assets & perceived performance: - Added tiny ~30px base64 blurred inline <img> placeholders (instant load!) - Moved videos from @nextjs /public to @Cloudflare CDN - Served .webm with .mp4 fallback via <source>

SVG dashed animation on buttons ~ i've been experimenting how i can use this effect in different ui components. it goes well with buttons i think. looks pretty seamless when you are using it along some transform movements of the component.

Soren@sorenblank.com · 6mo ago

SVG is really fun! here my recent exploration of svg dashed animations for tryarchitect. `stroke-dashoffset` being used here to animate the offset effect. can be bit tricky. @keyframe { from { stroke-dashoffset: 0; } to { stroke-dashoffset: ${-dashCycle}; } }

SVG is really fun! here my recent exploration of svg dashed animations for tryarchitect. `stroke-dashoffset` being used here to animate the offset effect. can be bit tricky. @keyframe { from { stroke-dashoffset: 0; } to { stroke-dashoffset: ${-dashCycle}; } }

so much you can do in css using pseudo classes. used `:has` pseudo class to make the full hover animation here. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` made only using css. no js listener used. took me longer than i thought it would.

the sidebar icon now matches the state or the state it will go to :33 css is nice ngl.

Soren@sorenblank.com · 10mo ago

so much you can do in css using pseudo classes. used `:has` pseudo class to make the full hover animation here. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` made only using css. no js listener used. took me longer than i thought it would.

smooth radius transform accordion component using css. no framer motion used here. for auto height transition using css `grid` inspired by @jhey.dev. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

3d book component. the static hover book is a pure css approach. no javascript used here. each page has a fixed rotation defined to it. each page has a fixed rotation defined. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).

for such case where the request is almost instant ( <100ms ), jumping directly to a `success state` is much more cleaner than adding artificial delay imo. imo loading states are generally ambiguous and means nothing without a proper `success state`.

squircles feels nice. it's my first time trying the experimental css `corner-shape` property. you can just use in css `corner-shape: squircle` to make the squircles. had enough fun working on this control panel component. note: this is only supported on "chromium" for now.

ever wonder what makes `squircle` different? its the mechanics behind it. css `corner-shape` maps to superellipse (Lamé curve) exponents. superellipse(n): n=1 → round, n=2 → squircle, n=0 → bevel higher n = flatter sides (squareish but smooth). squircle is the sweet spot.