[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-94635":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},94635,"generative-loaders","kasturikhanke\u002Fgenerative-loaders","kasturikhanke","Accessible React loading states for generative interfaces: streamed text, inline activity, and image generation.","https:\u002F\u002Fgenerativeloaders.com",null,"TypeScript",126,6,102,3,0,16,44.14,"MIT License",false,"main",true,[24,25,26,27,28,29,30,31],"accessibility","ai","animation","framer-motion","generative-ui","loader","react","typescript","2026-08-24 04:01:22","# Generative Loaders\n\n[![CI](https:\u002F\u002Fgithub.com\u002Fkasturikhanke\u002Fgenerative-loaders\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fkasturikhanke\u002Fgenerative-loaders\u002Factions\u002Fworkflows\u002Fci.yml)\n[![npm version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fgenerative-loaders.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgenerative-loaders)\n[![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fgenerative-loaders.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgenerative-loaders)\n[![MIT license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-111111.svg)](.\u002FLICENSE)\n\nAccessible React loading states designed for generative interfaces: sixteen animated text reveals, eighteen compact activity indicators, and twelve image-generation placeholders.\n\n[Live gallery](https:\u002F\u002Fgenerativeloaders.com) · [Documentation](https:\u002F\u002Fgenerativeloaders.com\u002Fdocs) · [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgenerative-loaders) · [Report an issue](https:\u002F\u002Fgithub.com\u002Fkasturikhanke\u002Fgenerative-loaders\u002Fissues\u002Fnew\u002Fchoose)\n\n## Install\n\n```bash\nnpm install generative-loaders\n```\n\nThe package supports React 18 and newer.\n\n## Quick start\n\nImport the component you need and include the stylesheet once near your application root.\n\n```tsx\nimport { ImageLoader, InlineLoader, TextLoader } from \"generative-loaders\";\nimport \"generative-loaders\u002Fstyles.css\";\n\nexport function GeneratingAnswer({ text }: { text: string }) {\n  return \u003CTextLoader text={text} variant=\"decode\" \u002F>;\n}\n\nexport function PendingStatus() {\n  return \u003Cspan>\u003CInlineLoader variant=\"orbit\" \u002F> Thinking…\u003C\u002Fspan>;\n}\n\nexport function PendingImage() {\n  return \u003CImageLoader variant=\"tiles\" size={192} label=\"Generating product image\" \u002F>;\n}\n```\n\n## Three primitives\n\n| Component | Use it for | Included variants |\n| --- | --- | ---: |\n| `TextLoader` | Responses that grow as tokens or chunks arrive | 16 |\n| `InlineLoader` | Buttons, status rows, and the wait before text arrives | 18 |\n| `ImageLoader` | Reserved image frames while generation is in progress | 12 |\n\n### Streaming text\n\nPass the complete response received so far—not only the newest token. `TextLoader` keeps the existing prefix stable and animates only the newly appended suffix.\n\n```tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { TextLoader } from \"generative-loaders\";\nimport \"generative-loaders\u002Fstyles.css\";\n\nexport function StreamingAnswer() {\n  const [text, setText] = useState(\"\");\n\n  async function generate() {\n    setText(\"\");\n    const response = await fetch(\"\u002Fapi\u002Fgenerate\", { method: \"POST\" });\n    if (!response.ok || !response.body) throw new Error(\"Generation failed\");\n\n    const reader = response.body.getReader();\n    const decoder = new TextDecoder();\n\n    while (true) {\n      const { value, done } = await reader.read();\n      if (done) break;\n      setText((current) => current + decoder.decode(value, { stream: true }));\n    }\n  }\n\n  return \u003CTextLoader text={text} variant=\"cascade\" \u002F>;\n}\n```\n\n## Variants\n\n**Text:** `decode`, `typewriter`, `skeleton`, `cascade`, `focus`, `wipe`, `flip`, `redact`, `line`, `terminal`, `wave`, `dissolve`, `slice`, `tracking`, `coalesce`, `fragments`\n\n**Inline:** `glyph`, `matrix`, `orbit`, `ripple`, `signal`, `spark`, `rotor`, `pixel-drift`, `chomp`, `snake`, `fold`, `gravity`, `domino`, `aperture`, `dot-pulse`, `vortex`, `halo`, `count-up`\n\n**Image:** `skeleton`, `bands`, `tiles`, `scan`, `pixel-grid`, `resolution`, `coalesce`, `diffusion`, `raster`, `bloom`, `focus`, `shutter`\n\nSee every variant, speed control, and usage context in the [live gallery](https:\u002F\u002Fgenerativeloaders.com).\n\n## API\n\n### `TextLoader`\n\n| Prop | Type | Default |\n| --- | --- | --- |\n| `text` | `string` | required |\n| `variant` | `TextLoaderVariant` | required |\n| `color` | CSS color string | `\"#111111\"` |\n| `speed` | positive number | `1` |\n| `paused` | `boolean` | `false` |\n| `className` | `string` | — |\n| `aria-label` | `string` | normalized `text` |\n\n`InlineLoader` accepts `variant`, `size`, `color`, `speed`, `paused`, `className`, and an optional accessible `label`.\n\n`ImageLoader` accepts `variant`, `size`, `color`, `radius`, `speed`, `paused`, `className`, and `label`. Its default label is “Generating image.”\n\nAll prop and variant types are exported from the package root.\n\n## Accessibility and behavior\n\n- `TextLoader` exposes received text through a polite live status while keeping decorative animation layers hidden from assistive technology.\n- `InlineLoader` avoids duplicate announcements when adjacent text already describes the activity; add `label` when it stands alone.\n- Every loader respects `prefers-reduced-motion` and retains a meaningful static state.\n- Text updates are append-aware, so previously received content does not reanimate.\n- Components render stable server markup and are safe to use in SSR applications.\n- Invalid, zero, or negative speed values safely fall back to `1`.\n\n## Development\n\nThis repository is an npm workspace containing the package and its live gallery.\n\n```bash\nnpm install\nnpm run dev\n```\n\nBefore opening a pull request, run:\n\n```bash\nnpm test\nnpm run lint\nnpm pack --workspace generative-loaders --dry-run\n```\n\nSee [CONTRIBUTING.md](.\u002FCONTRIBUTING.md) for the full workflow. For help using the package, read the [documentation](https:\u002F\u002Fgenerativeloaders.com\u002Fdocs) or [open an issue](https:\u002F\u002Fgithub.com\u002Fkasturikhanke\u002Fgenerative-loaders\u002Fissues\u002Fnew\u002Fchoose).\n\n## License\n\n[MIT](.\u002FLICENSE) © Kasturi Khanke and Generative Loaders contributors.\n","Generative Loaders 是一个面向生成式 AI 界面的 React 加载状态组件库，提供可访问、动画流畅的加载体验。它包含三类核心组件：支持流式文本逐字\u002F逐块渲染的 TextLoader（16 种变体）、适用于按钮或内联状态的 InlineLoader（18 种）、以及为图像生成预留占位空间的 ImageLoader（12 种），所有组件均基于 Framer Motion 实现高性能动画并符合无障碍标准（ARIA）。适用于 LLM 响应流式展示、AI 图像生成等待、对话界面状态反馈等生成式 UI 场景。",2,"2026-08-13 02:30:05","CREATED_QUERY"]