AirDrop-style cross-platform file transfer app with radar UI
AirDrop-style cross-platform file transfer app with radar UI is a 33-second Claude Opus motion design reference by @0xMovez, built around Canvas, WebGL. GOAL: Build "Hop": an AirDrop-style app to send files between a Mac and a Windows PC on the same Wi-Fi. Copy this UI motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.
@0xMovezView post
Prompt
GOAL:
Build "Hop": an AirDrop-style app to send files between a Mac and a Windows PC on the same Wi-Fi.
MOTION:
No cloud, no accounts.
Stack: Electron (one codebase for macOS + Windows), plain HTML/CSS/JS UI, no frameworks.
1. Discovery: each device broadcasts a small JSON beacon over UDP (port 47800) every 1.5 s to every subnet broadcast address. Show peers that were seen in the last 10 s. Ignore your own beacons.
2. Transfer: each device runs an HTTP server on a random port. Sender POSTs an offer (file names + sizes), the receiver shows Accept / Decline, then files stream one by one. Support whole folders. Never overwrite: "photo (1).jpg". Reject any path that could escape the download folder.
3. Trust: an "Always accept from this device" checkbox. Save to Downloads/Hop (changeable).
4. Before building any UI, write a Node test where two devices in one process find each other and send a folder + a 3 MB file; compare hashes.
5. UI, Apple-level polish: a radar with this device in the center and peers around it (Apple logo on Macs, Windows logo on PCs). Drag files onto a peer, or click it to pick files. The file chip flies along an arc into the peer, then an iOS 17 NameDrop-style iridescent light wave sweeps across the window (WebGL shader with a Canvas fallback). Progress ring around the peer. Vibrancy on macOS, acrylic on Windows 11. Light / Dark / Auto switch.
6. Icon: macOS squircle, 1024 px, readable at 16 px. Draw 3 concepts, compare them, keep the best.
7. Run independent review passes on the UI and the networking code before shipping.
8. GitHub Actions: on a v* tag build Hop-mac-arm64.dmg, Hop-mac-x64.dmg and Hop-windows-x64.exe and publish a release.
9. Add a startup log and always show the window, so a launch that hangs is easy to debug.
Ship it, then give me the install steps for both machines.
Author original
Build "Hop": an AirDrop-style app to send files between a Mac and a Windows PC on the same Wi-Fi. No cloud, no accounts.
Stack: Electron (one codebase for macOS + Windows), plain HTML/CSS/JS UI, no frameworks.
1. Discovery: each device broadcasts a small JSON beacon over UDP (port 47800) every 1.5 s to every subnet broadcast address. Show peers that were seen in the last 10 s. Ignore your own beacons.
2. Transfer: each device runs an HTTP server on a random port. Sender POSTs an offer (file names + sizes), the receiver shows Accept / Decline, then files stream one by one. Support whole folders. Never overwrite: "photo (1).jpg". Reject any path that could escape the download folder.
3. Trust: an "Always accept from this device" checkbox. Save to Downloads/Hop (changeable).
4. Before building any UI, write a Node test where two devices in one process find each other and send a folder + a 3 MB file; compare hashes.
5. UI, Apple-level polish: a radar with this device in the center and peers around it (Apple logo on Macs, Windows logo on PCs). Drag files onto a peer, or click it to pick files. The file chip flies along an arc into the peer, then an iOS 17 NameDrop-style iridescent light wave sweeps across the window (WebGL shader with a Canvas fallback). Progress ring around the peer. Vibrancy on macOS, acrylic on Windows 11. Light / Dark / Auto switch.
6. Icon: macOS squircle, 1024 px, readable at 16 px. Draw 3 concepts, compare them, keep the best.
7. Run independent review passes on the UI and the networking code before shipping.
8. GitHub Actions: on a v* tag build Hop-mac-arm64.dmg, Hop-mac-x64.dmg and Hop-windows-x64.exe and publish a release.
9. Add a startup log and always show the window, so a launch that hangs is easy to debug.
Ship it, then give me the install steps for both machines.
Questions
What is this ui motion prompt for?
It is a Claude Opus motion design brief for “AirDrop-style cross-platform file transfer app with radar UI”. Paste it into Claude and keep the timings already written in the prompt.
Where is the original film?
The creator is @0xMovez. Use View post to open the X video this prompt belongs to.