How to Add an Animated Logo to a Next.js Landing Page

A small animated logo in the hero section can make a landing page feel alive without hurting performance. The best way to do this in Next.js is with a Lottie animation rendered only on the client. Here is the complete workflow.

Why Lottie for a Next.js landing page?

• Small file size: A Lottie wordmark is often under 50KB.
• Scalable: It is vector-based, so it looks sharp on retina screens.
• Controllable: You can play, pause, loop, or trigger it with scroll or hover.
• Transparent: It supports alpha, so it sits cleanly on any background.

Step 1: Create the animation in Wordmark

Go to Wordmark, type your brand name, choose a style, and export as Lottie JSON. Save the file as public/logo-animation.json in your Next.js project.

Step 2: Install lottie-react

pnpm add lottie-react

Step 3: Create a client component

"use client";

import Lottie from "lottie-react";
import animationData from "@/public/logo-animation.json";

export function AnimatedLogo() {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      style={{ width: "100%", maxWidth: 320 }}
    />
  );
}

Step 4: Load it dynamically in your page

import dynamic from "next/dynamic";

const AnimatedLogo = dynamic(
  () => import("@/components/animated-logo").then((m) => m.AnimatedLogo),
  { ssr: false, loading: () => <div className="h-24" /> },
);

export default function Home() {
  return (
    <section className="flex flex-col items-center py-20">
      <AnimatedLogo />
      <h1 className="mt-8 text-4xl font-bold">Your Product</h1>
    </section>
  );
}

Step 5: Optimize for Core Web Vitals

• Use ssr: false so the Lottie library never blocks the server response.
• Add a loading placeholder that matches the final size to avoid layout shift.
• Keep the JSON small; avoid overly complex paths.

Alternative: load from a URL

If you want to fetch the animation dynamically, use lottie-web directly with the path prop pointing to a public URL. This is useful for large files or CMS-driven content.

Frequently asked questions