#lottie command imports Lottie animation files into your app. Lottie animations are lightweight, resolution-independent, and look sharp on every screen size — a far better option than GIFs for app animations.
What It Does
When you use#lottie, the AI:
- Adds the Lottie JSON animation file to your project
- Automatically adds the Lottie Swift package as a dependency (if not already present)
- Creates a view that plays the animation where you describe
Nativeline automatically adds the Lottie package to your project when you use
#lottie for the first time. You don’t need to set up any dependencies manually.Supported Formats
Where to Get Lottie Animations
How to Use
1
Type #lottie in the chat
Type
# and select lottie from the toolkit popover.2
Select your animation file
The file picker opens, filtered to JSON files. Choose the Lottie animation you want to add.
3
Describe where to show it
The file appears as an orange chip below the input. Tell the AI where and how to display the animation.
4
Send your message
Press Enter. The AI adds the Lottie dependency (if needed), bundles the animation, and displays it as described.
Example Prompts
Why Lottie Over GIFs?
Common Use Cases
Loading indicators
Loading indicators
Replace boring spinners with branded loading animations. Play them on loop while content loads.
Empty states
Empty states
Make empty screens feel alive with a subtle animation instead of a static illustration.
Success confirmations
Success confirmations
Play a checkmark or confetti animation when a user completes an action. These small moments of delight make your app feel polished.
Onboarding illustrations
Onboarding illustrations
Animate your onboarding illustrations to better explain features and hold user attention.
Related
Toolkit Overview
See all available # commands and how the toolkit works.
#image — Add Images
Import static images into your app’s asset catalog.