Soren
@sorenblank.com
swe frontend // prev @spicenetio @entechboiler
Pinned
Soren
@sorenblank.com
· Oct 29
Table of contents below 🧵:
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.
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.
June 11, 2026 at 4:46 PM
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.
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.
Reposted by Soren
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.
using `::selection` CSS pseudo-element to set a custom highlight color based on your design system should be the standard for web interfaces.
May 19, 2026 at 5:13 PM
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.
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.
using `::selection` CSS pseudo-element to set a custom highlight color based on your design system should be the standard for web interfaces.
May 19, 2026 at 5:13 PM
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.
using `::selection` CSS pseudo-element to set a custom highlight color based on your design system should be the standard for web interfaces.
Reposted by Soren
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.
using a spring will always feel more fluid and natural for interactions that aren't strictly mapped to the cursor.
May 17, 2026 at 6:40 PM
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.
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.
using a spring will always feel more fluid and natural for interactions that aren't strictly mapped to the cursor.
May 17, 2026 at 6:40 PM
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.
using a spring will always feel more fluid and natural for interactions that aren't strictly mapped to the cursor.
Reposted by Soren
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 ~
normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs.
where tabular stays perfectly flush ~
March 3, 2026 at 6:20 PM
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 ~
normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs.
where tabular stays perfectly flush ~
Reposted by Soren
`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;
}
you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`.
.tabular-nums {
font-variant-numeric: tabular-nums;
}
March 2, 2026 at 5:19 PM
`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;
}
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 ~
normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs.
where tabular stays perfectly flush ~
March 3, 2026 at 6:20 PM
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 ~
normal table's columns have ragged left edges as digits swap between narrow ("1") and wide ("0", "8") glyphs.
where tabular stays perfectly flush ~
`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;
}
you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`.
.tabular-nums {
font-variant-numeric: tabular-nums;
}
March 2, 2026 at 5:19 PM
`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;
}
you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`.
.tabular-nums {
font-variant-numeric: tabular-nums;
}
Reposted by Soren
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
this impl satisfies both groups:
– click the email address for the `mailto` link
– or click the icon to copy to clipboard
February 20, 2026 at 7:19 AM
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
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
this impl satisfies both groups:
– click the email address for the `mailto` link
– or click the icon to copy to clipboard
February 20, 2026 at 7:19 AM
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
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"
February 17, 2026 at 4:06 AM
"w/o prediction cone" VS "w/ prediction cone"
Reposted by Soren
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.
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.
February 16, 2026 at 4:09 AM
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.
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.
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.
February 16, 2026 at 4:09 AM
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.
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.
Reposted by Soren
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
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
February 12, 2026 at 11:40 PM
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
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
Reposted by Soren
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 */
}
this can be easily fixed using css `::before` pseudo element on each element:
::before {
content: "";
position: absolute;
inset: -10px 0; /* extends 10px vertically */
}
February 13, 2026 at 2:57 PM
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 */
}
this can be easily fixed using css `::before` pseudo element on each element:
::before {
content: "";
position: absolute;
inset: -10px 0; /* extends 10px vertically */
}
Reposted by Soren
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}; }
}
`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.
@keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}
January 23, 2026 at 10:02 PM
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}; }
}
`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.
@keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}
Reposted by Soren
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.
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.
January 25, 2026 at 12:06 AM
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.
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.
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 */
}
this can be easily fixed using css `::before` pseudo element on each element:
::before {
content: "";
position: absolute;
inset: -10px 0; /* extends 10px vertically */
}
February 13, 2026 at 2:57 PM
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 */
}
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
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
February 12, 2026 at 11:40 PM
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
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>
- 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>
February 12, 2026 at 11:36 PM
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>
- 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.
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.
January 25, 2026 at 12:06 AM
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.
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.
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}; }
}
`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.
@keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}
January 23, 2026 at 10:02 PM
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}; }
}
`stroke-dashoffset` being used here to animate the offset effect. can be bit tricky.
@keyframe {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: ${-dashCycle}; }
}
Reposted by Soren
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.
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.
October 9, 2025 at 10:12 PM
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.
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.
Reposted by Soren
the sidebar icon now matches the state or the state it will go to :33 css is nice ngl.
October 13, 2025 at 10:39 PM
the sidebar icon now matches the state or the state it will go to :33 css is nice ngl.