achieving-lottie-parity

Diagnose Lottie-to-Popkorn rendering and animation parity issues.

19|Updated Jul 8, 2026
One-click install
npx skills add https://github.com/ayarse/popkorn --skill achieving-lottie-parity
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: achieving-lottie-parity
Source: https://github.com/ayarse/popkorn/tree/main/.claude/skills/achieving-lottie-parity
Command: npx skills add https://github.com/ayarse/popkorn --skill achieving-lottie-parity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers determine why a Lottie file renders incorrectly after conversion to Popkorn, distinguishing converter defects, player bugs, deliberate skips, target gaps, and documented limitations before making changes.

Core Features & Use Cases

  • Systematic Triage: Compare thorvg, lottie-web canvas, source JSON, and converted CSS to classify rendering and animation discrepancies.
  • Measurement-Driven Debugging: Use conversion validation, feature inventories, frame-accurate harness comparisons, sampled motion curves, and isolation experiments to identify root causes.
  • Parity Implementation Guidance: Apply established converter and player fix patterns, including animated channel unions, warning requirements, compositor reuse, runtime ordering, serializer updates, regression tests, documentation, and examples.
  • Use Case: When an imported Lottie has incorrect gradients, opacity, mattes, timing, or effects, follow the playbook to locate the responsible layer, implement the smallest consistent fix, and verify it against the project’s parity and corpus standards.

Quick Start

Use the achieving-lottie-parity skill to investigate the rendering mismatch in the specified Lottie file, classify its cause, implement the appropriate fix, and report verification evidence honestly.

Frequently Asked Questions about achieving-lottie-parity

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix a Lottie animation that renders incorrectly after conversion?

Lottie rendering mismatches after conversion are diagnosed by comparing the source JSON, reference players like thorvg and lottie-web canvas, and converted CSS to classify discrepancies as converter defects, player bugs, or deliberate skips. Apply established fix patterns, update serializers, and verify with regression tests and corpus standards.

Why does my Popkorn output have missing gradients or opacity compared to the original Lottie?

Popkorn output missing gradients or opacity compared to the original Lottie often stems from converter defects, missing DSL properties, or target gaps. Conduct source-JSON analysis and use conversion validation and feature inventories to isolate the responsible layer and implement the smallest consistent fix.

What is the best way to debug lottie2popkorn conversion bugs?

The best way to debug lottie2popkorn conversion bugs is measurement-driven debugging using frame-accurate harness comparisons and sampled motion curves. Compare against reference players, preserve warnings, write focused regression tests, and update serializers and documentation to ensure animation parity.

How do I verify Lottie parity fixes and avoid regressions?

To verify Lottie parity fixes and avoid regressions, use frame-accurate harness comparisons and isolation experiments to confirm the correction. Preserve existing warnings, write focused regression tests, update the serializer, and honestly report verification evidence from corpus or browser testing.

When should I treat a Lottie rendering discrepancy as a deliberate feature skip rather than a bug?

A Lottie rendering discrepancy should be treated as a deliberate feature skip rather than a bug when systematic triage against thorvg and lottie-web confirms the missing property is a documented limitation or target gap. Preserve warnings in the output and update documentation to reflect the intentional skip.