Motion Graphics

Motion Graphics Skill for Lead Gen Jay

Optional MCP Servers: To fully utilize this skill, enable these MCP servers:

# LottieFiles - search for pre-built Lottie animations
claude mcp add-json "lottiefiles" '{"command":"npx","args":["-y","mcp-server-lottiefiles"]}'

# FAL Video - text-to-video and image-to-video generation
claude mcp add-json "fal-video" '{"command":"npx","args":["-y","fal-image-video-mcp"]}'

These are disabled by default to avoid slowing down Claude Code. Enable when needed, remove when done.

You are a motion graphics specialist focused on business animations that drive conversions. You combine three tools:

1. LottieFiles MCP — Pre-built professional animations (search and embed)
2. Framer Motion components — Code-based UI animations (src/components/animations/)
3. Remotion — Programmatic video generation (remotion/)

When to Use Each Tool

Part 1: LottieFiles Integration

Searching for Animations

Use the LottieFiles MCP to search for business-appropriate animations:

Good search terms for landing pages:

• loading spinner minimal
• success checkmark
• arrow down scroll
• email send
• rocket launch
• chart growth
• confetti celebration
• form submit
• notification bell
• download complete

Avoid entertainment searches:

• ❌ cartoon character
• ❌ funny dance
• ❌ game explosion

Implementing Lottie in React

"use client";

import Lottie from "lottie-react";
import successAnimation from "@/animations/success.json";

export function SuccessAnimation() {
  return (
    <Lottie
      animationData={successAnimation}
      loop={false}
      style={{ width: 120, height: 120 }}
    />
  );
}

Lottie Component Patterns

1. One-time animation (form success):

import Lottie from "lottie-react";
import checkmark from "@/animations/checkmark.json";

export function FormSuccess() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Lottie
        animationData={checkmark}
        loop={false}
        style={{ width: 80, height: 80 }}
      />
      <p className="text-green-600 font-medium">Submitted successfully!</p>
    </div>
  );
}

2. Looping animation (loading state):

import Lottie from "lottie-react";
import loader from "@/animations/loader.json";

export function LoadingState() {
  return (
    <div className="flex items-center justify-center p-8">
      <Lottie
        animationData={loader}
        loop={true}
        style={{ width: 60, height: 60 }}
      />
    </div>
  );
}

3. Hover-triggered animation:

"use client";

import Lottie, { LottieRefCurrentProps } from "lottie-react";
import arrowAnimation from "@/animations/arrow-right.json";
import { useRef } from "react";

export function AnimatedCTA({ children }: { children: React.ReactNode }) {
  const lottieRef = useRef<LottieRefCurrentProps>(null);

  return (
    <button
      => lottieRef.current?.play()}
      => lottieRef.current?.stop()}
      className="flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-lg"
    >
      {children}
      <Lottie
        lottieRef={lottieRef}
        animationData={arrowAnimation}
        loop={false}
        autoplay={false}
        style={{ width: 24, height: 24 }}
      />
    </button>
  );
}

4. Scroll-triggered Lottie:

"use client";

import Lottie from "lottie-react";
import { useInView } from "framer-motion";
import { useRef, useState, useEffect } from "react";
import rocketAnimation from "@/animations/rocket.json";

export function ScrollTriggeredLottie() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });
  const [shouldPlay, setShouldPlay] = useState(false);

  useEffect(() => {
    if (isInView) setShouldPlay(true);
  }, [isInView]);

  return (
    <div ref={ref}>
      <Lottie
        animationData={rocketAnimation}
        loop={false}
        autoplay={shouldPlay}
        style={{ width: 200, height: 200 }}
      />
    </div>
  );
}

Where to Store Lottie Files

src/
├── animations/           # Lottie JSON files
│   ├── loading.json
│   ├── success.json
│   ├── error.json
│   ├── arrow-right.json
│   └── confetti.json

Part 2: Framer Motion Components

Available Components

Location: src/components/animations/

Landing Page Animation Patterns

Hero Section:

import { FadeIn, TextReveal, HoverScale } from "@/components/animations";

export function HeroSection() {
  return (
    <section className="py-20">
      <FadeIn delay={0.2}>
        <span className="text-blue-600">Lead Gen Jay</span>
      </FadeIn>

      <TextReveal
        text="Stop Losing Leads to Your Competitors"
        as="h1"
        className="text-5xl font-bold"
      />

      <FadeIn delay={0.8}>
        <p className="text-xl text-gray-600">
          Capture, nurture, and convert leads on autopilot.
        </p>
      </FadeIn>

      <FadeIn delay={1.2}>
        <HoverScale scale={1.05} glow>
          <button className="bg-blue-600 text-white px-8 py-4 rounded-lg">
            Get Your Free Audit
          </button>
        </HoverScale>
      </FadeIn>
    </section>
  );
}

Social Proof Stats:

import { ScrollReveal, CountUp } from "@/components/animations";

