Zeltrium — Free 5 Micro-Interactions  ·  v1.0
zeltrium.com

Thanks for grabbing the sampler. Here are 5 Lottie animations for the
moments you hit every week: success, error, copy, checkbox and refresh.
Drawn on the Lucide grid with one stroke weight, so they sit next to
Lucide, Heroicons or Tabler icons.

------------------------------------------------------------
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

  dark  = light lines (#F2F1ED) for dark UIs
  light = dark lines (#121212) for light UIs
  Accent is #FF4A1C in both.

  30 fps, 400 x 400 canvas. Stroke 32 = 2 px at 24 px, like Lucide.
  Built for 16–48 px. Each file is 2.6–7 KB as .json.

Use .json with any Lottie player. Use .lottie with dotLottie players.

------------------------------------------------------------
HOW EACH ONE PLAYS
------------------------------------------------------------
  success, error   draw in and rest on the last frame
                   (static icon = last frame)
  checkbox         forward to check, reverse to uncheck.
                   Play it in reverse instead of restarting it.
  refresh          one turn, ends where it started
  copy             two markers, frames at 30 fps:
                     copy    0–14   sheets merge into a check
                     reset  15–24   back to the two sheets
                   Hold between them as long as you like.

------------------------------------------------------------
DROP IT IN
------------------------------------------------------------
React (lottie-react)
  import Lottie from "lottie-react";
  import success from "./zeltrium/json/light/success.json";
  <Lottie animationData={success} loop={false} />

  copy:  ref.current.playSegments([0, 15], true);   // copied
         ref.current.playSegments([15, 25], true);  // reset

iOS (lottie-ios)
  let view = LottieAnimationView(name: "success")
  view.play()

Android (lottie-android)
  <com.airbnb.lottie.LottieAnimationView
      app:lottie_rawRes="@raw/success"
      app:lottie_autoPlay="false" />

Flutter (lottie)
  Lottie.asset('assets/zeltrium/success.json', repeat: false)

Framer:  Insert → Lottie → drop success.lottie → Playback: On Click
Webflow: Add → Lottie Animation → upload success.json → trigger on click

------------------------------------------------------------
RECOLOR
------------------------------------------------------------
Every color is flat and has a role. Swap the value, keep the role.

  role      dark       light
  line      #F2F1ED    #121212   outlines and glyphs
  accent    #FF4A1C    #FF4A1C   the "moment": checks, the X

Search and replace works in the .json (colors are stored as 0–1 RGB,
e.g. #FF4A1C = [1, 0.29, 0.11]) or use any Lottie editor.

Respect prefers-reduced-motion: show the rest frame and skip the
animation.

------------------------------------------------------------
LICENSE
------------------------------------------------------------
Free for personal and commercial projects, client work included.
No attribution required. Don't resell or redistribute the files
themselves. Full terms in LICENSE.txt.

------------------------------------------------------------
WANT ALL 30?
------------------------------------------------------------
Likes, toggles, theme, menus, uploads, deletes, notifications and more,
in the same style and both color sets:
https://zeltrium.gumroad.com/l/lottie-ui-micro-interactions

Questions: hello@zeltrium.com
