Curated archive of 21 design references, UI interactions, and animations published by Gabriel on X.
Making sharing payment links feel a little more alive - Gabriel
Making sharing payment links feel a little more alive
@gabriell_labEven subtle micro animations can explain how a product works. - Gabriel
Even subtle micro animations can explain how a product works.
@gabriell_labDropdown Component Animation - Gabriel
Dropdown Component Animation
@gabriell_labDesign Engineering Tip: Visual cues reduce uncertainty. Instead of... - Gabriel
Design Engineering Tip: Visual cues reduce uncertainty. Instead of making users guess why an action isn't available, communicate it through motion. A small shake instantly signals...
@gabriell_labDesign Engineering Tip: If text inside your container scales when t... - Gabriel
Design Engineering Tip: If text inside your container scales when the container animates, that's Motion's layout. It doesn't re-typeset the text - it scales it, like an image. <mo...
@gabriell_lab
Dashboard Analytics UI - Gabriel
Dashboard Analytics UI
@gabriell_labDesign Engineering Tip Make reordered cards keep their identity. Wh... - Gabriel
Design Engineering Tip Make reordered cards keep their identity. When a layout changes, cards shouldn’t pop into new slots. Keep each item mounted with a stable ID and animate its...
@gabriell_labOnboarding Experience made with Figma Motion - Gabriel
Onboarding Experience made with Figma Motion
@gabriell_labDesign Engineering Tip: If your whole page shifts 15px the moment a... - Gabriel
Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on...
@gabriell_labA floating gallery of polaroid-style images forms a clean 3D sphere... - Gabriel
A floating gallery of polaroid-style images forms a clean 3D sphere on a white background.
@gabriell_lab
Relight your Scene UI - Gabriel
Relight your Scene UI
@gabriell_labEvery interaction deserves motion. Even the small ones. - Gabriel
Every interaction deserves motion. Even the small ones.
@gabriell_labDesign Engineering Tip: Don’t apply backdrop-filter directly to you... - Gabriel
Design Engineering Tip: Don’t apply backdrop-filter directly to your modal. Move the blur to a separate pseudo-layer instead. Separating the blur from the content can reduce paint...
@gabriell_labAgent Panel Animation - Gabriel
Agent Panel Animation
@gabriell_labAI Sidebar Companion User Interface - Gabriel
AI Sidebar Companion User Interface
@gabriell_lab
Need your help: Which minimap style do you prefer, a heatmap view o... - Gabriel
Need your help: Which minimap style do you prefer, a heatmap view or a glass magnifier view?
@gabriell_labIf you struggle to describe UI transitions in Claude or Codex, thes... - Gabriel
If you struggle to describe UI transitions in Claude or Codex, these commonly used transition terms can help. Save this for later.
@gabriell_lab
Agentic reasoning for image and video generation. - Gabriel
Agentic reasoning for image and video generation.
@gabriell_lab![Designed a Nike-inspired advertisement today [UI-Exploration] - Gabriel](https://cdn.bestdesignsonx.com/media/1902323466621030400/status/1951038292104728925/8d6d98b1.avif)
Designed a Nike-inspired advertisement today [UI-Exploration] - Gabriel
Designed a Nike-inspired advertisement today [UI-Exploration]
@gabriell_lab
From an idea and sketch to execution. - Gabriel
From an idea and sketch to execution.
@gabriell_labDay 7 – the final sneak peek. Huge thanks to everyone who followed... - Gabriel
Day 7 – the final sneak peek. Huge thanks to everyone who followed along this week. This is my last teaser – tomorrow, full portfolio goes live. I animated everything myself, and...
@gabriell_lab