loading-state-zoo 0.2.0 → 0.4.0

package/docs/components.json

@@ -1,9 +1,9 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$comment": "loading-state-zoo v0.2.0 — machine-readable spec. Source of truth for all 21 components. Defaults match the rendered site.",
+  "$comment": "loading-state-zoo v0.4.0 — machine-readable spec. Source of truth for all 30 components. Defaults match the rendered site.",
   "package": {
     "name": "loading-state-zoo",
-    "version": "0.2.0",
+    "version": "0.4.0",
     "entrypoints": {
       "webComponents": "loading-state-zoo",
       "react": "loading-state-zoo/react",
@@ -287,7 +287,7 @@
       "reactComponent": "ScanSweep",
       "category": "Spinners",
       "role": "status",
-      "description": "Concentric rings with a sweeping radar beam.",
+      "description": "Concentric rings with crosshair ticks, a counter-rotating dial and a sweeping radar beam.",
       "useCases": ["scanning", "searching", "syncing"],
       "defaults": { "size": 44, "color": "#f5f5f7", "speed": 1 },
       "attributes": [
@@ -646,6 +646,262 @@
         "html": "<lz-skeleton-list width=\"220\" rows=\"5\"></lz-skeleton-list>",
         "react": "<SkeletonList width={220} rows={5} />"
       }
+    },
+    {
+      "id": "ios-27-orb",
+      "tag": "lz-ios-27-orb",
+      "reactComponent": "Ios27Orb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "An orb of 27 dots where a bright glow travels from one touched dot to the next, spiraling inward like an iOS listening animation.",
+      "useCases": ["voice assistants", "AI thinking", "holographic waits"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Warm pole hue" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Cool pole hue" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-ios-fade", "default": "0.2", "purpose": "Resting dot opacity" },
+        { "name": "--lz-ios-min", "default": "0.5", "purpose": "Resting dot scale" },
+        { "name": "--lz-ios-peak", "default": "1.25", "purpose": "Glowing dot scale" }
+      ],
+      "examples": {
+        "html": "<lz-ios-27-orb size=\"64\" accent=\"#64d2ff\" color=\"#bf5af2\"></lz-ios-27-orb>",
+        "react": "<Ios27Orb size={64} accent=\"#64d2ff\" color=\"#bf5af2\" />"
+      }
+    },
+    {
+      "id": "ai-orb",
+      "tag": "lz-ai-orb",
+      "reactComponent": "AiOrb",
+      "category": "AI",
+      "role": "status",
+      "description": "A breathing gradient sphere with an orbiting light dot and twinkling sparkles — an AI assist orb.",
+      "useCases": ["AI assistants", "generative waits", "smart ready states"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Orb gradient hue" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Sparkle color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-ai-orb size=\"64\" accent=\"#bf5af2\"></lz-ai-orb>",
+        "react": "<AiOrb size={64} accent=\"#bf5af2\" />"
+      }
+    },
+    {
+      "id": "ai-thinking",
+      "tag": "lz-ai-thinking",
+      "reactComponent": "AiThinking",
+      "category": "AI",
+      "role": "status",
+      "description": "A rounded thinking field with typing dots wrapped in a rotating accent ring.",
+      "useCases": ["chat completions", "AI replies", "waiting on answers"],
+      "defaults": { "size": 40, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 40 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "40px", "purpose": "Field height" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Rotating ring color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Typing dot color" },
+        { "name": "--lz-surface", "default": "rgba(255,255,255,0.07)", "purpose": "Field background" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-ai-thinking size=\"44\" accent=\"#30d158\"></lz-ai-thinking>",
+        "react": "<AiThinking size={44} accent=\"#30d158\" />"
+      }
+    },
+    {
+      "id": "ai-neural",
+      "tag": "lz-ai-neural",
+      "reactComponent": "AiNeural",
+      "category": "AI",
+      "role": "status",
+      "description": "A grid of dots pulsing like an artificial neural network with a diagonal activation wave.",
+      "useCases": ["neural nets", "model training", "data pipelines"],
+      "defaults": { "size": 6, "rows": 3, "cols": 5, "gap": 10, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 6 },
+        { "name": "rows", "reactProp": "rows", "type": "number", "unit": "rows", "default": 3 },
+        { "name": "cols", "reactProp": "cols", "type": "number", "unit": "cols", "default": 5 },
+        { "name": "gap", "reactProp": "gap", "type": "number", "unit": "px", "default": 10 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "6px", "purpose": "Dot diameter" },
+        { "name": "--lz-cols", "default": "5", "purpose": "Grid column count" },
+        { "name": "--lz-grid-gap", "default": "10px", "purpose": "Grid gap" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Checking neurons color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Resting neurons color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-grid-min", "default": "0.3", "purpose": "Resting dot scale" },
+        { "name": "--lz-grid-fade", "default": "0.15", "purpose": "Resting dot opacity" }
+      ],
+      "examples": {
+        "html": "<lz-ai-neural rows=\"4\" cols=\"7\" accent=\"#fa114f\"></lz-ai-neural>",
+        "react": "<AiNeural rows={4} cols={7} accent=\"#fa114f\" />"
+      }
+    },
+    {
+      "id": "waveform",
+      "tag": "lz-waveform",
+      "reactComponent": "Waveform",
+      "category": "Music",
+      "role": "status",
+      "description": "A mirrored audio waveform pulsing around a center line.",
+      "useCases": ["audio apps", "playing states", "podcast waits"],
+      "defaults": { "size": 32, "count": 11, "color": "#f5f5f7", "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 32 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "bars", "default": 11 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "32px", "purpose": "Wave height" },
+        { "name": "--lz-bar-width", "default": "4px", "purpose": "Bar thickness" },
+        { "name": "--lz-gap", "default": "4px", "purpose": "Bar spacing" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-wf-min", "default": "0.22", "purpose": "Resting bar scale" }
+      ],
+      "examples": {
+        "html": "<lz-waveform count=\"15\" accent=\"#bf5af2\"></lz-waveform>",
+        "react": "<Waveform count={15} accent=\"#bf5af2\" />"
+      }
+    },
+    {
+      "id": "vinyl",
+      "tag": "lz-vinyl",
+      "reactComponent": "Vinyl",
+      "category": "Music",
+      "role": "status",
+      "description": "A spinning record with a light sheen, label, spindle and a gently bobbing tonearm.",
+      "useCases": ["music apps", "retro waits", "album screens"],
+      "defaults": { "size": 48, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 48 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "48px", "purpose": "Record diameter" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Label / stylus color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Tonearm color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-vinyl accent=\"#fa114f\" color=\"#f5f5f7\"></lz-vinyl>",
+        "react": "<Vinyl accent=\"#fa114f\" />"
+      }
+    },
+    {
+      "id": "sonar",
+      "tag": "lz-sonar",
+      "reactComponent": "Sonar",
+      "category": "Spinners",
+      "role": "status",
+      "description": "A pulsing core emitting expanding sonar rings.",
+      "useCases": ["radar pings", "location detection", "motion waits"],
+      "defaults": { "size": 44, "count": 3, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "rings", "default": 3 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Radar size" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Ring color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Core color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-sonar-fade", "default": "0.9", "purpose": "Ring start opacity" }
+      ],
+      "examples": {
+        "html": "<lz-sonar count=\"4\" accent=\"#30d158\"></lz-sonar>",
+        "react": "<Sonar count={4} accent=\"#30d158\" />"
+      }
+    },
+    {
+      "id": "music-note",
+      "tag": "lz-music-note",
+      "reactComponent": "MusicNote",
+      "category": "Music",
+      "role": "status",
+      "description": "Drawn musical notes with heads, stems and flags bobbing in a sing-song rhythm.",
+      "useCases": ["music players", "karaoke", "playful waits"],
+      "defaults": { "size": 32, "count": 2, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 32 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "notes", "default": 2 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "32px", "purpose": "Note size" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Note color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-note-bob", "default": "0.35em", "purpose": "Note bob height" }
+      ],
+      "examples": {
+        "html": "<lz-music-note count=\"3\" color=\"#bf5af2\"></lz-music-note>",
+        "react": "<MusicNote count={3} color=\"#bf5af2\" />"
+      }
+    },
+    {
+      "id": "activity-rings",
+      "tag": "lz-activity-rings",
+      "reactComponent": "ActivityRings",
+      "category": "Bars & rings",
+      "role": "img",
+      "description": "Three Apple Watch-style activity rings spinning at different speeds and directions.",
+      "useCases": ["fitness apps", "health dashboards", "workout sync"],
+      "defaults": { "size": 44, "accent": "#fa114f", "color": "#30d158", "colorWeak": "#32d7ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#fa114f" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#30d158" },
+        { "name": "color-weak", "reactProp": "colorWeak", "type": "string", "default": "#32d7ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-accent", "default": "#fa114f", "purpose": "Outer ring color" },
+        { "name": "--lz-color", "default": "#30d158", "purpose": "Middle ring color" },
+        { "name": "--lz-color-weak", "default": "#32d7ff", "purpose": "Inner ring color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-activity-rings size=\"64\"></lz-activity-rings>",
+        "react": "<ActivityRings size={64} />"
+      }
     }
   ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loading-state-zoo",
-  "version": "0.2.0",
-  "description": "17 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
+  "version": "0.4.0",
+  "description": "30 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",