💡design engineering tip: if you are using toasts, don't... just create new toasts and stack every toast on each other. it confuses users, and creates a lot of visual noice. 📷 instead, use a cycling animation (a single animation won't work due to the browsers nature) with a slight bounce to visualize, that the task is already completed.show more

💡design tip: if you are building a new dark... mode, and you are using subtle shadows throughout the app, you might see, that inverting the shadow is not going to work. ➡️instead, use a 0.5px/1px inset shadow for the elements that still need some depth on the app.show more

Yo! That new animation looks promising, I really hope... you will like it. I learned a lot of new animation tools for this teaser, and it was a lot of fun to make. Also tried using Koikatsu to create the hair, and I'm really happy with how it looks now.show more

Design Engineering Tip: Most UI animations are built for... a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}show more

I'm seeing a lot of people saying it is... just a bad upscaling instead of Gen AI, but it is indeed Gen AI animation. There are things going on in it that just don't make any sense for puppet animation. Here are some parts that make it clear, I slowed down the video so it's easier to notice the chunky parts. I checked the past ADs and it's possible to notice details (from an animator's POV) that are common and make sense for human work, so it was definitely a choice to use AI on this new ADshow more

Design Engineering Tip Consider letting textareas grow with the... content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }show more

lando: one of the people that i work most... closely with is oscar. you have to help each other out, support each other. you learn a lot from one another and oscar’s just been a great guy, who’s just as quick and i’ve been able to learn a lot from him and share the journey together.show more

Alright, now that we know *what* an agent is,... how does it actually work? When you ask for help on a task, the agent plans a series of steps and executes them directly in the application on your behalf, using the tools it has access to. Say you are booking a local service or trying to organize your inbox (which typically takes multiple steps): the AI model first plans how to achieve the task using its existing knowledge and then interacts with your inbox to execute the task. The agent will continue until it is confident the task has been successfully completed.show more

Design Engineering Tip: Add friction at the end of... a scroll interaction. When users reach the edge of a scrollable area, the movement should not just stop instantly. A subtle resistance, bounce, or slowdown can make the interface feel more physical and less mechanical. It helps users understand that they reached a boundary without needing extra labels or visual indicators. Used carefully, this can make scrolling feel more natural and closer to how objects behave in the real world.show more

Every soul is a unique perspective of the same... eternal Consciousness. To harm another is to wound another finger of the same hand. To know yourself is to know the Whole. Suffering is a lesson that must be learned, for it is through it that we awaken and become one with the Divine. I hope the animation won't give you nightmares.show more

I've seen a lot of animatics lately that are... super detailed, essentially viewport previews of the final shot. But an animatic at it's core doesn't need to be anything fancy. Its main purpose is to plan and test the timing, camera angles, movement, and overall composition. With animatics you have to keep in mind the following: Pre-visualization: It allows to see a basic version of the animation or scene before committing to detailed work. Timing and pacing: An animatic helps identify how long each scene or shot should last, ensuring that the timing feels right. Planning: It helps with layout, camera angles, and transitions. By visualizing the shots, the team can ensure that the framing and overall design of the scenes work well in 3D space. Efficiency: It allows the team to test and fix any potential issues early on, like awkward movements or awkward pacing, before spending time on high-quality rendering or complex animation. In short, an animatic helps in conceptualizing the final animation by giving a low-res, rough version of the scenes, which guides the entire production process in terms of visual design, timing, and storytelling.show more

SOMEONE TURNED THEIR TEAM'S TASK TRACKER INTO A 3D... ISLAND instead of a boring list of tasks, your teams work is a little island that grows as you get stuff done > you assign tasks right in slack, just type who its for, the points, and the due date > finish a task and you get to place a building on the island > get your work rejected and the building collapses into rubble > the rubble stays there forever, so everyone can see it > each new sprint starts a fresh island so over time the island fills up with buildings for all the work your team actually finished, and the rubble is a reminder of what got rejected. its open source, so any team can set it up. way more fun than staring at a to do list all dayshow more

📐Design Systems and DESIGN.md Consistency using Design Systems and... DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)show more

