Dribbble Asset Extractor

A lightweight, browser-based utility designed to extract raw video (.mp4) and image CDN links directly from Dribbble shots.

This tool was specifically built to bypass aggressive iOS Safari media player hijacks, allowing product designers to quickly grab reference motion work and save it natively to their device's Photos or Files app without relying on Web Inspector.

🔗 Live Demo

🚀 Features

• Direct Extraction: Paste a standard Dribbble URL to instantly fetch the underlying raw asset.
• Smart Detection: Automatically recognizes if a pasted link is already a raw CDN URL and routes it directly to the previewer.
• iOS Optimized: Replaces complex background downloading with a simple "Open File" native handoff, allowing the standard iOS "Long-press to save -> Download Linked File" functionality to work uninterrupted.
• No Build Step: Pure Vanilla JavaScript and HTML, styled with Tailwind CSS via CDN for instant deployment.

🛠️ Tech Stack

• Frontend: HTML5, Vanilla JavaScript
• Styling: Tailwind CSS (via CDN)
• Proxy Routing: Multiple fallback proxies to bypass strict CORS and bot-protection
• Hosting: Netlify (Continuous Deployment)

📱 The iPad Development Workflow

This project is optimized to be built, updated, and deployed entirely from an iPad without needing a local terminal or traditional IDE.

Continuous Deployment

1. Hosted on Netlify.
2. Connected to this GitHub repository.
3. Any commits pushed directly via github.dev (the browser-based VS Code environment) automatically trigger a production build, updating the live site within seconds.

📖 Usage Instructions

1. Open dribbble-extractor.netlify.app in Safari.
2. Paste a Dribbble Shot link (e.g., https://dribbble.com/shots/...) or a direct .mp4 link into the input field.
3. Tap Extract.
4. Once the preview loads, long-press the Open File button.
5. Select Download Linked File to save the raw asset natively to your device.

👨‍💻 Author

Bamiboy | Senior Product Designer
GitHub Profile