diff --git a/.github/assets/dot-matrix-presets-dark.gif b/.github/assets/dot-matrix-presets-dark.gif new file mode 100644 index 0000000..7866d9c Binary files /dev/null and b/.github/assets/dot-matrix-presets-dark.gif differ diff --git a/.github/assets/dot-matrix-presets-light.gif b/.github/assets/dot-matrix-presets-light.gif new file mode 100644 index 0000000..000d48e Binary files /dev/null and b/.github/assets/dot-matrix-presets-light.gif differ diff --git a/.github/assets/dot-matrix-shapes-dark.gif b/.github/assets/dot-matrix-shapes-dark.gif new file mode 100644 index 0000000..4ba4ac3 Binary files /dev/null and b/.github/assets/dot-matrix-shapes-dark.gif differ diff --git a/.github/assets/dot-matrix-shapes-light.gif b/.github/assets/dot-matrix-shapes-light.gif new file mode 100644 index 0000000..b44a20b Binary files /dev/null and b/.github/assets/dot-matrix-shapes-light.gif differ diff --git a/README.md b/README.md index a27bb81..72892f0 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,15 @@ Open-source UI components for agent products — the surfaces an agent app actually lives on: loading states, streaming indicators, status. +

+ + + Nine dot-matrix presets animating: spiral, snake, columnSnake, ripple, ring, diagonal, columns, breathe and morph + +

+ +

Live playground → · 中文

+ Install a component with `npx`, and the source lands in your repo. **No runtime dependency. Nothing to keep current. The code is yours** — read it, change it, delete the name. ```bash @@ -40,6 +49,15 @@ A loading field built as five replaceable layers. The interesting questions — | **Glyph** | how one dot is drawn — a polygon plus two corner radii, not a table of named shapes | | **Renderer** | SVG (painted per frame) or CSS (`@keyframes`, zero JS per frame) | +Every layer is independent, so any lattice takes any glyph and any motion: + +

+ + + Six lattices (square, circle, diamond, hex, ring, cross) each drawn with a different dot glyph and motion + +

+ ```ts import { createDotMatrix } from "./components/botui";