lottie-animation

name	lottie-animation
description	Use this skill when the user asks to "add a lottie animation", "use an animation", "add an icon animation", "create a talk slide with animation", "animate a section", "build a presentation slide", "add lottie", or wants to embed animated icons or decorative animations in HTML pages for talks or the blog.
version	1.0.0

Lottie Animation Skill

Helps embed and compose Lottie animations for ideia.me talks, slides, and pages — always matching the site's dark-mode color palette.

Site Color Palette

Always use these variables (defined in css/semantic-learn.css and css/main.css):

/* Logo colors */
--logo-golden-yellow: #FBBF24
--logo-vibrant-light-blue: #0EA5E9
--logo-reddish-orange: #EF4444
--logo-deep-purple-blue: #1E3A8A

/* Dark UI base */
--bg-color: #0f1117
--card-bg: #161b27
--text-color: #ccd6f6
--text-muted: #8892b0
--border-color: rgba(255,255,255,0.07)

/* Primary accents */
--primary-blue: #2563eb
--primary-purple: #7c3aed
--primary-teal: #0d9488
--primary-light-blue: #0ea5e9

When writing inline styles or new CSS, use background: #0f1117, color: #ccd6f6, borders rgba(255,255,255,0.07).

Lottie Player Setup

The @lottiefiles/lottie-player script is already loaded in _layouts/default.html. For standalone HTML files (talks), add:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player> Syntax

<lottie-player
  src="/images/icons/<category>/<name>.json"
  background="transparent"
  speed="1"
  style="width: 80px; height: 80px;"
  loop
  autoplay>
</lottie-player>

Key attributes:

• loop — repeat continuously
• autoplay — start immediately
• hover — play only on mouse hover (good for cards/buttons)
• speed="0.5" — slow down; speed="2" — speed up
• count="3" — play N times then stop (no loop)

Available Animations

All files live in /images/icons/. Use these exact paths:

Brain / Physics

• /images/icons/brain/physics.json — abstract physics/brain concept

Emotions

• /images/icons/emotions/anger.json
• /images/icons/emotions/emotion.json
• /images/icons/emotions/emotional-control.json
• /images/icons/emotions/emotional-intelligence.json
• /images/icons/emotions/emotional-intelligence-2.json
• /images/icons/emotions/emotional-intelligence-3.json
• /images/icons/emotions/emotional-intelligence-4.json
• /images/icons/emotions/fear.json / fear-2.json / fear-3.json
• /images/icons/emotions/flirty.json
• /images/icons/emotions/joy.json
• /images/icons/emotions/moody.json
• /images/icons/emotions/sadness.json
• /images/icons/emotions/self-control.json / self-control-2.json
• /images/icons/emotions/surprise.json
• /images/icons/emotions/swear.json

General Concepts (great for talks)

• /images/icons/general/barrier.json
• /images/icons/general/confidence.json
• /images/icons/general/connection.json
• /images/icons/general/folders.json
• /images/icons/general/goal.json
• /images/icons/general/growth.json
• /images/icons/general/idea.json
• /images/icons/general/love.json
• /images/icons/general/mentoring.json
• /images/icons/general/notebook.json
• /images/icons/general/options.json
• /images/icons/general/puzzle.json
• /images/icons/general/share.json
• /images/icons/general/support.json
• /images/icons/general/truck.json
• /images/icons/general/warehouse.json

Communication

• /images/icons/communication/communication.json
• /images/icons/communication/empathy.json
• /images/icons/communication/listening.json

Ocean (layered ecosystem — surface/mid/deep/floor)

• Surface: seagull.json, buoy.json, crane.json
• Mid: fish.json, fish-2.json, squid.json, cancer.json, scorpio.json, pisces.json
• Deep: anglerfish.json
• Floor: coral.json, coral-2.json, shell.json, seaweed.json, seaweed-2.json

Common Patterns

Hero animation (centered, large)

<div style="text-align:center; margin-bottom: 24px;">
  <lottie-player src="/images/icons/general/idea.json"
    background="transparent" speed="1"
    style="width: 140px; height: 140px; margin: 0 auto 16px;"
    loop autoplay>
  </lottie-player>
  <h2 style="color: #ccd6f6;">Your Slide Title</h2>
</div>

Card with hover animation

<div style="background: #161b27; border: 1px solid rgba(255,255,255,0.07);
            border-radius: 12px; padding: 24px; text-align: center;
            transition: transform 0.2s; cursor: pointer;"
     onmouseenter="this.style.transform='translateY(-4px)'"
     onmouseleave="this.style.transform='translateY(0)'">
  <lottie-player src="/images/icons/general/growth.json"
    background="transparent" speed="1"
    style="width: 80px; height: 80px; margin: 0 auto 12px;"
    loop hover>
  </lottie-player>
  <p style="color: #ccd6f6; margin: 0;">Growth</p>
</div>

Row of small icons

<div style="display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;">
  <lottie-player src="/images/icons/emotions/joy.json"
    background="transparent" speed="1"
    style="width: 60px; height: 60px;" loop hover>
  </lottie-player>
  <lottie-player src="/images/icons/emotions/anger.json"
    background="transparent" speed="1"
    style="width: 60px; height: 60px;" loop hover>
  </lottie-player>
  <lottie-player src="/images/icons/emotions/sadness.json"
    background="transparent" speed="1"
    style="width: 60px; height: 60px;" loop hover>
  </lottie-player>
</div>

Full slide section (talk slide style)

<section style="background: #0f1117; min-height: 100vh; display: flex;
                align-items: center; justify-content: center; padding: 40px;">
  <div style="max-width: 900px; width: 100%; text-align: center;">
    <lottie-player src="/images/icons/brain/physics.json"
      background="transparent" speed="1"
      style="width: 160px; height: 160px; margin: 0 auto 32px;"
      loop autoplay>
    </lottie-player>
    <h1 style="color: #FBBF24; font-size: 3rem; margin-bottom: 16px;">Slide Title</h1>
    <p style="color: #8892b0; font-size: 1.25rem;">Supporting description here.</p>
  </div>
</section>

Two-column with animation

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
            align-items: center; max-width: 900px; margin: 0 auto;">
  <div>
    <h2 style="color: #0EA5E9;">Topic</h2>
    <p style="color: #8892b0;">Your explanation here.</p>
  </div>
  <div style="text-align: center;">
    <lottie-player src="/images/icons/general/connection.json"
      background="transparent" speed="1"
      style="width: 200px; height: 200px; margin: 0 auto;"
      loop autoplay>
    </lottie-player>
  </div>
</div>

CSS Animations (no JSON needed)

Use these for text, borders, and highlights in talk slides:

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(251,191,36,0.3); }
  50%       { text-shadow: 0 0 40px rgba(251,191,36,0.8); }
}

Apply with:

<h1 style="animation: titleGlow 3s infinite; color: #FBBF24;">Title</h1>
<div style="animation: fadeInUp 0.6s ease-out both;">Content</div>

Choosing the Right Animation

Context	Recommended icon
Opening / intro	idea.json, brain/physics.json
Learning / growth	growth.json, notebook.json
Teamwork / community	connection.json, support.json, mentoring.json
Emotions / EQ talk	any in emotions/
Problem / barrier	barrier.json, puzzle.json
Communication	communication.json, empathy.json, listening.json
Ocean metaphor	combine surface + mid + floor icons
Goal / achievement	goal.json, confidence.json

Size Guidelines

Use case	Size
Hero / slide center	140–200px
Section header	100–120px
Card icon	60–80px
Inline / row	40–60px