Soren
@sorenblank.com
swe frontend // prev @spicenetio @entechboiler
Pinned
Soren
@sorenblank.com
· Oct 29
Table of contents below 🧵:
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).
each page has a fixed rotation defined. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).
November 17, 2025 at 9:53 PM
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).
each page has a fixed rotation defined. pages are stacked with absolute positioning and all rotate from `origin-left` (the spine).
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.
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.
November 7, 2025 at 8:53 PM
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.
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.
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 ~
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 ~
October 29, 2025 at 6:23 PM
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 ~
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 ~
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.
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.
October 25, 2025 at 9:21 PM
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.
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.
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.
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.
October 21, 2025 at 10:58 PM
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.
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.
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.
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.
October 19, 2025 at 7:51 PM
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.
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.
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.
no js used here at all. so much you can achieve with `translateZ()`and `rotateY()` css transform functions.
October 19, 2025 at 5:08 PM
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.
no js used here at all. so much you can achieve with `translateZ()`and `rotateY()` css transform functions.
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.
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.
to focus on deep-links you can use `:target` pseudo class in css . for example —
h1:target {
text-decoration: underline;
}
h1:target {
text-decoration: underline;
}
October 8, 2025 at 10:02 PM
to focus on deep-links you can use `:target` pseudo class in css . for example —
h1:target {
text-decoration: underline;
}
h1:target {
text-decoration: underline;
}
always sync your `theme-color` with the background to match color with ui bars of browsers like safari and arc
September 15, 2025 at 7:37 AM
always sync your `theme-color` with the background to match color with ui bars of browsers like safari and arc
this is the reason why i can never switch to an apple watch
September 9, 2025 at 11:09 PM
this is the reason why i can never switch to an apple watch
if I could remove LinkedIn completely from the world, i wouldn't think twice. sigh.
August 31, 2025 at 6:02 AM
if I could remove LinkedIn completely from the world, i wouldn't think twice. sigh.
vscode just dropped a new landing page 👀
August 15, 2025 at 3:59 AM
vscode just dropped a new landing page 👀
Who asked for Rust in Turkish!? 🤨
March 18, 2025 at 12:06 AM
Who asked for Rust in Turkish!? 🤨
There’s nothing close to the build quality of a MacBook Pro.
March 10, 2025 at 12:00 AM
There’s nothing close to the build quality of a MacBook Pro.
found after a long search
February 27, 2025 at 10:48 AM
found after a long search
@joshwcomeau.com dropping a new banger
February 25, 2025 at 12:53 PM
@joshwcomeau.com dropping a new banger
4 months with my Macbook M3 Pro and I can tell you this is the best purchase I’ve made in my entire life.
February 3, 2025 at 10:12 PM
4 months with my Macbook M3 Pro and I can tell you this is the best purchase I’ve made in my entire life.
Mac tip of the year:
Go to "~/Library/Caches" and delete everything inside
Bro just reclaimed 500gb of storage
Go to "~/Library/Caches" and delete everything inside
Bro just reclaimed 500gb of storage
January 29, 2025 at 3:10 AM
Mac tip of the year:
Go to "~/Library/Caches" and delete everything inside
Bro just reclaimed 500gb of storage
Go to "~/Library/Caches" and delete everything inside
Bro just reclaimed 500gb of storage
@raycast.com ~ the tool I can't use my Mac without. raycast is goated ngl.
January 10, 2025 at 8:31 PM
@raycast.com ~ the tool I can't use my Mac without. raycast is goated ngl.
it's funny how people are becoming more and more brain rotted every day. barely anyone consumes good contents or does anything meaningful. majority is intellectually empty in the brain.
January 10, 2025 at 7:36 PM
it's funny how people are becoming more and more brain rotted every day. barely anyone consumes good contents or does anything meaningful. majority is intellectually empty in the brain.