Building a Canvas Animation Generator with AI
How I built Company Canvas — a tool that turns any company name into a living brand animation using Claude AI and Three.js.
Building a Canvas Animation Generator with AI
What happens when you type “Spotify” into a text field and hit Generate? In about three seconds, you get a living, breathing canvas animation that captures the brand’s essence — colors, motion style, and energy — all generated by AI.
That’s Company Canvas, and this is the story of how I built it.
The Idea
I wanted a portfolio piece that wasn’t just another static page. Something that demonstrated real engineering: AI integration, creative coding, and product thinking all in one.
The concept: type a company name, let AI infer the brand identity (colors, industry, vibe), then render it as a real-time Three.js animation. No logos, no assets — just pure generative visuals.
Architecture Decisions
Why Astro + Cloudflare Workers
My portfolio already runs on Astro with GitHub Pages. Static, fast, zero cost. But AI generation needs a server — you can’t expose API keys in client-side code.
Cloudflare Workers solved this perfectly:
- Free tier covers thousands of requests/day
- Edge deployment means low latency worldwide
- Acts as a secure proxy between the client and Claude API
The architecture is simple: Astro serves the static frontend, the client POSTs to the Worker, the Worker calls Claude, and returns structured brand data.
Why Three.js with Orthographic Camera
For 2D-style animations, Three.js with an orthographic camera gives you the best of both worlds: GPU-accelerated rendering with the simplicity of 2D coordinates. No perspective distortion, easy to reason about positions, and you get access to the full Three.js ecosystem (particles, shaders, post-processing).
The alternative was raw Canvas 2D, but Three.js gave me particles with additive blending for free, which makes the tech-style animations pop.
The Animation System
I designed four animation styles, each mapped to different industries:
| Style | Industries | Visual Character |
|---|---|---|
| Particles | Tech, SaaS, AI | Dynamic particle fields with wave motion |
| Flowing | Health, Nature, Logistics | Organic sine curves that undulate |
| Geometric | Finance, Enterprise | Structured rings with orbital motion |
| Typographic | Media, Creative | Color tile grids with staggered pulses |
Each animation extends a BaseAnimation abstract class that handles setup, the 12-second seamless loop, and disposal. The factory pattern maps style strings to animation classes:
const registry: Record<string, new () => BaseAnimation> = {
particles: ParticlesAnimation,
flowing: FlowingAnimation,
geometric: GeometricAnimation,
typographic: TypographicAnimation,
};Making Animations Feel Alive
The secret sauce is in the parameters. Claude doesn’t just pick a style — it returns speed, density, and complexity values tuned to the brand. A fast-moving fintech gets high speed and density. A wellness brand gets slow, sparse, organic movement.
Every animation loops seamlessly every 12 seconds using modulo time: elapsed % LOOP_DURATION. This means the animation can run forever without drift or accumulating floating-point errors.
The Claude Prompt
Getting structured JSON from an LLM consistently is all about the prompt. Here’s the key insight: be extremely specific about the schema and give the model clear decision criteria.
The prompt tells Claude to return exact JSON (no markdown wrapping), specifies each field’s type and constraints, and includes a style selection guide mapping industries to animation types. For well-known companies, Claude uses real brand colors. For unknown names, it infers from the name and likely industry.
The result is remarkably consistent. Out of hundreds of generations, I’ve seen maybe two malformed responses — and those were handled by the error state.
What I Learned
AI as a creative partner works. The generated brand identities are often surprisingly good. Claude picks colors that feel right, writes taglines that capture the essence, and matches animation styles to industries with solid intuition.
Structured output from LLMs is reliable enough for production. With a well-crafted prompt and a clear schema, you can build real products on LLM-generated JSON. Just add validation and graceful error handling.
Three.js is overkill for some things and perfect for others. For a 2D particle system, it’s overkill. But the moment you want additive blending, thousands of animated objects, or 60fps with complex motion — it earns its bundle size.
The full source is on my GitHub. Try it yourself at gabriel-rodrigues.com/en/canvas.