Reading emails side by side sounded like a tiny feature... Turns out it's one of those rare things that feels unnecessary, until you use it. You move through conversations faster, keep context clear, and reply with far less back-and-forth between tabs.

Keep things intuitive: Peekaboo sidebar, inspired by Arc browser When the sidebar is hidden, move your cursor within 40px of the left edge. The sidebar peeks in. Move away, it disappears. This is using a `mousemove` listener tracking `mouseX`.

Small UX detail: Peekaboo your emails 👻 Sometimes you only need a quick glance before marking an email as read. Instead of opening the full message, just hover, preview it, and click Mark as read. Surprisingly useful. Try it here: demo.define.app

Stop copying your @motiondotdev spring configs between components. _define_ them once: • `springSmooth`: stiffness 300, damping 30 • `springSortable`: stiffness 500, damping 30 • `springSend`: stiffness 280, damping 28 You just need one file. Every animation references it.

Clicks should never accidentally become drags Set an activation distance on your pointer sensor. We use 8px. The pointer must travel at least 8 pixels before a drag starts. Tiny safeguard, huge difference in feel.

Smooth UX detail that AI agents can't do (yet) When the active tab is at the scroll edge, we detect which side it touches and change its shape.

Use masks for your scrollable areas Use the CSS at-rule `@property` to register stops as animatable values. The browser treats your custom property as a `percentage`, so the mask edges transition smoothly. Result: scroll lists that fade at the edges, revealing content underneath. No JavaScript needed.

After long months of work, we are ecstatic to share our vision for the future of email and work communication. Try here: demo.define.app I’d genuinely love to hear what you think, especially if you use email for work! Note: this is a frontend demo with mock data. PS - Reposting this because the previous video included sensitive mock data.

Satisfying theme editor. Learn from iOS: add rubber band effect on sliders. This makes the slider feel physical, intuitive, and playful. Still WIP

If you’re building scrollable areas, always use masks and custom scrollbars. Subtle details, powerful experiences.

Underrated drag and drop UX detail: Slightly rotate items while you drag them. It feels physical, playful, and instantly clear what’s happening. TBF, drag and drop is sooo tricky to nail. At define we use @dndkit. Thank you @clauderic_d!

Polish your complex UIs Micro-UX for fixed width elements, like tabs: A) apply a gradient text mask to fade out long labels B) use an ellipsis (...) at the end to show the text is truncated Small details like these make your UI feel clean and intentional.

Keep your dropdown animations fast. They: • Improve the perceived performance of your app • Feel directly tied to the user’s action • Make the UI feel alive and responsive This dropdown animates in 150ms with an ease-out cubic curve: `cubic-bezier(.215, .61, .355, 1)