---
id: "2115829861294248036"
source: https://x.com/th2049/status/2115829861294248036
author: "thameem (@th2049)"
media: "video, 1440x1080, 9.1s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Radial Donut Menu for File Conversion

## Summary
A desktop file-conversion shortcut filmed close up on a hot orange wallpaper: drag an image file and a translucent donut menu of seven format segments blooms around it; drop on a segment and a converted copy appears beside the original. Worth studying for the glassy pie-menu styling and the way depth-of-field camera blur makes a UI demo feel physical.

## Style
- Theme: light (pale coral glass over a saturated red-orange desktop)
- Mood: playful, quick, warm, tactile
- Tags: radial-menu, pie-menu, file-converter, drag-and-drop, glassmorphism, desktop-utility, toast
- Category: Components, Product video

## Palette
| Role | Hex |
|---|---|
| Wallpaper red | #D41907 |
| Wallpaper vermilion | #E73208 |
| Wallpaper orange | #ED720D |
| Wallpaper flame | #EA4F0D |
| Deep red shadow | #AF0E07 |
| Glass segment | #ECA08B |
| Thumbnail olive | #7B582F |
| Selection blue | #2F6BE0 |
| Copy badge green | #34C759 |

## Typography
- Segment labels (JPG, PNG, WEBP, TIFF, AVIF, BMP, PDF): system sans, semibold, uppercase, about 2.5 percent of frame height, dark grey on pale glass. Inter (600).
- File names under icons: small bold system sans in white on a blue rounded selection pill for the active file, plain white with a soft shadow for others. Inter (600).
- Toast: small medium sans "Converting to JPG" with a lighter secondary line for the file name. Inter (500 and 400).

## Layout
- 4:3 frame (1440x1080) of a desktop shot with a shallow depth of field; diagonal orange and red folds fill the wallpaper.
- File icon: about 80px square thumbnail with a 6px radius, a darker selection plate behind it, label pill centred below.
- Donut menu: outer diameter about 260px around the cursor, inner hole about 80px; seven equal wedges with 4px gaps and 14px rounded corners.
- Toast: a floating rounded rectangle about 230 x 70px, 14px radius, translucent coral fill, close "x" at top-left, thin progress track at the bottom.
- Converted files spawn in a loose column to the right of the source, spaced about 130px apart.

## Elements
- Source file: photo thumbnail (oranges on a branch) with a blue selection label.
- Donut menu: frosted coral wedges, each with a format label; a faint white rim and inner highlight give a glass lip; the active wedge brightens and its label echoes in the centre hole as a small pill.
- Drag ghost: the thumbnail follows the cursor with a green circular "+" copy badge at its corner.
- Toast: shows conversion progress with a filename line and a hairline progress bar.
- Output files: new thumbnails with suffixed names (" 2.jpg", ".pdf", ".webp") and a short blue selection highlight when they land.

## Motion
- 0.4s: the file is selected; about 1.5s later the toast slides down and fades in (250ms ease-out) and the progress line fills.
- 3.7s: on drag, the donut scales from 0.6 to 1 around the cursor with a spring (about 220ms, slight overshoot), wedges fading in with a 20ms stagger.
- 5.3s: the menu dismisses (150ms scale-down and fade) and two converted icons pop in with a small bounce.
- 6.9s: the menu reopens; hovering a wedge lifts it about 4px outward and tints it brighter (120ms).
- 8.6s: a third file appears; the camera drifts and refocuses throughout, adding natural blur.

## Rebuild it
1. Create a full-viewport stage with a warm diagonal gradient (`linear-gradient(120deg, #ED720D, #E73208 45%, #D41907 70%, #AF0E07)`) and draggable file icons.
2. Build the donut as an SVG of seven arc paths (computed from polar coordinates with small angular gaps) inside a `motion.div` positioned at the pointer.
3. Style wedges with `fill: rgba(236,160,139,0.75)`, a 1px white stroke at 40 percent opacity, and put the whole menu behind `backdrop-filter: blur(16px) saturate(140%)`.
4. Open on drag start with `initial={{ scale: 0.6, opacity: 0 }}` and a spring (`stiffness: 420, damping: 24`); stagger the wedge labels by 20ms.
5. Hit-test the pointer angle to pick the active wedge; animate its translate along the bisector by 4px and show its label in the centre pill.
6. On drop, close the menu, add a new icon to state with a `layout` animation and a scale 0.8 to 1 pop, and show a toast that slides from the top with a progress bar.

## Generation prompt
Close-up screen recording with shallow depth of field of a desktop with a glowing red and orange folded-silk wallpaper: an image file icon is dragged and a frosted coral glass donut menu with seven rounded wedges labelled with file formats blooms around the cursor; dropping on a wedge creates a converted copy beside the original, a translucent toast shows conversion progress, warm playful utility UI, no brand names.