Cleanly disk cleaner app demo with glassy UI, physics space map, and shader backdrop
Cleanly disk cleaner app demo with glassy UI, physics space map, and shader backdrop is a 35.3-second Claude Opus motion design reference by @0xMovez, built around Canvas, Physics, WebGL. [Note: the creator shared a partial prompt. 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
[Note: the creator shared a partial prompt. Wording below is theirs.]
GOAL:
Build "Cleanly": a beautiful, safe disk cleaner for macOS and Windows, from scratch.
MOTION:
I attached screenshots of CleanMyMac as a visual quality bar. Match the polish, not the brand:
original name, logo, icons and copy.
## How to work
1. Design first, code later. Make 3 different UI concepts (light glass, dark neon, minimal)
as clickable HTML mockups. Show them to me, let me pick and give feedback, iterate.
Only then start the app.
2. Write the shared data contract before anything else: one `shared/types.ts` with every
type and the full IPC API between the Electron main process and the UI. Everything else
compiles against it.
3. Build in parallel with sub-agents, each owning its own files (no two agents edit the same
file): scanner services, system services (startup apps, installed apps, protection),
AI + settings, home screen, file screens, system screens, packaging.
4. After the build, run a separate SAFETY agent whose only job is to break every code path
that deletes, trashes, uninstalls or toggles something, and fix what it finds.
5. Then an integration agent: typecheck + build must be green.
6. Verify for real: run the UI in a browser with realistic mock data, then run the packaged
app on my machine read-only (scan, don't clean) and show me screenshots.
## Stack
- Electron (latest) + React + TypeScript + Vite. Main process bundled with esbuild (ESM),
preload bundled as CJS.
- Security: sandbox, contextIsolation, no nodeIntegration. The preload exposes only the typed
API. Main rejects IPC from any frame that isn't our own index.html.
External links: https only, opened in the system browser.
- Fonts bundled offline (no CDN at runtime). Strict CSP in production.
## Features
- Smart Scan home: big "X GB ready to reclaim" number, one Clean button,
a mini space map, and 4 live cards (Cleanup, Speed, Protection, Apps).
- Cleanup categories per OS:
- Windows: user temp, Windows temp, browser caches (Chrome/Edge/Brave/Firefox, every
profile), app caches, crash dumps, Windows Update downloads, dev caches (npm/pip),
Recycle Bin, old downloads (90+ days).
- macOS: ~/Library/Caches, logs, browser caches, Xcode DerivedData, dev caches, Trash,
old downloads.
- Space Map: glass bubbles sized by folder size, drill-down, a switch between Home and every
fixed drive (C:, D:…). Bubbles have physics: drag, throw, collide.
- Large Files, Duplicates (size → partial hash → full hash).
- Speed: startup apps with on/off toggles.
- Applications: real app icons, sizes, uninstall via the vendor's own uninstaller
(Windows) / move .app to Trash (macOS).
- Protection: read-only check of the built-in security (Defender/firewall, Gatekeeper/
XProtect/SIP) with a score. Say honestly that it does not replace an antivirus.
- AI assistant: the user picks Claude or ChatGPT and pastes their own API key (encrypted
with Electron safeStorage). The model only ever sees file names, paths and sizes —
never contents — and returns
Author original
Build "Cleanly": a beautiful, safe disk cleaner for macOS and Windows, from scratch.
I attached screenshots of CleanMyMac as a visual quality bar. Match the polish, not the brand:
original name, logo, icons and copy.
## How to work
1. Design first, code later. Make 3 different UI concepts (light glass, dark neon, minimal)
as clickable HTML mockups. Show them to me, let me pick and give feedback, iterate.
Only then start the app.
2. Write the shared data contract before anything else: one `shared/types.ts` with every
type and the full IPC API between the Electron main process and the UI. Everything else
compiles against it.
3. Build in parallel with sub-agents, each owning its own files (no two agents edit the same
file): scanner services, system services (startup apps, installed apps, protection),
AI + settings, home screen, file screens, system screens, packaging.
4. After the build, run a separate SAFETY agent whose only job is to break every code path
that deletes, trashes, uninstalls or toggles something, and fix what it finds.
5. Then an integration agent: typecheck + build must be green.
6. Verify for real: run the UI in a browser with realistic mock data, then run the packaged
app on my machine read-only (scan, don't clean) and show me screenshots.
## Stack
- Electron (latest) + React + TypeScript + Vite. Main process bundled with esbuild (ESM),
preload bundled as CJS.
- Security: sandbox, contextIsolation, no nodeIntegration. The preload exposes only the typed
API. Main rejects IPC from any frame that isn't our own index.html.
External links: https only, opened in the system browser.
- Fonts bundled offline (no CDN at runtime). Strict CSP in production.
## Features
- Smart Scan home: big "X GB ready to reclaim" number, one Clean button,
a mini space map, and 4 live cards (Cleanup, Speed, Protection, Apps).
- Cleanup categories per OS:
- Windows: user temp, Windows temp, browser caches (Chrome/Edge/Brave/Firefox, every
profile), app caches, crash dumps, Windows Update downloads, dev caches (npm/pip),
Recycle Bin, old downloads (90+ days).
- macOS: ~/Library/Caches, logs, browser caches, Xcode DerivedData, dev caches, Trash,
old downloads.
- Space Map: glass bubbles sized by folder size, drill-down, a switch between Home and every
fixed drive (C:, D:…). Bubbles have physics: drag, throw, collide.
- Large Files, Duplicates (size → partial hash → full hash).
- Speed: startup apps with on/off toggles.
- Applications: real app icons, sizes, uninstall via the vendor's own uninstaller
(Windows) / move .app to Trash (macOS).
- Protection: read-only check of the built-in security (Defender/firewall, Gatekeeper/
XProtect/SIP) with a score. Say honestly that it does not replace an antivirus.
- AI assistant: the user picks Claude or ChatGPT and pastes their own API key (encrypted
with Electron safeStorage). The model only ever sees file names, paths and sizes —
never contents — and returns
Questions
What is this ui motion prompt for?
It is a Claude Opus motion design brief for “Cleanly disk cleaner app demo with glassy UI, physics space map, and shader backdrop”. 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.