HookGen: Viral Video Hook Playground

Interactive playground for short-form creators to build viral video hooks using 10 psychological frameworks, real-time metrics auditing, and Google Gemini AI polishing.

Comment

💡 Inspiration

With the rise of short-form video content on TikTok, Instagram Reels, and YouTube Shorts, creators are constantly fighting the algorithm for viewer attention. Data shows that the first 3 seconds of a video (the hook) determine over 70% of its viral potential. However, writing engaging psychological hooks is tough, and automated tools charge expensive subscription fees. We wanted to build a beautiful, developer-friendly, serverless playground that helps creators write viral hooks for free, running entirely in their browsers.

🚀 What it does

HookGen is a serverless playground for short-form creators. It allows users to:

  1. Draft Hooks: Select from 10 interactive copywriting frameworks (curiosity gap, pain bridge, negative framing) and fill in placeholders.
  2. Analyze in Real-Time: Run an offline heuristics engine that grades hooks from 0-100 on Curiosity, Clarity, Urgency, and Emotion, showing an interactive letter grade badge (A+ to F).
  3. Visual Mockup: Preview the hook in real-time as animated, word-by-word kinetic captions inside an iPhone screen simulator.
  4. AI Polish: Polish drafts instantly with Gemini AI, retrieving three high-CTR copywriting suggestions directly.

🛠️ How we built it

We wanted a lightning-fast, zero-overhead stack:

  • Frontend: React + Vite, styled with custom CSS variables (frosted glassmorphism, responsive grid systems, and floating ambient background glows).
  • Intelligence: Integrates the Google Gemini API (Free tier) directly client-side, using universal model definitions.
  • Grading Logic: Built a custom math-based heuristic evaluator (src/utils/evaluator.js) to score hooks on length, word-counts, power adjectives, and command verbs instantly.

🧠 Challenges we faced

During testing, we noticed the Gemini model would occasionally return conversational filler text or experience temporary 503 overloads. We solved this by:

  1. Writing a bulletproof regex parser to isolate and extract clean JSON arrays [...] from the AI's response.
  2. Coding an automatic API model fallback chain. If gemini-flash-latest returns a 503 (Overloaded) or a 404, the app catches it instantly and resubmits to gemini-flash-lite-latest (1.5 Flash-8B), guaranteeing 100% uptime for the judges!
  3. Designing native dark-mode color overrides for OS dropdown popups to keep elements high-contrast.

🎓 What we learned

We learned how to design highly robust frontend error boundaries, handle rate-limit failovers with dual-model fallback configurations, and build high-performance CSS animation systems that keep interfaces responsive.

🔮 What's next for HookGen

We plan to introduce:

  • Voice Synthesis Preview: Letting creators hear their hook read aloud by AI voices.
  • Export as Video: Generating and downloading the kinetic reel directly as an MP4 clip.
Share this project:

Updates

Submission history