Sign in

Soren

@sorenblank.com
63 followers 97 following 69 posts

swe frontend // prev @spicenetio @entechboiler

PostsRepliesMedia
Soren @sorenblank.com · 11/06/2026
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.
020
Reposted by Soren
Soren @sorenblank.com · 19/05/2026
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.
032
Soren @sorenblank.com · 19/05/2026
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.
032
Reposted by Soren
Soren @sorenblank.com · 17/05/2026
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.
181
Soren @sorenblank.com · 17/05/2026
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.
181
Reposted by Soren
Soren @sorenblank.com · 03/03/2026
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 ~
032
Reposted by Soren
Soren @sorenblank.com · 02/03/2026
`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; }
0124
Soren @sorenblank.com · 03/03/2026
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 ~
032
Soren @sorenblank.com · 02/03/2026
`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; }
0124
Reposted by Soren
Soren @sorenblank.com · 20/02/2026
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
051
Soren @sorenblank.com · 20/02/2026
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
051
Soren @sorenblank.com · 17/02/2026
"w/o prediction cone" VS "w/ prediction cone"
010
Reposted by Soren
Soren @sorenblank.com · 16/02/2026
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.
051
Soren @sorenblank.com · 16/02/2026
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.
051
Reposted by Soren
Soren @sorenblank.com · 12/02/2026
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
021
Reposted by Soren
Soren @sorenblank.com · 13/02/2026
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 */ }
031
Reposted by Soren
Soren @sorenblank.com · 23/01/2026
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}; } }
061
Reposted by Soren
Soren @sorenblank.com · 25/01/2026
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.
031
Soren @sorenblank.com · 13/02/2026
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 */ }
031
Soren @sorenblank.com · 12/02/2026
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
021
Soren @sorenblank.com · 12/02/2026
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>
020
Soren @sorenblank.com · 25/01/2026
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.
031
Soren @sorenblank.com · 23/01/2026
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}; } }
061
Soren @sorenblank.com · 16/01/2026
my post is a bit misleading. i am using 1 useState to save the state whether the sidebar is open or not. tho i could have done it even without any state ngl. my rule is, if something can be done in css, i do it in css. period. just keep in mind about the browser support.
000
Soren @sorenblank.com · 16/01/2026
yeah. it's only supported on chromium for now. generally if something can be done in css, it should be done in css. i think that's the most performant approach.
000
Reposted by Soren
Soren @sorenblank.com · 09/10/2025
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.
41129
Reposted by Soren
Soren @sorenblank.com · 13/10/2025
the sidebar icon now matches the state or the state it will go to :33 css is nice ngl.
131
Reposted by Soren
Soren @sorenblank.com · 29/10/2025
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 ~
071
Reposted by Soren
Soren @sorenblank.com · 17/11/2025
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).
161
Reposted by Soren
Soren @sorenblank.com · 25/12/2025
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`.
041
Reposted by Soren
Soren @sorenblank.com · 15/01/2026
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.
021
Reposted by Soren
Soren @sorenblank.com · 15/01/2026
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.
011
Reposted by Soren
Soren @sorenblank.com · 16/01/2026
made a CSS `corner-shape` playground. you can try all the weird shapes like squircle, bevel, notch etc. also a nice way to visualize how the css `superellipse` function actually works.
011
Soren @sorenblank.com · 16/01/2026
made a CSS `corner-shape` playground. you can try all the weird shapes like squircle, bevel, notch etc. also a nice way to visualize how the css `superellipse` function actually works.
011
Soren @sorenblank.com · 15/01/2026
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.
011
Soren @sorenblank.com · 15/01/2026
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.
021
Soren @sorenblank.com · 25/12/2025
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`.
041
Soren @sorenblank.com · 26/11/2025
haha. you can try this version from here: sorenblank.com/snippets/3d-...
sorenblank.com
3D Book — Snippet — Soren Blank
An interactive 3D book with realistic page-turning animation and hover effects.
010
Soren @sorenblank.com · 23/11/2025
> "genius is no guarantee of wisdom" the people i admire cuz of their work, I got chance to talk to almost all of them. i realized majority of them are not really good people. few of them are truly good. yes i still do love their work. but i would never have them as friends.
020
Soren @sorenblank.com · 17/11/2025
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).
161
Soren @sorenblank.com · 12/11/2025
thanks!
000
Soren @sorenblank.com · 07/11/2025
3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.
140
Soren @sorenblank.com · 29/10/2025
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 ~
071
Soren @sorenblank.com · 25/10/2025
i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0111
Soren @sorenblank.com · 21/10/2025
thanks ig :)
010
Soren @sorenblank.com · 21/10/2025
navigation component inspired by @raunofreiberg. using css for the interactions. used `ease-out` with `250ms` for most of the interactions animations. seemed right (for now). "Dune" item is expanding dynamically based on the number of sub items that are present in the list.
020
Soren @sorenblank.com · 19/10/2025
inspecting an element's animation using dev tools!? this looks so cool. I didn't know one could do this fr. it doesn't look this cool in firefox tho. plus I couldn't find an option hide the inspect tooltip on firefox. on chrome holding ctrl hides the tooltip while inspecting.
010
Soren @sorenblank.com · 19/10/2025
a simpler version of Linear's orbiting loader made only using css `keyframes` and `preserve-3d` transform-style for positioning children in 3d-space. no js used here at all. so much you can achieve with `translateZ()`and `rotateY()` css transform functions.
010
Soren @sorenblank.com · 15/10/2025
you can try it from here -> sorenblank.com/snippets/sid...
sorenblank.com
Sidebar Hover Reveal — Snippet — Soren Blank
A responsive collapsible sidebar with hover-reveal functionality, inspired by V0's UI. Features smooth transitions and modern CSS with Tailwind.
010
Soren @sorenblank.com · 14/10/2025
yes. exactly. i could have made it fully using only html css without including js. but i didn't feel like it. you can try it out from here: sorenblank.com/snippets/sid...
sorenblank.com
Sidebar Hover Reveal — Snippet — Soren Blank
A responsive collapsible sidebar with hover-reveal functionality, inspired by V0's UI. Features smooth transitions and modern CSS with Tailwind.
110