Free 🅰️/🅱️ test results collection
Learn design tricks to increase your conversion rates from this curated collection of A/B test results from top apps.
→ https://t.co/UmUQNWxvDx
Using CSS mask-image you can truncate texts with a smooth fade effect.
It looks clean and it's a great alternative to text ellipsis.
.text-container {
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: linear-gradient(
to right, black 50%, transparent);
mask-image: linear-gradient(
to right, black 50%, transparent);
}
}
If you found this one useful, follow for more! ❤️
My portfolio is now open source
I’ve released the source code behind my portfolio redesign 👀
→ https://t.co/KJoHfHfPwR
→ https://t.co/Ob1p34hpd0
Built with @threejs@greensock#lenis and a lot of love for smooth animations ✌️
#javascript#opensource#webdesign
UI/UX Designers, this might be the best tool for generating accessible color palettes.
RandomA11y helps you auto-generate accessible color collections in seconds, making your designs both beautiful and inclusive.
Bookmarks it for later 💜
Built and published the fictional design agency archive from day 12 using Claude Code + Figma MCP.
Claude got the project surprisingly close very quickly, but the final polish still came down to human direction, especially around motion, depth, blur, and interaction feel.
Live link in thread.
Hoy una industria entera dejó de tener sentido.
Un tío publicó en GitHub un repo que convierte cualquier foto en un mundo 3D explorable: meshes con físicas, splat del fondo, audio ambiente. Todo.
Una imagen entra. Un mundo sale. Cinco minutos.
La gente que se pasó diez años aprendiendo Blender lleva todo el día mirando esto en silencio.
Se llama image-blaster.
Design Engineering Tip: Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance.
let t;
const nav = document.querySelector(".navbar");
window.addEventListener("scroll", () => {
nav. style.backdropFilter = "blur(8px)";
clearTimeout(t);
t = setTimeout(() => {
nav. style.backdropFilter = "blur(24px)";
}, 120);
});
If elements ever shift unexpectedly by a few pixels during an animation and you can’t figure out why, try using the `will-change` CSS property.
It promotes the element to its own GPU compositing layer. Use it sparingly though, since overusing it can hurt performance.
https://t.co/H8VuWhdzJ3 just got a big update!
- Waay faster
- A new deck every single day
- Explore by slide type (intro, pricing, team…)
- No membership, no paywall
Free, forever.
With the new scrambleText() feature, you can control reveal direction, create cursor effects, apply perturbation and easing, and chain it in keyframes and timelines like any other Anime.js animation property.
It's crazy how just a few lines of code can create such visually complex effects.