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

Design Engineering Tip: Don’t move objects at a constant... shape. As speed increases, stretch them in the direction of travel. The faster they move, the more they deform. Combined with easing and subtle motion blur, even simple animations can feel significantly more dynamic. const x = useMotionValue(0) const v = useVelocity(x) const scaleX = useTransform(v, [-1200, 0, 1200], [1.8, 1, 1.8]) const blur = useTransform(v, [-1200, 0, 1200], [3, 0, 3]) `blur(${b}px)`), }} />show more

Since Opus 4.8 is out and more and more... designers are getting into Design Engineering, I thought I’d share some of the interaction patterns I use most often: Use proximity, not just hover. When the cursor gets close, nearby elements can subtly scale and darken based on distance. It makes interfaces feel more responsive, less binary, and way more alive onpointermove = e => document.querySelectorAll(".dock>*").forEach(el => { const r = el.getBoundingClientRect(); const t = Math.max(0, 1 - Math.abs(e.clientX - r.x - r.width/2) / 120); el. style.scale = 1 + t * .5; });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

Design Engineering Tip Your tooltip doesn’t always end up... where you placed it? When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction. @ container anchored(fallback: flip-block) { .tooltip { animation-name: slide-from-top; } }show 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

introducing: magnetic grid animation for Framer use this component... to create responsive image grids that react to your cursor with scale, rotation, magnetism, and more. comment 'GRID' and i’ll send you the component :)show more

Design Engineering 101: Make drag interactions feel more intuitive... and alive. Add a handle indicator, and animate scale, rotation, and shadow during the transition. Show where the item will land with an empty-space cutout.show more

I built a tiny icon-morphing component with AlpineJS +... Blade! You literally just pass in two SVGs and it handles the morphing for you. Could be on hover or whatever other trigger/event is needed Super simple to use, but it makes interactions feel so much more polished.show more

I feel like this could be turned into a... cool hero effect for a component library site. Where you move your cursor to tear between the design and the code.... 🤔show more

I found 9 sites that generate Design Markdown files... for your AI builds ! here are the links: - - - - - - - - They help turn your visual direction into an actual design system your coding agent can follow. typography, colors, spacing, radius, shadows, components, states and responsive behaviour. before you build any screen, pick a visual direction and generate the design .md file aligned with your product mechanics and outcome goals add it to Claude Code or Cursor, then use /design to describe what should stay consistent across every screen this gives the agent actual constraints instead of asking it to “make the UI look premium” and hoping for a good output you'll ship much cleaner product ideations at lightning fast speed ! ( this and a folder of 5-6 visual references are the first things we prepare before starting a client build )show more

Hailuo MiniMax Design MiniMax Design (H3) MiniMax (official) Another... Prototype Another Test - PASSED SOLESHIFT° A playful footwear e-commerce concept where every cursor hover transforms the shoe, typography, colors and motion graphics. No single text error or inaccuracy throughout all the video. The model passed the followings successfully - Animated Shape Layers - Kinetic Typography - Cursor Hover Update - Bounce Effects - Wiggle Effects - Live Background - Micro Text Renders - Ease in Ease out Keyframes Tip: Use Visual Hierarchy - One of the most essential core design principle. Prompt & Workflow belowshow more

A rite of passage in design engineering: implement the... safety triangle for hover interactionsshow more

The direction of travel in my own homeland is... unrecognisable from 20 years ago. Sinister.show more

Hailuo MiniMax Design MiniMax Design (H3) MiniMax (official) Third... Prototype - PASSED ✓ This time, I pushed it further GAUDÍ LIVING A playful furniture e-commerce UI inspired by the legendary Antoni Gaudí where every cursor hover transforms the furniture, typography, colors & motion graphics. Motion & Animations: Wiggle × Bounce × Scale Tip: Use standalone images for reference with light gray background and use hex code to lock the color. Prompt + Media below ↓show more

Small detail but this dynamic top photo makes the... app feel much more responsive and alive under the fingers.show more

Since some people asked this. The bag is just... an FK chain and hand-animated which makes state transitions quite clunky. Physics Control Components is running on top of animation to make the bag respond to velocity and direction changes. (1/2)show more

Amazing! The Metro3 NCMC Card is not accepted at... every entry/exit at M3 Stations. And not even at every entry/exit ticket reader gate. To use the card you need to be at the right entry/exit spot and at the right gate too. Mumbai Metro3 A marvel of engineeringshow more

trading shitcoins and live streaming is a match made... in heaven the FOMO feedback loop is far quicker and the content is far more engaging, making it 10x more entertaining than with text/image-based content > just watched someone flip 8 SOL into 30 within 20 seconds study thisshow more