Mudasir Fayaz

built this card component with react, tailwind, motion/react inspired from clerk website learned with @mannupaaji Framer Motion YT Playlist EP-2 GIVE YOUR FEEDBACK

@heyandras Crazy stuff going on 😮

I would like to ship another version of Coolify today, but probably it will be postponed for tomorrow morning.

@heyandras @coolifyio just working on coolify landing page refactored inline svg icons into component files more sections in homepage ui & navbar improvements will be pushed soon to repo how does it look ? give feedback

@AmenaiSabuwala Congrats 🎉

Just got a new client 🥳

@eduardbodak Cool 😎

020/100 Buttons. Total time so far: 161h We got a more simple animation here that we also see on a lot of websites. I added a bit more depth to it by making the text move slightly into the back on hover. The fun part is always that there are a lot of ways to create those animations. Sometimes you just try some CSS styles like clip-path or the sin() function, and by doing that, new ideas emerge. For example, here I could have just used a clip-path for the duplicated part and revealed it. Adding the text movement, and that’s basically it. Or I use overflow: clip on the button container and move the duplicated button below it with translate: 0 101%. 101% because sometimes you can see a small pixel line of the button when using 100%. Then I animate that duplicated button to translate: 0 0 with a little scale and movement on the text behind it. To stack the duplicated button above the default one, there are also two ways. One is using position: relative on the parent and position: absolute on the duplicate with inset: 0. The other one is grid stacking. display: grid on the parent and grid-area: 1 / 1 on the children, so they stack on top of each other. Even z-index works perfectly then without needing position: relative/absolute. Crafted 100 Buttons with @osmosupply Available on Osmo

@irsyad Ofcourse that's purpose for building this component, placeholders should be customisable

@mudasirbuilds I should probably use a toggle or something similar, but the point is that what appears as the skeleton shape should reflect the actual final UI.

Small update to the Skeleton component. You can now wrap your actual UI with Skeleton, set isLoading, and everything inside will automatically animate as a loading state. Cleaner API, less duplicated placeholder markup.

@kail_designs @Jakubantalik Polished work there 💎

Good transitions make apps feel premium. → transitions.dev A collection of essential transitions for web apps. Just: • copy • paste • ship Simple. Smooth. Beautiful. Credits: @Jakubantalik

@jeetnirnejak @paper @motiondotdev Cool interaction

Currency Converter Component: digits rolls, flag flips and swap arrow spins Designed in @paper, animated with @motiondotdev

@eduardbodak Cool 😎

018/100 Buttons. Total time so far: 152h I see quite often that when using scale on button hovers, it’s mostly something like transform: scale(1.1). That works with small buttons. But as we don’t always have the same height and width, the button looks weird with a 1.1 scale when it gets too long. That’s why a lot of people (me included) use something more like scale: 1.035 1.075; so it looks visually correct. On this button, I used another solution. We have two data attributes where we can add pixel values, one for width and one for height. For height I use 8 and for width 16. We then use JavaScript to calculate the correct scale from those values. It sets the correct scaleX and scaleY as CSS variables that we can use in the animation. With that, you can dynamically define how much bigger you want your button to be, while still keeping it visually correct. One small detail is that I animate the background separately from the rest. So the background has its own animation, while the inner part with the text has a slightly smaller animation. That makes the button feel more snappy. On the “Boost” tab, I added bigger values to the data attributes. Crafted 100 Buttons with @osmosupply Available on Osmo

@heyandras I have forked coolify landing page repo Refactoring Pages Improving Design Adding Micro Interactions It will be my first open source project on which I'm contributing 👍

🛠️ Coolify 4.1 released - Railpack (beta) - Instance level MCP so you can talk to your Coolify instance from any AI. - Improved diff tracking so if you change a config, you will see what is changed exactly before you redeploy. And a lots of fixes, other smaller features. Happy update 🫰

@AmenaiSabuwala Looks awesome 😎

working on a new hero section is it worth $125?

@markproduct Cool 😎

Morning Coffee → Design Idea ☕

@zahragr8r Great 👍

@mudasirbuilds We focused on great hero recently

Premium hero sections. Designed in Figma. Backgrounds made with ASCII.

@shariar_design @BrettFromDJ How did you built these designs? Actually nailing the details

just next level.....🔥 @BrettFromDJ

@markproduct Awesome 😎

See how beautiful it is 😍

@AmenaiSabuwala these hero sections are looking awesome

If you're the client Which is your favorite? 👀

@alexroyhe Looks good

Small things create bigger impact

@shariar_design Detailing Is There 👍👍

toggle on/off interaction 🌑🟢

@tranmautritam Looks good 😊

glass button