Lottie Player
Renders programmatically generated Lottie animations using lottie-web. Two variants: a basic LottiePlayer and a ControlledLottiePlayer with play/pause, speed, and progress controls. 23 built-in animation generators included.
Preview
LottiePlayer (Basic)
Logo AssemblyOne-shot, no controls
Bird FlightLooping
ControlledLottiePlayer (With Controls)
Speed:
Speed:
Usage
tsx
import {
LottiePlayer,
ControlledLottiePlayer,
createLogoAssemblyAnimation,
} from "zostel-ui";
const data = createLogoAssemblyAnimation();
// Basic player
<LottiePlayer animationData={data} loop={false} autoplay />
// With controls
<ControlledLottiePlayer
animationData={data}
loop
autoplay
showControls
/>LottiePlayer Props
| Prop | Type | Default | Description |
|---|---|---|---|
animationData | object | required | Lottie JSON animation data. |
loop | boolean | true | Whether to loop the animation. |
autoplay | boolean | true | Auto-start the animation on mount. |
speed | number | 1 | Playback speed multiplier. |
onComplete | () => void | - | Callback when animation completes (non-looping). |
className | string | "" | Additional CSS classes. |
style | CSSProperties | - | Inline styles (set width/height). |
animationDataType:
objectDefault: required
Lottie JSON animation data.
loopType:
booleanDefault: true
Whether to loop the animation.
autoplayType:
booleanDefault: true
Auto-start the animation on mount.
speedType:
numberDefault: 1
Playback speed multiplier.
onCompleteType:
() => voidDefault: -
Callback when animation completes (non-looping).
classNameType:
stringDefault: ""
Additional CSS classes.
styleType:
CSSPropertiesDefault: -
Inline styles (set width/height).
ControlledLottiePlayer Props
| Prop | Type | Default | Description |
|---|---|---|---|
showControls | boolean | true | Show play/pause, restart, speed, and progress controls. |
showControlsType:
booleanDefault: true
Show play/pause, restart, speed, and progress controls.
Plus all LottiePlayer props above.
Available Animations
tsx
// 23 built-in generators:
createLogoAssemblyAnimation()
createLogoPulseAnimation()
createLogoRotateAnimation()
createLogoDrawAnimation()
createIconBounceAnimation(color?)
createStaggeredRevealAnimation(wordCount?, color?)
createWaveAnimation()
createCompassSpinAnimation()
createCampfireAnimation()
createTreeSwayAnimation()
createSunRaysAnimation()
createBirdFlightAnimation()
createMountainParallaxAnimation()
createGondFlowAnimation()
createKhovarPulseAnimation()
createRainAnimation()
createSnowAnimation()
createLoadingSpinnerAnimation()
createConfettiBurstAnimation()
createPathDrawAnimation()
createBackpackBounceAnimation()
createStarTwinkleAnimation()
createZManFlyingAnimation()