Search...
K

Lottie Text

A text with a lottie animation

Documentation

pnpm dlx @t7blocks/cli add lottie-text

Usage

import { LottieText } from "@/components/T7blocks/LottieText";

export default function Home() {
  return (
  <div className="min-h-screen flex items-center justify-center bg-white">
      <LottieText 
        textSize="text-4xl md:text-5xl lg:text-6xl"
        lines={[
        [
          { type: "text", value: "Say" },
          {
            type: "lottie",
            config: {
              src: "https://lottie.host/0e894037-15ba-4e1a-b9e2-fdc7fc93957d/eElHfFEFHx.lottie",
              size: 70,
              y: -10,
              scale: 1.1,
            },
          },
          { type: "text", value: "goodbye" },
        ],
        [
      { type: "text", value: "to" },
      {
        type: "lottie",
        config: {
          src: "https://lottie.host/08e8c28b-c406-412c-a685-b41c63cdf7b1/Nr5WCCYllE.lottie",
          size: 80,
          y: 6,
        },
      },
      { type: "text", value: "boring" },
      {
        type: "lottie",
        config: {
          src: "https://lottie.host/2627aac4-8163-458f-b778-4897e6e0e220/5Yat4Cj4Kf.lottie",
          size: 60,
          y: 4,
          scale: 1.7,
        },
      },
      { type: "text", value: "text" },
    ],
  ]}
      /> 
      </div>
  );
}

Properties

PropTypeDefaultDescription
linesLottieLine[]requiredArray of text/lottie elements
textSizestring""Tailwind text size class
textColorstring"black"Text color
animationDelaynumber1000Delay between lines in ms
animationDurationnumber600Animation duration in ms

Related resources

Dot Launch Button

Knob Toggle