Individual skill

lottie-tab

An animated bottom-tab indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.

recipes/lottie/lottie-tab/SKILL.md

Read pinned source

Source commit b016900d9ee92fc2d3e4dc520359cc8999d2ed4e

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 10, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,062
Repository last updated: Jul 7, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai-agent Repository topic
animation Repository topic
claude Repository topic
design-tools Repository topic
motion-design Repository topic
motion-graphics Repository topic
webgl Repository topic
figma-motion-alternative Repository topic
engineering Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 1,601 bytes
animation.jsonasset · 3,507 bytes
preview.htmlasset · 854 bytes
recipe.motion.yamlasset · 1,545 bytes

Read excerpt


# Lottie · Tab

An animated bottom-tab indicator — Lottie JSON. Lottie JSON from [spemer/lottie-animations-json](https://github.com/spemer/lottie-animations-json)
(MIT). Part of [motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.

## When to use it
- Portable JSON motion identical on web & app; icon/control micro-animations (incl. After Effects / Jitter exports).

## When NOT to use it (restraint)
- When a pure-CSS effect would do — don't ship the Lottie runtime for a simple fade.

## How to apply
1. Include `lottie.min.js` (runtime) and `animation.json`.
2. `lottie.loadAnimation({ container, renderer:'svg', loop:true, autoplay:false, path:'animation.json' })`; start on intent / guard reduced-motion.