Lottie Player

Plays the brand’s Lottie files — the symbol assembling, the \z/ cheering, the symbol becoming a place.

Preview

LottiePlayer

Symbol assembleOne shot — six Zs meet in the middle

SuccessDone, booked, sent — arms up

ControlledLottiePlayer

Symbol step — 60° clicks

The symbol becomes Jaipur

With reduced motion on, nothing plays by itself: each shows one still frame.

Usage

tsx

import { LottiePlayer, ControlledLottiePlayer } from "zostel-ui";

<LottiePlayer path="/brand/motion/zostel-symbol-assemble.json" loop={false} style={{ width: 120, height: 120 }} />
<LottiePlayer path="/brand/motion/zo-cheer.json" still={900} title="Done" />
<ControlledLottiePlayer path="/brand/places/lottie/zostel-to-jaipur.json" />

LottiePlayer

Prop	Type	Default	Description
`path`	`string`	—	The JSON’s URL — /brand/motion/*.json, /brand/places/lottie/zostel-to-<place>.json.
`animationData`	`object`	—	Or the JSON itself.
`loop`	`boolean`	`true`	Loop.
`autoplay`	`boolean`	`true`	Start on its own (never for reduced motion).
`speed`	`number`	`1`	Playback rate.
`still`	`number`	—	ms: the frame shown instead of playing for reduced motion (each file’s `still` in /brand/motion/index.json). Default: the end of a one-shot, the start of a loop.
`title`	`string`	—	What it shows, for screen readers; empty = decoration.
`onComplete`	`() => void`	—	When a one-shot ends.
`className / style`		—	On the container — give it a size.

path

Type: string

Default: —

The JSON’s URL — /brand/motion/*.json, /brand/places/lottie/zostel-to-<place>.json.

animationData

Type: object

Default: —

Or the JSON itself.

loop

Type: boolean

Default: true

Loop.

autoplay

Type: boolean

Default: true

Start on its own (never for reduced motion).

speed

Type: number

Default: 1

Playback rate.

still

Type: number

Default: —

ms: the frame shown instead of playing for reduced motion (each file’s `still` in /brand/motion/index.json). Default: the end of a one-shot, the start of a loop.

title

Type: string

Default: —

What it shows, for screen readers; empty = decoration.

onComplete

Type: () => void

Default: —

When a one-shot ends.

className / style

Type:

Default: —

On the container — give it a size.

ControlledLottiePlayer

Prop	Type	Default	Description
`showControls`	`boolean`	`true`	Play/pause, restart, progress and speed.
`…`	`LottiePlayerProps`	—	Everything above.

showControls

Type: boolean

Default: true

Play/pause, restart, progress and speed.

…

Type: LottiePlayerProps

Default: —

Everything above.

The brand’s animations

/brand/motion: zostel-symbol-assemble (splash, once), zostel-symbol-step (loader), zostel-symbol-breathe (idle), zostel-pull-refresh, journey-path, place-arrive, zo-infinity (Zo loader), zo-cheer (success), zo-chill (empty), zo-shrug (error), z-cheer, zo-becomes. Every place also has /brand/places/lottie/zostel-to-<place>.json. Built by brand/tools/build_motion.py and build_places.py.