Animated Car

Component

About

This is animated car moving on road

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Car to your project and fits it to your theme.

Code

How Animated Car is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";
import { AnimatedCar } from "@/components/ui/animated-car";
import { useCarAnimation, type CarAnimationData } from "@/lib/utils";

export default function DemoOne() {

  const {
    speed,
    isPaused,
    pauseOnHover,
    setSpeed,
    setPauseOnHover,
    togglePause,
  } = useCarAnimation(5);


  const handleSpeedChange = (newSpeed: number) => {
    setSpeed(newSpeed);
  };

  const handlePauseToggle = () => {
    setPauseOnHover(!pauseOnHover);
  };

  // All car animation data configuration
  const carAnimationData: CarAnimationData = {
    car: {
      color: "bg-blue-500",
      size: "medium", // small, medium, large
    },
    speed: speed,
    features: {
      showClouds: true,
      showRoad: true,
      showScenery: true,
      showBirds: true,
      showSun: true,
      pauseOnHover: pauseOnHover,
    },
    scenery: {
      clouds: [
        {
          id: "cloud-1",
          size: "large",
          top: "10%",
          speedMultiplier: 1.2,
          delay: 0,
        },
        {
          id: "cloud-2",
          size: "medium",
          top: "15%",
          speedMultiplier: 1,
          delay: 5,
        },
        {
          id: "cloud-3",
          size: "small",
          top: "20%",
          speedMultiplier: 0.8,
          delay: 10,
        },
        {
          id: "cloud-4",
          size: "medium",
          top: "12%",
          speedMultiplier: 1.1,
          delay: 15,
        },
        {
          id: "cloud-5",
          size: "large",
          top: "18%",
          speedMultiplier: 0.9,
          delay: 20,
        },
      ],
      birds: [
        {
          id: "bird-1",
          emoji: "🦅",
          top: "25%",
          speedMultiplier: 1.5,
          delay: 0,
          size: "text-2xl sm:text-3xl",
        },
        {
          id: "bird-2",
          emoji: "🕊️",
          top: "30%",
          speedMultiplier: 1.2,
          delay: 7,
          size: "text-xl sm:text-2xl",
        },
        {
          id: "bird-3",
          emoji: "🦜",
          top: "35%",
          speedMultiplier: 1.8,
          delay: 14,
          size: "text-lg sm:text-xl",
        },
        {
          id: "bird-4",
          emoji: "🦆",
          top: "28%",
          speedMultiplier: 1.3,
          delay: 21,
          size: "text-xl sm:text-2xl",
        },
      ],
      trees: [
        {
          id: "tree-1",
          type: "pine" as const,
          height: "h-24",
          color: "",
        },
        {
          id: "tree-2",
          type: "oak" as const,
          height: "h-20",
          color: "",
        },
        {
          id: "tree-3",
          type: "palm" as const,
          height: "h-28",
          color: "",
        },
      ],
    },
    controls: {
      showSpeedControl: true,
      showPauseToggle: true,
      position: "top-left",
    },
  };

  return (
    <div className="relative w-full h-screen overflow-hidden">
      <AnimatedCar
        data={carAnimationData}
        onSpeedChange={handleSpeedChange}
        onPauseToggle={handlePauseToggle}
      />
    </div>
  );
}