export function StatsSection() {
  return (
    <div className="grid grid-cols-3 gap-8">
      <ScrollReveal animation="scale">
        <div className="text-center">
          <CountUp to={156} suffix="%" className="text-4xl font-bold" />
          <p>Conversion Increase</p>
        </div>
      </ScrollReveal>

      <ScrollReveal animation="scale" delay={0.15}>
        <div className="text-center">
          <CountUp to={2.4} suffix="x" decimals={1} className="text-4xl font-bold" />
          <p>More Leads</p>
        </div>
      </ScrollReveal>

      <ScrollReveal animation="scale" delay={0.3}>
        <div className="text-center">
          <CountUp to={47} suffix="%" className="text-4xl font-bold" />
          <p>Lower Cost</p>
        </div>
      </ScrollReveal>
    </div>
  );
}

Feature List:

import { StaggerChildren, ScrollReveal } from "@/components/animations";

export function FeaturesSection() {
  const features = [
    "Automated lead capture forms",
    "Smart follow-up sequences",
    "Real-time analytics dashboard",
    "CRM integration",
  ];

  return (
    <ScrollReveal>
      <StaggerChildren staggerDelay={0.1}>
        {features.map((feature, i) => (
          <div key={i} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
            <CheckIcon className="text-green-500" />
            <span>{feature}</span>
          </div>
        ))}
      </StaggerChildren>
    </ScrollReveal>
  );
}

Part 3: Remotion Video Generation

When to Use Remotion

• Explainer videos on landing pages
• Personalized video proposals
• Animated case study highlights
• Product feature showcases

For detailed Remotion guidance, use the /remotion-explainer skill.

Quick Example

import { VideoPlayer } from "@/components/video";

export function LandingPageVideo() {
  return (
    <VideoPlayer
      compositionProps={{
        problem: "Most businesses waste 80% of their marketing budget on leads that never convert.",
        solution: "Lead Gen Jay's proven system captures, nurtures, and converts leads on autopilot.",
        cta: "Get Your Free Lead Audit",
      }}
      showControls
      loop
    />
  );
}

NPM Scripts

Part 4: Combining Tools

Example: Form with Lottie + Framer Motion

"use client";

import { useState } from "react";
import { FadeIn, HoverScale } from "@/components/animations";
import Lottie from "lottie-react";
import successAnimation from "@/animations/success.json";
import loadingAnimation from "@/animations/loading.json";

export function LeadCaptureForm() {
  const [status, setStatus] = useState<"idle" | "loading" | "success">("idle");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("loading");
    await submitForm();
    setStatus("success");
  };

  if (status === "success") {
    return (
      <FadeIn>
        <div className="text-center">
          <Lottie
            animationData={successAnimation}
            loop={false}
            style={{ width: 120, height: 120, margin: "0 auto" }}
          />
          <p className="text-green-600 font-medium mt-4">
            Thanks! Check your email for your free audit.
          </p>
        </div>
      </FadeIn>
    );
  }

  return (
    <FadeIn>
      <form className="space-y-4">
        <input
          type="email"
          placeholder="Enter your email"
          className="w-full px-4 py-3 border rounded-lg"
          disabled={status === "loading"}
        />

        <HoverScale scale={1.02}>
          <button
            type="submit"
            disabled={status === "loading"}
            className="w-full bg-blue-600 text-white py-3 rounded-lg flex items-center justify-center gap-2"
          >
            {status === "loading" ? (
              <Lottie
                animationData={loadingAnimation}
                loop
                style={{ width: 24, height: 24 }}
              />
            ) : (
              "Get My Free Audit"
            )}
          </button>
        </HoverScale>
      </form>
    </FadeIn>
  );
}

Business Animation Best Practices

DO ✓

• Loading states: Always show progress with Lottie spinners
• Success feedback: Celebrate form submissions with checkmark animations
• Scroll reveals: Animate sections as users scroll (keeps engagement)
• Stat counters: Animate numbers to draw attention to social proof
• CTA hover effects: Subtle scale/glow on buttons increases clicks
• Staggered lists: Reveal benefits one-by-one (guides reading)

DON'T ✗

• Autoplay videos with sound: Always muted or click-to-play
• Infinite complex loops: Distracting, hurts performance
• Blocking animations: Never delay user actions
• Cartoonish animations: Keep it professional for B2B
• Too many animations: 2-3 animated sections per page max
• Slow durations: Keep under 500ms for UI, 300ms for interactions

Performance Guidelines

1. Lottie files: Keep under 100KB, use simple shapes
2. Framer Motion: Animate transform and opacity only (GPU-accelerated)
3. Remotion videos: Pre-render to MP4 for production, use Player for previews
4. Lazy load: Don't load Lottie animations above the fold

Quick Reference

Search LottieFiles (via MCP)

Use the lottiefiles MCP server to search:

• mcp__lottiefiles__search - Search for animations by keyword

Import Framer Motion Components

import {
  FadeIn,
  SlideUp,
  StaggerChildren,
  ScrollReveal,
  HoverScale,
  CountUp,
  TextReveal
} from "@/components/animations";

Import Lottie

import Lottie from "lottie-react";
import animationData from "@/animations/[name].json";

Import Video Player

import { VideoPlayer } from "@/components/video";

Workflow

1. Identify animation need → Loading? Success? Reveal? Video?
2. Choose tool → Lottie (pre-built) vs Framer Motion (custom) vs Remotion (video)
3. Search LottieFiles → If Lottie, use MCP to find appropriate animation
4. Implement → Use patterns from this skill
5. Test performance → Check Core Web Vitals, ensure smooth 60fps
6. Audit → Use /design-motion-principles skill to review quality