LottieFiles

Promptfree, for everyone, and the only version there is

Copy the prompt for Claude CodeCopy the prompt for CodexCopy the prompt for Cursor

Copy

Build me the animation pipeline I actually need instead of paying for LottieFiles: optimise, host, preview and play JSON animations, on my own infrastructure.

Read this first: the format and the players are open, and the honest thing you are giving up is the marketplace — thousands of ready-made animations for people who do not animate. If that is why you pay, keep paying, or buy them individually. What is entirely replaceable is the hosting, the optimisation and the preview workflow.

STACK
- Node 20+ with Fastify, server-rendered HTML
- SQLite through better-sqlite3, WAL mode
- lottie-web or the dotLottie player for rendering; do not write a renderer
- puppeteer only for generating preview images and video, on a worker
- Caddy in front

THE DATA MODEL
- animations: id, uid, name, folder_id, source_json_path, optimised_json_path, dotlottie_path, width, height, frame_rate, in_point, out_point, duration_ms, bytes_source, bytes_optimised, features_json, created_by, created_at
- versions: id, animation_id, version, json_path, bytes, note, at — an animation embedded in a shipped app must never change under it
- previews: id, animation_id, kind, path, width, bytes — a still, a GIF, an MP4, a WebP
- themes: id, animation_id, name, colour_map_json — the same animation in your brand colours
- usages: id, animation_id, path, referrer_host, at — where each one is actually used
- tags, folders, and FTS over names and tags

OPTIMISATION, WHICH IS THE REAL WORK
- Round every numeric value to a sensible precision. Exported files routinely carry twelve decimal places on every keyframe, and cutting to three is often half the file with no visible difference
- Remove hidden layers, empty groups, unused assets and expressions that resolve to constants
- Deduplicate identical shapes and image assets by hash
- Convert embedded base64 images to referenced files, or downscale them — an embedded PNG is usually most of the weight
- Detect and report what cannot be optimised: expressions, merge paths, auto-orient, time remapping. Each of these is also a rendering risk, and the report is more valuable than the saving
- Always show source and optimised side by side, playing, at the same size. Optimisation you have not looked at is optimisation you have not verified
- Report the saving honestly: bytes before, bytes after, and gzipped, because that is what the network actually carries

COMPATIBILITY, WHICH IS WHERE THIS BITES
- The web player, the iOS player and the Android player do not support the same feature set. An animation that looks perfect in a browser can render blank on a phone
- Scan every uploaded file for the features that differ — expressions, mattes, merge paths, gradients on strokes, effects — and flag them per platform with a plain warning
- That check is the single most useful thing this tool can do, and it is the thing designers find out about after shipping

DELIVERY
- Serve the JSON gzipped or brotli-compressed with immutable cache headers and a content hash in the URL
- dotLottie output, which is a zip of the animation plus its assets and is dramatically smaller over the wire
- A tiny embed snippet, and a web component wrapping the player with sensible defaults: lazy, respecting `prefers-reduced-motion`, and pausing when off-screen
- Respecting reduced motion is not optional. Some people get genuinely unwell from motion, and an animation that ignores the setting is doing that to them

PREVIEW AND HANDOFF
- A player page per animation with a scrubber, speed control, loop settings, a background colour switcher and a size slider
- Renders as still, GIF, MP4 and animated WebP, generated by a worker — for the places a JSON animation cannot go, like an email or a marketplace listing
- A theme: map the colours in the file to your palette and store the result as a variant, so one animation serves a light and a dark interface
- A shareable read-only link per animation for review, with comments

THE LIBRARY
- Folders, tags, search over names and tags
- Usage tracking, so an animation nobody references can be deleted with confidence
- Versions, with the shipped version pinned and never overwritten

OPERATIONS
- .env: DATABASE_PATH, STORAGE_PATH, BASE_URL, SESSION_SECRET, MAX_UPLOAD_BYTES
- Migrations on boot, each once
- The render worker is CPU-heavy and needs a concurrency cap
- Nightly backup of the database and the source files; optimised outputs are regenerable
- Health endpoint that optimises a small fixture

WHAT MATTERS MOST
The optimiser and the compatibility scan. Build precision rounding with a side-by-side preview first, then the per-platform feature warnings. Those two together are worth more than the hosting, and they are what stops an animation shipping blank on half your users' phones.

Give me the repository, the optimiser, the web component, migrations, .env.example, and a README with deploy steps behind Caddy and the platform feature table.