@Sameerjs6 @emilkowalski I think it makes sense. option A animates the elements in one by one guiding the user's eye and allowing them to focus on one thing at a time.
English
Abdimajid
81 posts
Abdimajid
@abdmjd_
Frontend developer blending design, motion & code to craft beautiful, functional interfaces. • Available for work.
Katılım Haziran 2024
315 Takip Edilen5 Takipçiler
failed this one, but interesting. I always thought about hierarchy, but differently, in the order they're placed instead of the actual weightage on the user.
Thank you for this one, though, for some reason Option A looks very weird in my eyes, especially the animating pill the last while being placed the first
English
Al produces motion that works, but feels mediocre, and if you can't tell the difference, you'll ship it. You'll settle for good enough, and that's not good enough.
Train Your Judgement
emilkowal.ski/ui/train-your-…
English
already possible CSS-only teehee :3c
matt rothenberg@mattrothenberg
the guy keeps saying "you can already do this with a canvas behind the element" so here is another gratuitous animation where the scanline physically distorts the form content as it passes (warping the actual rendered HTML pixels)
English
late post but last week I got my first component merged into @dillionverma 's @magicuidesign 🎉
the Backlight component adds a glow effect behind videos, images & SVGs that mirrors the content's colors
you can check it out here
magicui.design/docs/component…
English
Please use idiomatic CSS before reaching for pretext
dmytro@pqoqubbw
built a small simple component for middle truncation based on @𝚌𝚑𝚎𝚗𝚐𝚕𝚘𝚞/𝚙𝚛𝚎𝚝𝚎𝚡𝚝
English
@fredrikalindh couldn't they have used CSS with 2 spans?
the first span contains the trancated text with these styles:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
and a second span contains the last part of the text that you want to always stay visible
English
Slooow is officially live in the Chrome Web Store.
It slows down any web animation (CSS, GSAP, Framer Motion…) so you can actually see what’s going on — easing, timing, polish.
Perfect for motion design critique, design reviews, and UI polish sessions.
Install it, open your product, set it to 0.1x, and you’ll notice things you’ve never seen before.
chromewebstore.google.com/detail/slooow/…
Micka@micka_design
New side project: a tiny Chrome extension to Slooow down and capture any web animation. I never open the animation devtools, but I always want to see how far a team pushed their polish. 0.1x turns every interface into a motion design critique — you see things you’d normally miss.
English
@TimGuignard @stitchbygoogle Yep. it's a really simple but nice effect.
I actually created pretty much the same effect with the same approach a while ago in a codepen.
codepen.io/abdmjd/details…
English
This nice dots pattern on the @stitchbygoogle background is actually just a background-image with radial-gradient.
Just a tiny piece of code for a cool effect.
English
@fedorivanenko_ how are you checking if the element is in 'sticky' mode?
English
- ffmpeg wasm strips audio from video before processing -> this makes a 75m, 6gb video to about ~110mb
- since ffmpeg wasm is local, the upload time is MUCH faster
- I used AssemblyAI for transcription—it rips 🔥
- Replit App storage for storing audio / transcripts
- Gemini Flash for transcript repair
ffmpeg wasm is REALLY fun—here's a realtime look at how quickly it strips the audio for a ~75 minute, 6gb video to about 112mb
English
Transcribe a 75 minute video in under 2 minutes
This app splits video from audio (locally), making upload size about 100x smaller
Then, it uploads the audio to AssemblyAI for transcription
Finally, transcripts are corrected with Gemini Flash
Built with Agent 3, of course
English
