loading-state-zoo 0.3.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # loading-state-zoo
 
-**32 loading patterns, one tiny package.** Dots, spinners, orbs, shapes, bars, music and skeletons that tell the user "please wait" — made silky smooth and ready to use in **React**, **plain websites**, and **iOS / Android apps**.
+**30 loading patterns, one tiny package.** Dots, spinners, orbs, AI, shapes, bars, music and skeletons that tell the user "please wait" — made silky smooth and ready to use in **React**, **plain websites**, and **iOS / Android apps**.
 
 Think of it as a small zoo of loading animals. You pick an animal, put it in your app's cage, and it starts moving right away. You can even change its **color**, **size** and **speed** — no scissors or glue required.
 
@@ -28,12 +28,11 @@ Think of it as a small zoo of loading animals. You pick an animal, put it in you
 | [Scan sweep](#scan-sweep) | Spinner | Radar/sonar, scanning, searching |
 | [Orbit dots](#orbit-dots) | Spinner | Floaty, lightweight loading |
 | [Orbit ring dots](#orbit-ring-dots) | Spinner | Cosmetic ring, data-heavy load |
-| [Pulsing orb](#pulsing-orb) | Orbs | Ambient loads, hero panels, splash |
-| [Morphing orb](#morphing-orb) | Orbs | Creative waits, brand moments |
-| [Siri orb](#siri-orb) | Orbs | Voice assistants, AI thinking |
-| [Dot orb](#dot-orb) | Orbs | Orbit waits, spatial loading |
-| [Planet orb](#planet-orb) | Orbs | Space motifs, sci-fi waits |
-| [Aura orb](#aura-orb) | Orbs | Gradient waits, brand palettes |
+| [Sonar](#sonar) | Spinner | Radar pings, location detection |
+| [iOS 27 orb](#ios-27-orb) | Orbs | Voice assistants, AI thinking, holographic waits |
+| [AI orb](#ai-orb) | AI | AI assistants, generative waits |
+| [AI thinking](#ai-thinking) | AI | Chat completions, waiting on answers |
+| [AI neural](#ai-neural) | AI | Neural nets, model training |
 | [Eyes](#eyes) | Shape | Fun state, "watching" waiting |
 | [Morphing square](#morphing-square) | Shape | Modern brand moments |
 | [Breathing pulse](#breathing-pulse) | Shape | Subtle, gentle "alive" loading |
@@ -44,7 +43,6 @@ Think of it as a small zoo of loading animals. You pick an animal, put it in you
 | [Activity rings](#activity-rings) | Bars & rings | Fitness, health, Apple Watch style |
 | [Waveform](#waveform) | Music | Audio apps, playing states |
 | [Vinyl](#vinyl) | Music | Music apps, retro feels |
-| [Sonar](#sonar) | Music | Audio pulses, location pings |
 | [Music note](#music-note) | Music | Music players, playful waits |
 | [Skeleton shimmer](#skeleton-shimmer) | Skeleton | Placeholder while real content loads |
 | [Skeleton card](#skeleton-card) | Skeleton | Composite card/feed placeholders |
@@ -85,7 +83,7 @@ export function MyLoader() {
 }
 ```
 
-That's it. Importing the package **automatically registers** all 32 elements for you (it's safe to import in many places — duplicates are skipped). It is also safe on the server (SSR/Next.js): on Node there is no browser, so nothing registers and nothing breaks.
+That's it. Importing the package **automatically registers** all 30 elements for you (it's safe to import in many places — duplicates are skipped). It is also safe on the server (SSR/Next.js): on Node there is no browser, so nothing registers and nothing breaks.
 
 If you prefer to register manually:
 
@@ -113,7 +111,7 @@ Add the package from a CDN (or bundle it) and write the tags directly in your HT
 </div>
 ```
 
-Mix and match any of the 32 tags — see the full list below.
+Mix and match any of the 30 tags — see the full list below.
 
 ---
 
@@ -237,9 +235,9 @@ Every number inside every animation is also a CSS variable. Change how far dots
 | `--lz-eq-min` | Equalizer | Shortest bar height | `0.3` |
 | `--lz-slide-from` | Indeterminate bar | Slider start position | `-100%` |
 | `--lz-slide-to` | Indeterminate bar | Slider end position | `300%` |
-| `--lz-orb-scale` | Pulsing orb | Peak breathe scale | `1.16` |
-| `--lz-orb-fade` | Pulsing orb / dot orb | Mid-breathe opacity (dot orb rests at `0.14`) | `0.88` |
-| `--lz-dot-min` | Dot orb | Resting dot scale | `0.7` |
+| `--lz-ios-fade` | iOS 27 orb | Resting dot opacity | `0.2` |
+| `--lz-ios-min` | iOS 27 orb | Resting dot scale | `0.5` |
+| `--lz-ios-peak` | iOS 27 orb | Glowing dot scale | `1.25` |
 | `--lz-wf-min` | Waveform | Resting bar scale | `0.22` |
 | `--lz-sonar-fade` | Sonar | Ring start opacity | `0.9` |
 | `--lz-note-bob` | Music note | Note bob height | `0.35em` |
@@ -397,7 +395,7 @@ Variables: `--lz-stroke` · `--lz-color-weak`.
 
 ### Scan sweep
 
-**What it is:** concentric rings with a sweeping beam — like radar. **Good for:** scanning, searching, syncing data.
+**What it is:** concentric rings with crosshair ticks, a counter-rotating dial and a sweeping beam — like a radar. **Good for:** scanning, searching, syncing data.
 
 ```html
 <lz-scan-sweep size="64" color="#30d158"></lz-scan-sweep>
@@ -446,101 +444,70 @@ Variables: `--lz-dot-size` · `--lz-orbit-fade`.
 
 ---
 
-### Pulsing orb
+### iOS 27 orb
 
-**What it is:** a glowing gradient orb that breathes in and out. **Good for:** ambient loads, hero panels, app splash screens.
+**What it is:** an orb of 27 dots where a bright glow travels from the dot being "touched" to the next, spiraling inward like an iOS listening animation. **Good for:** voice assistants, AI thinking, holographic waits.
 
 ```html
-<lz-pulsing-orb size="64" accent="#ff375f"></lz-pulsing-orb>
+<lz-ios-27-orb size="64" accent="#64d2ff" color="#bf5af2"></lz-ios-27-orb>
 ```
 
 ```tsx
-<PulsingOrb size={64} accent="#ff375f" />
+<Ios27Orb size={64} accent="#64d2ff" color="#bf5af2" />
 ```
 
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `speed`.
-Variables: `--lz-orb-scale` · `--lz-orb-fade`.
-
----
-
-### Morphing orb
-
-**What it is:** a blob that endlessly morphs its silhouette between rounded shapes. **Good for:** creative waits, brand moments, game loading.
-
-```html
-<lz-morphing-orb size="64" accent="#30d158"></lz-morphing-orb>
-```
-
-```tsx
-<MorphingOrb size={64} accent="#30d158" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `speed`.
+Attributes: `size` (default `44`) · `accent` (warm pole hue, default `#0a84ff`) · `color` (cool pole hue, default `#f5f5f7`) · `speed`.
+Variables: `--lz-ios-fade` · `--lz-ios-min` · `--lz-ios-peak`.
 
 ---
 
-### Siri orb
+### AI orb
 
-**What it is:** a Siri-style orb with a multicolored sheen swirling inside a clipped circle. **Good for:** voice assistants, AI "thinking", smart waits.
+**What it is:** a breathing gradient sphere with an orbiting light dot and twinkling sparkles. **Good for:** AI assistants, generative waits, "smart" ready states.
 
 ```html
-<lz-siri-orb size="72" accent="#64d2ff"></lz-siri-orb>
+<lz-ai-orb size="64" accent="#bf5af2"></lz-ai-orb>
 ```
 
 ```tsx
-<SiriOrb size={72} accent="#64d2ff" />
+<AiOrb size={64} accent="#bf5af2" />
 ```
 
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `speed`.
+Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `color` (sparkles) · `speed`.
 
 ---
 
-### Dot orb
+### AI thinking
 
-**What it is:** a ring of shimmering dots arranged into an orb silhouette. **Good for:** orbit waits, spatial loading, gaming screens.
+**What it is:** a rounded thinking field with typing dots wrapped in a rotating accent ring. **Good for:** chat completions, AI replies, waiting on answers.
 
 ```html
-<lz-dot-orb count="12" color="#ff9f0a"></lz-dot-orb>
+<lz-ai-thinking size="44" accent="#30d158"></lz-ai-thinking>
 ```
 
 ```tsx
-<DotOrb count={12} color="#ff9f0a" />
+<AiThinking size={44} accent="#30d158" />
 ```
 
-Attributes: `size` (default `44`) · `count` (default `8`) · `color` · `speed`.
-Variables: `--lz-dot-min` · `--lz-orb-fade`.
+Attributes: `size` (default `40`) · `accent` (default `#0a84ff`) · `color` (typing dots) · `speed`.
+Variables: `--lz-surface` (field background).
 
 ---
 
-### Planet orb
+### AI neural
 
-**What it is:** a glowing planet core with small moons orbiting it. **Good for:** space motifs, science apps, sci-fi waits.
+**What it is:** a grid of dots pulsing like an artificial neural network with a diagonal activation wave. **Good for:** neural nets, model training, data pipelines.
 
 ```html
-<lz-planet-orb count="3" accent="#bf5af2" color="#64d2ff"></lz-planet-orb>
+<lz-ai-neural rows="4" cols="7" accent="#fa114f"></lz-ai-neural>
 ```
 
 ```tsx
-<PlanetOrb count={3} accent="#bf5af2" color="#64d2ff" />
+<AiNeural rows={4} cols={7} accent="#fa114f" />
 ```
 
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `color` · `count` (moons, default `2`) · `speed`.
-
----
-
-### Aura orb
-
-**What it is:** two tinted orbs counter-rotating in overlapping orbits. **Good for:** gradient waits, brand palettes, hero backgrounds.
-
-```html
-<lz-aura-orb accent="#ff375f" color="#64d2ff"></lz-aura-orb>
-```
-
-```tsx
-<AuraOrb accent="#ff375f" color="#64d2ff" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `color` · `speed`.
+Attributes: `size` (default `6`) · `rows` (default `3`) · `cols` (default `5`) · `gap` (default `10`) · `accent` (checking neurons) · `color` (resting neurons) · `speed`.
+Variables: `--lz-grid-gap` · `--lz-grid-min` · `--lz-grid-fade`.
 
 ---
 
@@ -703,7 +670,7 @@ Variables: `--lz-bar-width` · `--lz-gap` · `--lz-wf-min`.
 
 ### Vinyl
 
-**What it is:** a spinning record with a gently bobbing tonearm. **Good for:** music apps, retro waits, album screens.
+**What it is:** a spinning record with a light sheen, label, spindle and a gently bobbing tonearm. **Good for:** music apps, retro waits, album screens.
 
 ```html
 <lz-vinyl accent="#fa114f"></lz-vinyl>
@@ -719,7 +686,7 @@ Attributes: `size` (default `48`) · `accent` (label/stylus, default `#0a84ff`)
 
 ### Sonar
 
-**What it is:** a pulsing core emitting expanding sonar rings. **Good for:** audio pulses, location pings, motion waits.
+**What it is:** a pulsing core emitting expanding sonar rings. **Good for:** radar pings, location detection, motion waits.
 
 ```html
 <lz-sonar count="4" accent="#30d158"></lz-sonar>
@@ -736,7 +703,7 @@ Variables: `--lz-sonar-fade`.
 
 ### Music note
 
-**What it is:** musical note glyphs bobbing in a sing-song rhythm. **Good for:** music players, karaoke, playful waits.
+**What it is:** drawn musical notes with heads, stems and flags bobbing in a sing-song rhythm. **Good for:** music players, karaoke, playful waits.
 
 ```html
 <lz-music-note count="3" color="#bf5af2"></lz-music-note>