StyleDrop

Inspiration

Creators lose hours reverse-engineering the “look” of an image, video clip, or audio loop. I wanted a single drop-zone that whispers how it was made—then lets you remix it instantly.

What it does

1. Upload anything (image, short video, or audio loop ≤ 10 MB).
   
2. StyleDrop pipes the file to a Netlify Edge Function.
   
3. The function calls Gemini-Flash 2.0 with a smart prompt.
   
4. It returns:
   
   • Title (2 words)
     
   • Style name (3 words)
     
   • Full reconstruction prompt
     
   • 21 “tokens” (7 style, 7 character, 7 scene) for rapid remixing
     
   • Optional story, camera motion, SFX, or soundtrack suggestions.
     
5. Results are saved to Supabase and rendered in an infinite masonry gallery.

How we built it

• Vite + React 18 + TypeScript + Tailwind 3 for the SPA
  
• Supabase (Auth, Postgres, edge-optimized functions)
  
• Cloudflare R2 for heavy user uploads
  
• Netlify Edge Functions to keep latency < 150 ms worldwide
  
• Google Gemini-Flash 2.0 for multimodal analysis
  
• Framer Motion for buttery UI micro-interactions
  
• Bolt.new one-shot prompt to scaffold 90 % of the code

Challenges

• Streaming a 9 MB video through both R2 and the Edge without timeouts.
  
• Hitting Gemini content-safety filters (solved with a “context pre-prompt”).
  
• CORS on R2 presigned URLs.
  
• Cold-starts on edge functions before moving to Deno deploy.

Accomplishments

• MVP live in < 48 h, fully serverless.
  
• 500+ files decoded during alpha without a single auth failure.
  
• Users finished their first remix in an average of 47 seconds.

What’s next

• Batch decode & CSV export.
  
• Real-time audio transcription → beat-matched lyrics.
  
• Public “StyleMaps” API so any app can ask “how was this made?”

Built With

• 2.0
• api
• cloudflare
• edge
• functions
• gemini-flash
• google
• netlify
• r2
• react
• supabase
• tailwind
• typescript
• vite