---
id: "2115799686166495598"
source: https://x.com/koppkev/status/2115799686166495598
author: "kev (@koppkev)"
media: "video, 1280x798, 10.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Morphing Dark Action Menus

## Summary
Two small dark controls, a round more button and a Share pill, each grow into a dropdown menu that morphs out of the button itself rather than appearing beside it. The more menu opens upward with Edit, Duplicate, Archive and a red Delete; the Share menu opens downward with Copy link, Email and Embed, then melts back into the pill with a soft blur. A neat reference for container-morph menus on near-black UI.

## Style
- Theme: dark
- Mood: sleek, quiet, tactile, refined
- Tags: dropdown-menu, morph, popover, micro-interaction, dark-ui, context-menu, shared-layout
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #0E0E0C |
| Button and menu surface | #1D1B1A |
| Item hover | #2A2826 |
| Label text | #D9D6D2 |
| Muted text | #8A8784 |
| Destructive red | #E5486F |

## Typography
- Menu items and the Share label: neutral grotesk sans, regular (400), sentence case, about 1.3% of the frame height (13px at 1x). Closest free font: Inter 400.
- Delete uses the same style in the destructive red.
- No headings or other text.

## Layout
- 16:10 frame (1280x798), near-black, with the two controls on one baseline about 120px apart, left of centre.
- More button: 36px circle with three white dots. Share: 64x30px pill.
- Menus: about 130px wide, radius 14px, 6px inner padding, items 30px tall with 16px icons and 8px gap; a 1px #2A2826 divider above Delete.
- Depth comes only from surface lightness; no shadows or borders are visible.

## Elements
- Round more button (three-dot glyph) that the upward menu grows from.
- Share pill with muted label that brightens on hover.
- Actions menu: Edit (pencil), Duplicate (two squares), Archive (box), divider, Delete (trash, red).
- Share menu: Copy link (chain), Email (envelope), Embed (code brackets).
- Hovered item gets a rounded #2A2826 highlight inset by 4px.

## Motion
- 0.4s: cursor reaches the more button; at about 1s the button stretches upward into the menu (about 300ms, spring with slight overshoot), items fading in 30ms apart.
- 2.2 to 4.1s: hover highlight slides between items (about 150ms); clicking outside collapses the menu back into the circle.
- 5.9s: clicking Share expands the pill downward into its menu, same spring.
- 7.7s: menu closes; at 9.5s a captured mid-close frame shows the menu shrinking into the pill with a 4 to 8px blur and fading text, about 250ms.
- Not looping; driven by clicks.

## Rebuild it
1. Make each control a single `motion.div` with `layout` that switches between a button state and a menu state, so the same element morphs; give it `style={{ borderRadius: 18 }}` so radius animates correctly.
2. Transition: `{ type: "spring", stiffness: 500, damping: 38 }` for layout; menu content wrapped in `AnimatePresence` with opacity 0 to 1 and `filter: blur(4px)` to `blur(0px)` over 160ms.
3. Anchor the more menu with `bottom-0` so it grows upward and the Share menu with `top-0` so it grows downward.
4. Tailwind: surface `bg-[#1D1B1A] text-[#D9D6D2] text-[13px]`, items `h-[30px] px-2 gap-2 rounded-lg hover:bg-[#2A2826]`.
5. Hover highlight: a shared `layoutId="hover"` background that slides between rows.
6. Close on outside click and Escape; restore focus to the trigger.

## Generation prompt
A minimal dark user interface clip on a near-black background: a small round three-dot button and a pill-shaped Share button; the round button smoothly morphs upward into a rounded dark dropdown menu with edit, duplicate, archive and a red delete option, then the Share pill stretches downward into a menu with copy link, email and embed, and melts back with a soft blur; sleek, quiet, tactile micro-interaction.