Navigation as a toy: circular server icons that morph into rounded squares on hover, a white pill that stretches beside the active item, and springy transitions everywhere. Play as a design principle.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Discord-style server rail sidebar.
1. Rail: 72px wide, background #0A0A0F, a vertical stack of 48px circular server icons with 8px gaps.
2. Shape morph: icons are fully round (50%) at rest and morph to a rounded square (16px radius) on hover AND when active — transition border-radius 200ms ease.
3. Active indicator: a white pill attached to the left edge — 8px tall on hover, springs to 40px when active (transition height 200ms cubic-bezier(0.4, 0, 0.2, 1)).
4. Hover color: non-image icons flip from #16131E background/gray glyph to #8B5CF6 background/white glyph.
5. Separator: a 2px 32px-wide rounded bar in #F5F3FF0F between the home button and server list.
6. Tooltips: server names appear to the right in a #0A0A0F rounded popover, 14px semibold.Navigation as a toy: circular server icons that morph into rounded squares on hover, a white pill that stretches beside the active item, and springy transitions everywhere. Play as a design principle.
Click items to switch the active state, hover to preview it, and collapse to the icon rail.
Click items to switch the active state, hover to preview it, and collapse to the icon rail.