The control bar

<LottieControls> is the whole bar: play, stop, a seek bar, a readout, loop, direction, speed, and fullscreen.

import { Lottie, LottieControls, LottieDisplay } from "lottie-react";export function ControlBar() {  return (    <Lottie src="/anim.json" autoplay loop>      <LottieDisplay />      <LottieControls />    </Lottie>  );}

Render it among <Lottie>'s children and it drives that animation. From the hook, pass the instance: <LottieControls lottie={lottie} />.

Seconds instead of frames

unit="seconds" switches the readout, shown to one decimal:

import { Lottie, LottieControls, LottieDisplay } from "lottie-react";export function UnitSeconds() {  return (    <Lottie src="/anim.json" autoplay loop>      <LottieDisplay />      <LottieControls unit="seconds" />    </Lottie>  );}

How it behaves

While the animation is loading or in error, every control is disabled and the readout shows zeros.

Below about 411px of the bar's own width, the stop button, readout, direction and speed step aside so the seek bar stays wide enough to drag:

import { Lottie, LottieControls, LottieDisplay } from "lottie-react";export function NarrowBar() {  return (    <Lottie src="/anim.json" autoplay loop style={{ width: 288 }}>      <LottieDisplay />      <LottieControls />    </Lottie>  );}

How it looks

The bar draws in currentColor and sizes in em, so it takes your text's color and scale. className adds to the library's class instead of replacing it, and every rule ships at zero specificity, so restyling works here like everywhere else.