Lottie Animation Demo

Lightweight, scalable animations for the Mediar website

Basic Animations

AI Robot

Auto-playing, looped

Success Check

Perfect for confirmations

AI Chat

Conversational AI indicator

Scroll-Triggered Animations

These animations start playing when they come into view (scroll down)

Speed Variations

0.5x Speed

Slow motion

1x Speed

Normal

2x Speed

Fast

How to Use

import { LottieAnimation, AnimatedLottie } from "@/components/lottie-animation";

// Basic usage
<LottieAnimation
  src="https://lottie.host/xxx/animation.lottie"
  className="w-40 h-40"
/>

// Scroll-triggered
<AnimatedLottie
  src="https://lottie.host/xxx/animation.lottie"
  className="w-64 h-64"
  playOnView
/>

// Custom speed
<LottieAnimation
  src="https://lottie.host/xxx/animation.lottie"
  speed={0.5}  // 0.5 = half speed, 2 = double speed
/>

// No loop (play once)
<LottieAnimation
  src="https://lottie.host/xxx/animation.lottie"
  loop={false}
/>

Find More Animations

Browse thousands of free animations on LottieFiles

Browse LottieFiles