Zeltrium — 5 AI States  ·  free  ·  v1.0
zeltrium.com

5 Lottie animations for the moments every AI product has: the model is
thinking, writing, waiting to be stopped, listening, searching the web.
Same grid and stroke weights as the Zeltrium UI micro-interactions pack,
so both sets sit together in one interface.

------------------------------------------------------------
WHAT'S INSIDE
------------------------------------------------------------
  json/dark/      5 x .json   for dark backgrounds
  json/light/     5 x .json   for light backgrounds
  lottie/dark/    5 x .lottie (compressed, same animations)
  lottie/light/   5 x .lottie
  preview-dark.png / preview-light.png

  ai_thinking     the model is working on an answer
  ai_typing       the answer is being written
  ai_send_stop    send button turns into stop while generating
  ai_listening    voice input is recording
  ai_searching    the model is searching the web

  Use .json with any Lottie player. Use .lottie with dotLottie players.
  dark  = light lines (#F2F1ED) for dark UIs
  light = dark lines (#121212) for light UIs
  Accent is #FF4A1C in both. Recolor in a minute, see RECOLOR below.

  30 fps. Canvas 400 x 400. Stroke 32 on the 400 canvas = 2 px at 24 px.
  Built for 16–64 px. Files are 5–35 KB as .json, 1–4 KB as .lottie.
  File names start with ai_ so they never clash with the UI pack.

------------------------------------------------------------
HOW EACH ONE PLAYS
------------------------------------------------------------
IN → LOOP → OUT — play segments by marker name (frames at 30 fps).
  Play "in" once, loop "loop" while the state lasts, play "out" when it
  ends. Loops are seamless: switch to "out" at the end of a loop cycle.

                  in        loop       out
  ai_thinking     0–9       9–48      48–58
  ai_typing       0–8       8–82      82–92
  ai_listening    0–10     10–39      39–50
  ai_searching    0–9       9–51      51–61

  ai_listening shows that recording is on. It does not react to the
  voice, so it stays honest when the user is silent.
  ai_searching ends on a "found" dot inside the globe. Hold the last
  frame, or fade the icon out yourself if you don't want that state.

TWO STATES — ai_send_stop
  to_stop   0–16   send arrow turns into the stop button
  Generation finished? Play the same segment in reverse to get the
  arrow back. Never restart from frame 0, reverse instead.

------------------------------------------------------------
DROP IT IN
------------------------------------------------------------
React (lottie-react)
  import Lottie from "lottie-react";
  import thinking from "./zeltrium/json/light/ai_thinking.json";

  const ref = useRef(null);
  const done = useRef(false);
  <Lottie lottieRef={ref} animationData={thinking} loop={false} autoplay={false}
          onDOMLoaded={() => ref.current.playSegments([0, 9], true)}
          onComplete={() => { if (!done.current) ref.current.playSegments([9, 48], true); }} />

  // when the answer is ready:
  done.current = true;
  ref.current.playSegments([48, 58], true);

Web (lottie-web)
  const a = lottie.loadAnimation({ container: el, renderer: "svg",
    loop: false, autoplay: false, path: "/zeltrium/light/ai_thinking.json" });
  a.goToAndPlay("in", true);                 // a marker by name
  a.addEventListener("complete", () => a.goToAndPlay("loop", true));

  Send → stop:  a.setDirection(1);  a.goToAndPlay("to_stop", true);
  Stop → send:  a.setDirection(-1); a.play();

dotLottie (@lottiefiles/dotlottie-web / dotlottie-react)
  <DotLottieReact src="/zeltrium/light/ai_thinking.lottie" marker="loop" loop />

iOS (lottie-ios)
  view.play(fromMarker: "in", toMarker: "loop")
  view.play(fromMarker: "loop", toMarker: "out", loopMode: .loop)

Android (lottie-android)
  view.setMinAndMaxFrame("loop"); view.repeatCount = LottieDrawable.INFINITE
  view.playAnimation()

Flutter (lottie)
  Lottie.asset('assets/zeltrium/ai_thinking.json', controller: c,
               onLoaded: (comp) => c.duration = comp.duration);
  // use comp.getMarker('loop') for start and end frames

Framer:  Insert → Lottie → drop a .lottie → loop on
Webflow: Add → Lottie Animation → upload a .json → loop on

------------------------------------------------------------
RECOLOR
------------------------------------------------------------
Every color is flat and has one of three roles. Strokes and fills are
named by role inside each file (line, accent, on-accent), so a Lottie
editor shows you exactly what to swap. In the .json colors are stored
as 0–1 RGB, e.g. #FF4A1C = [1, 0.29, 0.11].

  role        dark       light
  line        #F2F1ED    #121212   outlines, lines, globe, mic
  accent      #FF4A1C    #FF4A1C   the "moment": runner, cursor, button
  on-accent   #0E0E0E    #0E0E0E   the stop square on the orange button

------------------------------------------------------------
GOOD TO KNOW
------------------------------------------------------------
- Respect prefers-reduced-motion: show a still frame from the loop
  and skip the animation.
- No expressions, effects, images or Merge Paths: plays the same in
  lottie-web, iOS, Android and Flutter.
- Want these in your brand colors, or a voice-reactive listening
  state? That's custom work: zeltrium.com

------------------------------------------------------------
LICENSE
------------------------------------------------------------
Unlimited personal, commercial and client projects. No attribution.
Don't resell or redistribute the files themselves, don't put them in
another pack, don't use them to train AI. Full terms in LICENSE.txt.

Questions, bugs, ideas: hello@zeltrium.com
