Motion pinned list.
Layout animation + subtle spring. Tuning the feel through spring configs.
Check the demo and try it.
Portfolio update soon.
English
Dinil Thilakarathne
57 posts
Dinil Thilakarathne
@codebydinil
Creative Front-end developer Talk about CSS and Web Animations
Katılım Nisan 2023
356 Takip Edilen15 Takipçiler
Open source here: github.com/Dinil-Thilakar…
Would be useful to hear how others handle workspace cleanup.
English
I found 35+ GB of reclaimable space in my local projects folder.
Most of it was generated dev folders like `node_modules`, `dist`, `.next`, and `build`.
That problem was annoying enough that I built a CLI for it.
It’s called `sona-clean`.
English
Introducing 𝚑𝚒𝚝-𝚊𝚛𝚎𝚊—a collection of @tailwindcss utility classes for expanding the hit area of interactive elements.
Small hit areas are a silent UX killer. One class fixes it.
Distributed via @shadcn registry - see link below.
English
Sona UI just hit a major milestone.
– Refined UI and layout system
– Improved overall architecture
– Fully integrated with shadcn/ui
You can now install Sona UI components directly via the shadcn CLI.
No manual setup. Just add and build.
More updates coming soon.
English
For those still writing CSS 😊
Here's a squishy hover I've been using a lot recently. 👇
English
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.
English
i found the use-case of this component.
inspired by @nitishkmrk
zenith@bossadizenith
If this feels overengineered, your UI is underdesigned. inspired by @raunofreiberg
English
@Una @emilkowalski I’m absolutely loving these morphing animations!!!
English
I always *love* @emilkowalski's UI tips! Here's the native browser way to achieve this effect:
View transitions do this "fade-out-while-rearranging" behavior by default. You can also customize the transition with CSS (see demo)
::view-transition-old(*):only-child { ... }
codepen.io/una/pen/VYjKoae
Emil Kowalski@emilkowalski
Notice how in the correct example chips move instantly to their new position when a chip is removed. That’s because of the `popLayout` mode on AnimatePresence in motion/react which creates a smoother, faster transition when removing an element.
English