Empty states are the first thing a new user or an emptied-out list shows, and a static icon often feels flat. This snippet replaces it with a small looping animation from the real lottie-web library, paired with a clear headline, supporting copy, and a call-to-action button.

The Lottie illustration

The lottie-web UMD script is loaded from a CDN via cdnUrls, and on load the snippet immediately calls lottie.loadAnimation({ container, renderer: 'svg', loop: true, autoplay: true, animationData }) against an inline animation JSON object, so the pulsing circle plays continuously as a lightweight decorative accent above the text — no external .json asset needed.

Copy and call to action

Below the animation, a bold headline ("No items yet") and a one-sentence explanation set expectations, followed by a primary button whose label makes the very next action unambiguous. The button includes a brief disabled "Opening editor…" state on click to simulate a real navigation transition.

Reusing the pattern

Swap the headline, description, and button label for any zero-content screen — empty inbox, empty search results, empty dashboard — and reuse the same Lottie loading code with a different animationData object for a different decorative motion.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Hand this snippet's HTML, CSS, and JavaScript to an AI coding assistant like Claude and ask it to adapt "Lottie Empty State Illustration" to your project — restyle it to match your design system, wire it up to real data instead of the static example, or port it to the framework you're building in.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a cards component called "Lottie Empty State Illustration" using plain HTML, CSS, and vanilla JavaScript — no framework, no build step.

Requirements:
- Match the structure and behavior of the "Lottie Empty State Illustration" snippet from the UI Snippets Library.
- Keep the markup semantic and the styling self-contained (no external dependencies beyond what the original snippet uses).
- Keep the JavaScript vanilla, with no framework runtime required.
- Make it easy to restyle via CSS custom properties or class overrides so it can be dropped into a real project.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires

JS · lottie.min.js

<div class="lei-card">
  <div class="lei-lottie" id="leiLottie"></div>
  <h3 class="lei-title">No items yet</h3>
  <p class="lei-desc">Items you create will show up here. Get started by adding your first one.</p>
  <button class="lei-btn" id="leiCreateBtn" type="button">Create your first item</button>
</div>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0d14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.lei-card{font-family:system-ui,-apple-system,sans-serif;background:#12141f;color:#e7e9f5;border:1px solid #262a3d;border-radius:16px;padding:36px 30px;max-width:340px;width:100%;text-align:center}
.lei-lottie{width:110px;height:110px;margin:0 auto 12px}
.lei-title{font-size:17px;margin:0 0 8px;font-weight:700}
.lei-desc{font-size:13px;color:#9096b3;line-height:1.5;margin:0 0 22px}
.lei-btn{background:#6366f1;border:none;color:#fff;font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:9px;cursor:pointer}
.lei-btn:hover{background:#4f52e0}
.lei-toast{margin-top:14px;font-size:12px;color:#4ade80;font-weight:600;min-height:16px}

// Same minimal Lottie animation JSON as the loader snippets — here used
// purely as a small looping decorative illustration above the empty-state copy.
var animData = {
  v: "5.7.4", fr: 30, ip: 0, op: 60, w: 200, h: 200, nm: "pulse", ddd: 0, assets: [],
  layers: [{
    ddd: 0, ind: 1, ty: 4, nm: "circle", sr: 1,
    ks: {
      o: { a: 1, k: [
        { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 0, s: [100], e: [40] },
        { i: { x: [0.667], y: [1] }, o: { x: [0.333], y: [0] }, t: 30, s: [40], e: [100] },
        { t: 60, s: [100] }
      ] },
      r: { a: 0, k: 0 },
      p: { a: 0, k: [100, 100, 0] },
      a: { a: 0, k: [0, 0, 0] },
      s: { a: 1, k: [
        { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 0, s: [70, 70, 100], e: [100, 100, 100] },
        { i: { x: [0.667, 0.667, 0.667], y: [1, 1, 1] }, o: { x: [0.333, 0.333, 0.333], y: [0, 0, 0] }, t: 30, s: [100, 100, 100], e: [70, 70, 100] },
        { t: 60, s: [70, 70, 100] }
      ] }
    },
    ao: 0,
    shapes: [{
      ty: "gr",
      it: [
        { ty: "el", p: { a: 0, k: [0, 0] }, s: { a: 0, k: [120, 120] } },
        { ty: "fl", c: { a: 0, k: [0.545, 0.361, 0.965, 1] }, o: { a: 0, k: 100 } },
        { ty: "tr", p: { a: 0, k: [0, 0] }, a: { a: 0, k: [0, 0] }, s: { a: 0, k: [100, 100] }, r: { a: 0, k: 0 }, o: { a: 0, k: 100 } }
      ]
    }],
    ip: 0, op: 60, st: 0, bm: 0
  }]
};

var lottieContainer = document.getElementById('leiLottie');
lottie.loadAnimation({
  container: lottieContainer,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animData,
});

document.getElementById('leiCreateBtn').addEventListener('click', function () {
  var btn = this;
  var original = btn.textContent;
  btn.textContent = 'Opening editor…';
  btn.disabled = true;
  setTimeout(function () {
    btn.textContent = original;
    btn.disabled = false;
  }, 1400);
});

Step by step

How to Use

1
Load the snippetClick "Lottie Empty State Illustration" in the sidebar to load its HTML, CSS, and JS into the editor panels. The preview updates instantly.
2
Edit the codeModify any panel — HTML, CSS, or JS. The preview refreshes as you type. Use Reset in each panel header to restore the original.
3
Preview on devicesClick the Mobile (375px), Tablet (768px), or Desktop buttons in the preview header to check responsiveness.
4
Export in your formatClick "HTML" to download a standalone file, "JSX" for a React component, "Tailwind" for a React + Tailwind CSS component, "Tailwind HTML" for a standalone HTML file with Tailwind CDN, "Vue" for a Vue 3 SFC with <template>/<script setup>/<style scoped>, or "Angular" for a standalone Angular .component.ts file. "Copy all" copies the full code to clipboard.
5
Save your versionClick "Save as", type a name, and press Enter. Your snippet saves to IndexedDB and appears in the Saved tab.

Real-world uses

Common Use Cases

Empty list and dashboard states

Show this card when a table, board, or feed has no items yet.

New workspace onboarding

Welcome users into an empty project space with a clear first action.

Search with no results

Swap the copy to explain a search returned nothing and suggest next steps.

lottie-web integration example

Demonstrates loading a small looping Lottie animation in vanilla JS.

Got questions?

Frequently Asked Questions

No. The animationData object is embedded directly in the JavaScript, so aside from loading the lottie-web library, no additional network request is made for the animation itself.

Yes — export any animation from After Effects with the Bodymovin/Lottie plugin as JSON and pass it as the animationData object in place of the inline example.

A subtle looping animation draws the eye and signals that the empty area is intentional rather than broken, which a static icon cannot convey as effectively.

Loading…