Inspiration
We know that nowadays, if you aren't on TikTok or Reels, you aren't selling. But for the millions of small businesses on Shopify, video marketing is a nightmare. They are busy shipping orders; they don't have time to learn, hire editors, or hundreds of photos to find that one perfect one.
But small Shopify sellers are stuck with expensive editors, steep learning curves, or generic, uninspiring templates.
We asked ourselves: What if you could paste a product URL and generate a scroll-stopping ad in seconds?
Thatβs Clippify.
What it does
Paste a product URL β Get a professional video ad in seconds.
- π Smart Scraping: Extracts the title, price, description, and high-res images from any product URL.
- π£οΈ Professional Voiceover and Captions: ElevenLabs generates style-matched voices that sync perfectly to the captions generated by the Gemini API.
- π¬ Dynamic Animations: Features four different text styles (Impact, Glitch, Minimal, Typewriter) with Ken Burns motion applied to every image.
- π€ AI Director: Edit the final video using simple commands like "make it luxurious," "change text to red," or "speed it up."
How we built it
| Layer | Technology |
|---|---|
| Frontend | Next.js 16, React, Typescript, Tailwind CSS |
| Video Engine | Remotion 4.0 |
| AI Captions | Google Gemini 3.0 Flash |
| Voice | ElevenLabs Turbo v2.5 |
| Scraping | Cheerio + Shopify API |
The core of our architecture is the VideoManifestβa single JSON document that describes every caption, clip, audio track, and styling element. This manifest flows through our entire pipeline and is mutable, allowing the AI Director to modify the video state in real-time based on user prompts.
For animations, we utilized Remotion's spring physics to create natural, fluid motion, with 8 different Ken Burns patterns cycling through the visual assets to keep retention high.
Challenges we ran into
- Audio CORS Issues: External music URLs were often blocked by browser security policies during rendering.
- Solution: We solved this by hosting royalty-free tracks locally within the application (music without lyrics).
- Caption Synchronization: Text was appearing slightly before the voiceover or after.
- Solution: We fine-tuned the frame timings (45-55 frames per caption) to reduce the delay and ensured the TTS script matches the caption order exactly.
Accomplishments that we're proud of
- π Speed: URL to finished video in under 30 seconds.
- β¨ Quality: Professional-grade animations that rival human-edited agency content.
- π£οΈ UX: A natural language editing interface that intuitively understands creative direction.
What we learned
- Remotion: Using React for video exposes you to true programmatic content creation. I realized how much a simple framework/library can do.
* Prompt engineering is architecture: Structured prompts with clear examples are just as important as the code itself for reducing errors.
What's next for Clippify
- π€ One-click MP4 export & social sharing.
- π± Automated pipelines to auto-post ads to company's Tiktok/Instagram/Social Media
- πΌοΈ Custom branding and logo overlays.
- π Full Shopify App Store integration.
- π Multi-language support for global sellers.
Built With
- elevenlabs
- gemini
- javascript
- next.js
- react
- remotion
- shopifyapi
- typescript

Log in or sign up for Devpost to join the conversation.