Technical Specification: Free Online Lottie Animation Player and Colorizer

Overview

A high-performance, browser-based utility for developers and designers to preview and modify Lottie JSON files. The tool allows users to upload local files, manipulate color hex codes dynamically, adjust playback speeds, and download the modified JSON payload without any server-side interaction.

Core Features

• Drag-and-Drop Upload: Seamless ingestion of .json Lottie files.
• Real-time Palette Extraction: Automatically scans the JSON structure to identify all used colors.
• Dynamic Color Injection: UI controls to update specific color instances globally within the animation.
• Playback Controls: Play, pause, loop toggle, and speed adjustment (0.5x to 2x).
• Instant Export: Download the updated JSON structure with applied color changes.
• Responsive Canvas: Adaptive preview area that scales to the device screen size.

Technical Architecture

• Framework: Vanilla JavaScript, HTML5, and CSS3. No build step or heavy frameworks.
• Rendering Engine: Utilize the lottie-web (Bodymovin) library via CDN for high-fidelity rendering.
• State Management: All application data (current JSON object, color palette, playback status) is held in global JavaScript memory objects.
• File Handling: Use the FileReader API to parse and display files instantly.
• No-Storage Policy: Explicitly forbidden from using localStorage, sessionStorage, or cookies. The app must function as a stateless transient tool.

UI/UX Design

• Aesthetic: Clean, professional "SaaS" light-mode design. Use a palette of crisp white backgrounds (#ffffff), soft neutral greys (#f3f4f6), and a primary blue (#2563eb) for action buttons.
• Layout:
  • Header: Simple, clean title indicating the function.
  • Main Area: A split-pane layout. Left sidebar for color settings and animation controls. Right area (or top on mobile) for the Lottie preview canvas.
  • Controls: Intuitive sliders for speed and color pickers for palette editing.
• Animations: Subtle transition states (e.g., button hover effects with transition: all 0.2s ease) to provide professional feedback.

Constraints & Directives

1. NO EXTERNAL PERSISTENCE: Do not attempt to store user data. The tool must be self-contained.
2. SANDBOX COMPATIBILITY: Avoid alert(), prompt(), or any blocking browser dialogs. Build custom UI modals for user input.
3. LIGHT MODE ONLY: Strictly enforce a light-mode color scheme. No dark mode toggles or dark-themed components.
4. PERFORMANCE: Ensure the Lottie library is loaded asynchronously to prevent main-thread blocking on large animation files.
5. RESPONSIVE: Use CSS Grid and Flexbox to ensure the control panel and preview canvas stack vertically on mobile and side-by-side on desktop.
6. CLEAN CODE: All CSS should be scoped to prevent style bleed. Avoid global namespace pollution.