Lottie Theme Studio
Turn a dark-theme Lottie animation into a light one — with visual colour identification, an auto-proposed opposite theme and batch processing. No After Effects.
Your files are never uploaded, and there is no account to make.
Click what you mean
A click returns the whole stack under the pointer, not one guess. Invisible overlays, gradient masks and hit-boxes are listed with their real opacity, so nothing has to be guessed at and no modifier key is needed to reach the layer underneath.
Gradients that fade into the page
Alpha ramps live in the same array as the colours and no other tool shows them. A ramp reaching zero is a mask dissolving into the backdrop — invert it and you get a dark halo on a white page. Here you can see it, edit it, and the theme generator knows.
A theme worth starting from
Lightness flips in OKLCH so hues survive: a green comes back a darker green, not magenta. Brand colours are protected rather than inverted, and text is checked against WCAG. It is a draft you correct, and it tells you why it chose what it chose.
Bitmaps too
Embedded PNGs are dark like everything else. They are recoloured with the same map, blended by distance in OKLab with no threshold anywhere — so antialiased edges stay smooth — and alpha is never touched.
The whole folder at once
Name your groups once, then apply the theme to every file with a preview grid. Where a file has a different slot structure it is processed with the parts that travel and says so, instead of being silently mangled or silently skipped.
Same core everywhere
The browser, the CLI and the MCP server are thin shells over one package. A person clicking and a script in CI change a file identically, which is the only way the two can be trusted together.
Clone it, open it with an AI agent, and hand it the whole folder
Everything here works in the browser, on one file at a time, with you deciding each colour. Run the project locally instead and an agent works through the same core over an MCP server — with two things this page cannot give it: it can look at what it rendered, and it can reach the colours no palette lists.
It looks at its own work
The agent renders what it changed, on the background the animation will sit on, and looks. A gradient fading into the backdrop is correct in the JSON and a dark halo on the page — nothing but looking catches that.
It reaches colours no palette shows
A striped PNG baked into the file, the colour carried by a Drop Shadow effect. Both are invisible on the theme they were drawn for and obvious on the other one, and neither appears in any palette — including this one.
It samples instead of guessing
Give it the screenshot of the page the animation has to match. It reads the exact colours out of the pixels and checks its plan against them before writing anything, rather than typing a hex that is a shade or two off.
It does the whole folder
One edit set across every file, each one previewed, with the mismatches named instead of silently skipped. The same core the editor uses, so a file it converts and a file you convert come out identical.
git clone https://github.com/ITalik-gr/lottie-theme pnpm install && pnpm dev # the editor claude # the agent, already wired to this folder
Then: “make light versions of everything in lotties/, match them to this screenshot, and show me the ones you were unsure about”. Run npx lottie-theme-sync as well and the agent and the editor share one session — its changes appear in your undo stack, one keystroke from being rejected.