At Uber a big problem for design teams and... engineering teams was design source of truth. No one knew what the app truly looked like, so weekly a bunch of designers would get into a meeting room and check that the engineers correctly implemented the figma designs that they made Now with coding agents throughput of changes has increased an order of magnitude and it has become impossible to manually keep up. Here we used the Revyl CLI to create a flow of every state in the Uber design, by navigating our mobile use agent on an cloud iOS simulator. This is something that would have taken a team of designers tens of hours to recreate manually; All done in less than an hour asynchronously with a simple prompt. Enable your team to know what your users are actually seeing and empower coding agents to give your users a delightful experience without any blindspots Get started with our new free trial and create a map for your own app 🗺️show more

Let's take a look at the beautiful vivo OriginOS... 6 ultrasonic fingerprint animation. The feature of this advanced animation is that it can have a relationship with the background and distort the background instead of floating on the surface like Samsung.show more

HE DESCRIBED A SITE TO CLAUDE CODE AND WALKED... AWAY FOR 8 MINUTES What came back looked like a studio spent weeks on it. The setup that made it work: > Two design skills installed - Claude stops using safe boring defaults. > Visual references instead of text descriptions. > One detailed prompt with the concept, Claude asks clarifying questions before building. First version already solid -> review pass, one batch of fixes, done. What used to take a designer and a developer and several weeks of handoffs now takes a single session and no coding experience. Full walkthrough in the article below ↓show more

The MC customization screen is being fully redone with... a lot of new features. Here's the first preview of it! You'll be able to choose any color you want for each layer (even using specific hex codes), give it a name, and save it for future use.show more

BitGo CEO Mike Belshe on the Clarity Act: A... lot of work to be done there will be mistakes, it won't be perfect. But if you don't have the Clarity Act or something like it, you don't even get started." Points out most other countries are already figuring this out. America needs solid legislation to stay at the forefront. 🇺🇸show more

GPT-5.6 Sol is unbelievably good at creating and editing... videos. It can do motion design, product demos, and animations like this one I made by simply giving it a screen recording. GPT 5.6 has the best design taste and significantly outperforms Fable, which relies heavily on repetitive design patterns. To help you experiment with video editing on it, we just launched a collection of 100 ready-to-use skills that show what’s possible and help you get started with video editing using GPT-5.6. These skills can create anything from motion graphics launch videos for your product to a 3B1B-style science explainer video. You can also use them to edit existing videos: add captions, generate motion graphics, create voiceovers, redesign visual styles, translate into new languages, and much more. If you want access to the full library, comment “VIDEO SKILLS” and I’ll share it with you. (You'll have to follow me so I can DM you.)show more

Design Engineering Tip Make hover interactions respond to where... the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };show more

whoever leaked this has bigger balls than sense Google... Research and MIT ran the same agent jobs 260 different ways for Nature last month: they held the prompts, the tools and the compute budget identical and moved nothing but the wiring between the agents, and the same work swung from 70% worse than a single agent to 80.8% better, averaging out at 0.0% i ran my own single agent against the task list first and it cleared 6 of 10 alone, already past the line where a crew starts subtracting this is Graph Engineering, the layer that decides whether a crew is worth 80% more or 70% less, and it installs into the agent you already pay for: - score your solo agent on the real task first: above roughly 45% success that study predicts zero to negative returns from any crew you put around it - under that line, put one supervisor over the fan out: crews with no correction step amplified their own errors to 17.2x the single agent rate, supervised aggregation held it to 4.4x - give every worker one output and let none of them read a peer's draft, so a wrong step reaches the supervisor instead of four other agents - run the comparison again after every model upgrade, because a better model raises your baseline and a higher baseline is what makes a crew stop paying - keep the single agent alive as the control, the only number that says the wiring is earning its calls turns out the shape does not travel: the biggest win came off a finance task under one supervisor and the worst collapse off a planning task with independent agents my position, and it is the arguable one: a crew is a bet on your own diagram, and the model you pick moves that bet less than one arrow does bookmark this, the three moves that draw those arrows before you pay for one extra call are in the post below ↓show more