---
id: "2111477585461039241"
source: https://x.com/th2049/status/2111477585461039241
author: "thameem (@th2049)"
media: "video, 3840x2160, 21.4s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Drag-and-Shift File Converter

## Summary
A desktop utility where you drag a file, press Shift, and a small radial menu blooms around the cursor to convert it on the spot; from there a warm, glassy panel lets you crop an image with aspect-ratio pills and add a gradient background with padding, and the results drop straight back onto the desktop. A delightful shortcut that feels native to the OS.

## Style
- Theme: light (warm glass over a coral desktop)
- Mood: delightful, quick, warm, native
- Tags: desktop-utility, file-converter, radial-menu, drag-and-drop, crop, background-picker, macos
- Category: Components, Product video

## Palette
| Role | Hex |
|---|---|
| Coral | #FB5F48 |
| Peach | #ED8D68 |
| Amber | #E99736 |
| Burnt orange | #AF6435 |
| Mauve | #986A6D |
| Lavender | #9982B1 |
| Blush | #DAB1AF |
| Panel | #EFEDEB |
| Action orange | #F25C1E |

## Typography
- Panel titles ("Crop Image"): system sans, semibold, small. SF Pro or Inter (600).
- Labels and values (Aspect ratio, Background, Padding, W and H fields): small regular system sans.
- File names under icons: tiny white desktop labels.

## Layout
- 16:9 frame (3840x2160) of a desktop with a warm coral-to-violet wallpaper and file icons along the right edge.
- Radial menu: a circle about 80px across around the dragged file, split into segments.
- Panels: centred floating sheets (about 30% of the width) with a preview on top and controls below.

## Elements
- Radial menu: translucent warm segments with tiny format labels around the file icon.
- Crop panel: image preview with orange corner handles, aspect pills (Free, 1:1, 16:9, 9:16, 4:3, 3:4) with the active one in orange, W and H inputs, Reset and an orange Apply button.
- Background panel: a grid of colour and gradient swatches, a padding slider and a corner radius slider.
- Output: new files (JPG, cropped JPG, PNG with background) appearing on the desktop.

## Motion
- Dragging a file and pressing Shift scales the radial menu in around the cursor (150ms spring).
- Hovering a segment highlights it; dropping converts and a new file icon pops onto the desktop.
- Panels rise in with a slight scale and blur; the preview updates live as you change crop, background or padding.

## Rebuild it
1. As a native app (Swift and SwiftUI): listen for drag sessions and the Shift modifier, then show a borderless transparent window at the cursor with a radial menu.
2. Build the radial menu as `Path` arcs with labels; map the drop target segment to a conversion.
3. Panels: `.ultraThinMaterial` sheets tinted warm, with a preview, segmented aspect pills and sliders.
4. Render outputs with Core Image (crop, composite onto a gradient with padding and radius) and write them beside the source file.
5. For a web demo, recreate it with a draggable icon, a keydown listener for Shift and a Motion radial menu.

## Generation prompt
A warm macOS desktop utility demo on a coral-to-violet gradient wallpaper: dragging a file and pressing Shift opens a small translucent radial menu around the cursor, then a glassy panel to crop a document with orange handles and aspect-ratio pills, and another to place it on a gradient background with padding; new files pop onto the desktop; delightful, quick, native-feeling UI, no real brand names.