VibClip

• 

  main_page

• 

  Model_API_Configuration

Inspiration

I have always loved building things with code, but animation was the one area that always felt heavier than it should. Whenever I had an idea for a scene, I found myself fighting timelines , keyframes, formats, and tools instead of actually creating. I knew what I wanted to show, yet turning that idea into motion often took more time than the idea itself.

I realized that even though AI can generate great code and high-quality pixels, something important is still missing: true AI-native motion design. That’s why I built VibClip as a “Creative Director in a box,” a system that thinks in timing, flow, and visual storytelling, not just text prompts.

What it does

With VibClip, creators don’t start with complicated software. They start with words and logic . You describe what you want, and the system turns it into motion using JavaScript and an AI-driven workflow that behaves more like a creative director than a code generator. Instead of dumping scripts, VibClip plans animations: defining the vibe, the pacing, the transitions ,analyse local assets, and only then assembling everything into modular scenes.

How I built it

VibClip is built as a web application using a real-time canvas rendering pipeline in JavaScript. The system uses an AI workflow (powered by Gemini) to transform user prompts into animation logic instead of raw text output.

On the frontend, the UI lets users edit scenes visually, tweak properties, and preview changes instantly. The Model handles prompt processing, scene planning, and asset management so the creative flow stays smooth.

The goal while building VibClip was to make the technology invisible and keep the creator focused on motion and storytelling.

VibClip is built on a “Code-as-Video” architecture:

-The Brain : Powered by gemini-3-flash-preview, leveraging its large context window to ingest a structured API cookbook that describes our animation primitives and scene graph.

-The Vibe :Through Thought Signatures (implemented using the Google Gen AI SDK chat feature), the agent plans scenes using semantic blocks (lighting, mood, pacing, and narrative arc) before emitting executable animation code.

-The Engine :A performance-focused React frontend using HTML5 Canvas for real-time rendering in the browser.

Challenges I ran into

One of the biggest challenges was making AI output feel cinematic instead of random. Generating animation logic from text is easy, but generating good motion with pacing, composition, and flow is much harder. Early versions had scripts that drifted out of sync with the underlying assets. The Fix: I used a bi-directional "Source of Truth" system. By enforcing rigid metadata headers variables for scripts, Another challenge was performance. Executing complex animations in real time requires careful control of rendering. I found that relying on external WASM library's may create some performance instability, so I migrated to a native JavaScript solution to ensure efficient memory usage and smooth scene orchestration.

Designing a system that works for both beginners and advanced users was also tricky. VibClip had to be simple enough to use with just a prompt, but flexible enough to allow deeper control for people who want to customize scenes manually.

Accomplishments that I am proud of

• Turning natural language into structured animation timelines instead of static scripts.
• Building a real-time interactive canvas engine that feels responsive and playful.
• Creating a workflow where users think in scenes and vibes instead of technical steps.

What I learned

• System Prompts as SDKs: For complex orchestration tasks, treating the system prompt as a strict interface contract is often more effective than fine-tuning.

What's next for VibClip

• Gemini Live Integration: Real-time voice directing ("Make the logo bigger and more energetic!") during live playback.
• Complex Asset Pipeline: Deepening integration with other Google's models (like Nano Banana) to create complex assets on the fly , and adding advanced video processing libraries to handle multi-layered overlays .
• Cinematic Community Recipes: A public library of "Motion Presets" that the agent can learn, mix, and evolve over time.

Built With

• antigravity
• gemini3api
• html5canvas
• react
• typescript
• vite