Kinetiq
Your logo, alive: three animations and code you can paste anywhere
For: Small businesses that want their logo to move on their site, in email and in video; designers and agencies doing it for their clients
Kinetiq turns a static logo into an animation that fits it. It splits the logo into its parts, asks Claude what the logo depicts, and picks a Signature motion that thing would make (a leaf sways, a rocket launches, a heart beats), plus two alternatives at different energy levels.
You can upload an SVG, PNG, JPG or WebP, or paste your website's address and let Kinetiq find the logo there. Every animation ends on the exact original logo, so the brand is never distorted.
Exports are HTML and CSS, React and timeline JSON, MP4 and WebM video, GIF for email signatures and Lottie for apps. A Live Logo serves the animation on your own site with one line of code, so you can change it any time without a redeploy.
Kinetiq is part of our website service: with a migration, your logo can come alive on the new site, billed on the same invoice.
13
Signature motions
12
library recipes
3
animations per logo
What it does
Upload a logo, or fetch it from your website's address
Claude names what the logo depicts and picks a fitting Signature motion
Three animations to choose from: Signature, plus Subtle, Dynamic or Bold
Effects: wipe and iris reveals, shine, glint, sparkles, colour sweep, seasonal snow
Exports: HTML + CSS, React, timeline JSON, MP4 and WebM video
Live Logo: one snippet on your site, plays only on your domains, change it without redeploying
GIF for email signatures and Lottie for apps, kept in sync with the Live Logo
A/B tests between two animations, with no cookies and no stored visitor data
How we architected it
- Next.js 14
- TypeScript
- React 18
- Supabase
- Stripe
- Anthropic Claude
- Mediabunny
- imagetracerjs
- Vercel
- 01
Ingest in the browser: the SVG is parsed and sanitised, wordmarks split into letters, every part measured
- 02
Raster logos are traced into shapes (palette from solid pixels, background removed, anti-aliasing resolved before tracing)
- 03
Understand: Claude sees the logo and its parts and picks one of 13 hand-tuned Signature motions; anything unusable falls back to shape rules
- 04
Generate: Signature motions and 12 library recipes build seeded timelines, ranked into three energy tiers
- 05
Logo from a URL goes through a locked-down fetch: http(s) on ports 80/443 only, every DNS answer checked against private ranges, caps on size, time and redirects
- 06
Purchases are recorded only from Stripe; licensed code is built on the server from the stored logo and every export is stamped with a signed licence ID
- 07
Live Logo renders in a shadow root so the host site's CSS can't disturb it; views are counted per day without cookies or IP addresses
- 08
Runs as its own Next.js app, mounted inside number7even.com at /kinetiq
Want something built like this?
Every build runs the same five gates: spec, architect, build, review, ship. It starts with a 48-hour audit.