UI micro-interactions in Lottie format v1 (36 animations, light and dark, JSON and .lottie)

This pack is for UI designers and front-end developers who want to give visible feedback on an action (adding to a cart, copying, sending, ticking a box) or signal a wait, without drawing or animating it themselves. Each micro-interaction is a lightweight Lottie file, in light and dark, with a static SVG image for people who have asked for less motion. The animations are drawn in a 24 frame with a 1.5 stroke, the same style as the Beryl Design line icon packs: they sit next to those icons without a break in style. “v1” in the title is the version of the pack (1.0.0).

• 36 animations, in 6 families:
  • Status: loading-spinner, loading-dots, success-check, error-cross, warning-alert, info-pulse;
  • Action: copy-done, send-message, delete-trash, upload-arrow, download-arrow, refresh-spin;
  • Commerce: cart-add, favorite-heart, bookmark-save, star-rate, tag-apply, bag-bounce;
  • Navigation: menu-close, chevron-expand, search-open, back-arrow, view-switch, scroll-hint;
  • Control: toggle-switch, checkbox-check, radio-select, play-pause, volume-mute, password-reveal;
  • Notification: bell-ring, badge-pop, typing-dots, pull-refresh, empty-box, offline-signal.
• 9 loops, for waits and hints: loading-spinner, loading-dots, info-pulse, upload-arrow, download-arrow, scroll-hint, typing-dots, pull-refresh and empty-box. The 27 other animations play once and stop on their final state.
• 2 themes, light and dark, for every animation.
• 72 Lottie JSON files: every animation in light and in dark.
• 36 .lottie files: every animation, with its dark theme included in the same file.
• 72 static SVG images: the resting frame of every animation, in light and in dark, to show when the “reduce motion” setting is on.
• 1 HTML demo page, offline: the 36 animations playing in the browser, with a light or dark switch; when the system asks for less motion, the page shows the static images instead.

Archive layout:

json/light/<name>.json
json/dark/<name>.json
lottie/<name>.lottie
svg/light/<name>.svg
svg/dark/<name>.svg
demo/index.html
demo/animations.js
demo/vendor/

The zip also contains the licence text, a README file and the credits.

How to use it

• In a web page or an app: load the JSON of the theme you want, or the .lottie file, into a Lottie player. Loops run continuously; the other animations are triggered by the action (a click, a confirmation) and stay on their final state.
• Colours: the colours of each animation are stored in named slots. A player that supports slots lets you change them without editing the file; with a player that does not read them, use the JSON of the theme you want. In the .lottie file, the dark theme is switched on from the player.
• Less motion: when the visitor has turned on “reduce motion” (prefers-reduced-motion), show the static SVG of the same name instead of the animation. The demo page shows how this works.
• Timing: every animation runs at 60 frames per second and lasts 2,000 ms at most. The heaviest JSON file weighs 4,654 bytes, the heaviest .lottie file 1,204 bytes.

Good to know

• play-pause is drawn as a stroke, like the rest of the set: the triangle outline opens at its middle and each half closes into a bar.
• At rest, refresh-spin and pull-refresh use the circular arrow of the Beryl Design arrows pack; they rotate around the centre of the frame, so the tip never leaves the frame.
• info-pulse sends out a ring that detaches from the circle and fades. To give it room, its circle is slightly smaller than that of the other status animations.
• The match with the line icon packs is a matter of style (frame, stroke weight, rounded ends): the animations are not the animated version of each icon in those packs.

Production and AI

The geometry, the motion, the Lottie and SVG files, the scripts and the demo page were produced with an AI assistant (Claude Code), then reviewed and checked: Lottie schema validation, rendering in two players, loop seams, durations, static images compared with the animated render, contrast in light and dark, contact sheets reviewed. No image was produced by an image generator: every file comes out of the same code.

• Lottie JSON: the open format for vector animations, read by Lottie players for the web and mobile and by the design and prototyping tools that import this format.
• dotLottie (.lottie): a compressed archive that bundles the animation and its dark theme, for players that read this format.
• SVG: one static image per animation and per theme, which displays in any browser and imports into most design tools.
• HTML: the demo page, to open in a browser, offline. It ships with the open source lottie-web 5.13.0 player.

The animations were checked in two web players, one rendering to SVG, the other to canvas.

The animations come under a commercial licence: you can use them in your personal and professional projects, including for your clients and in the websites or apps you sell, but you may not resell or redistribute the files, even for free. The demo player, lottie-web, is free software under the MIT licence, and its notice is included in demo/vendor/.

• Which animation tool to choose in 2026
• Rive versus Lottie: two approaches to interactive animation (in French)

1.0.0 (11 November 2026): first version.