Curated archive of 9 design references, UI interactions, and animations published by Soren on X.
My buddy (@okaytanvir) and I are working on something fresh: a prac... - Soren
My buddy (@okaytanvir) and I are working on something fresh: a practical guide to how modern software is built. We're breaking down the core engineering concepts behind products l...
@sorenblankdo you click on `mailto` links? maybe some of you do. but i’ve seen... - 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 th...
@sorenblankyou can achieve this using the @tailwindcss `group` class on parent... - Soren
you can achieve this using the @tailwindcss `group` class on parent and `group-hover` variant on target. <div class="group"> <div class="group-hover:translate-y-6"/> </div> here i...
@sorenblankSVG is really fun! here my recent exploration of svg dashed animati... - 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. @ ke...
@sorenblanksquircles feels nice. it's my first time trying the experimental cs... - Soren
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 fu...
@sorenblanka smoother radius transform version using css. no framer motion use... - Soren
a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by @jh3yy. when collapsed `grid-rows-[0fr]` and exp...
@sorenblanki wasn't aware of `animation-timeline` css property if I be honest.... - Soren
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 elemen...
@sorenblankplaying with easing in css is fun. here im using `ease-out-cubic` w... - Soren
playing with easing in css is fun. here im using `ease-out-cubic` with `200ms` duration. this works best for user initiated interactions with transforms. animations here using css...
@sorenblankthe sidebar icon now matches the state or the state it will go to.... - Soren
the sidebar icon now matches the state or the state it will go to. thanks @jh3yy :3
@sorenblank