{"_id":"generative-loaders","_rev":"2-842031ba839fe59c818e2285782bf0c8","name":"generative-loaders","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"generative-loaders","version":"0.1.0","keywords":["react","ai","text","streaming","loader","animation","framer-motion","accessibility"],"license":"MIT","_id":"generative-loaders@0.1.0","maintainers":[{"name":"kkasturi","email":"kasturikhanke@gmail.com"}],"homepage":"https://github.com/kasturikhanke/generative-loaders#readme","bugs":{"url":"https://github.com/kasturikhanke/generative-loaders/issues"},"dist":{"shasum":"08195feb4d59bf3ffc5162beba99ea7d4cf33fe1","tarball":"https://registry.npmjs.org/generative-loaders/-/generative-loaders-0.1.0.tgz","fileCount":18,"integrity":"sha512-aFKhh47Q0XOrEBNeccjIrgzCXzXcGcEXT2nHwTiB4jc/H2pKHDfRP/TMIrpWm3+820240N+9a6Xr+MPxfXpFHg==","signatures":[{"sig":"MEYCIQCmXLRCTTy6EMgTT2NkH37gcp5P0WYDo+Skb7glF3qBgQIhAP+UPsEXn62JcvhPWKiWGquz9/PXwmY6NzjTrmYnTE8O","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78476},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":{"types":"./dist/styles.css.d.ts","default":"./dist/styles.css"}},"gitHead":"a74e91a2ea1ee34b570853b40e647c3daca495aa","scripts":{"build":"node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css && cp src/styles.css.d.ts dist/styles.css.d.ts","prepack":"npm run build"},"_npmUser":{"name":"kkasturi","email":"kasturikhanke@gmail.com"},"repository":{"url":"git+https://github.com/kasturikhanke/generative-loaders.git","type":"git","directory":"packages/generative-loaders"},"_npmVersion":"11.7.0","description":"Accessible text-streaming, inline activity, and image-generation loaders for React.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.13.0","dependencies":{"framer-motion":"^13.0.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/generative-loaders_0.1.0_1786159059019_0.427995198624213","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"generative-loaders","version":"0.1.1","description":"Accessible text-streaming, inline activity, and image-generation loaders for React.","type":"module","sideEffects":["**/*.css"],"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":{"types":"./dist/styles.css.d.ts","default":"./dist/styles.css"}},"scripts":{"build":"node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css && cp src/styles.css.d.ts dist/styles.css.d.ts","prepack":"npm run build"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"framer-motion":"^13.0.0"},"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0"},"engines":{"node":">=20"},"keywords":["react","ai","text","streaming","loader","animation","framer-motion","accessibility"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/kasturikhanke/generative-loaders.git","directory":"packages/generative-loaders"},"homepage":"https://progress-narrative.kkasturi2502.chatgpt.site","bugs":{"url":"https://github.com/kasturikhanke/generative-loaders/issues"},"publishConfig":{"access":"public","provenance":true},"gitHead":"34ff37a2c4a677a3288e5a8d81a7b740e64beceb","_id":"generative-loaders@0.1.1","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-1yipNuzn/ZZzrBKcp80RkHOq8n38k2hvo4Pk36EgHcs9ZkiO1H4bUQ9iSdAGIG00k9hH4lzXaJQyEbBFtMELuA==","shasum":"28ff693c9b8fc246c83ab9f7923130e5ca53491a","tarball":"https://registry.npmjs.org/generative-loaders/-/generative-loaders-0.1.1.tgz","fileCount":18,"unpackedSize":82835,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/generative-loaders@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD/wde9yJ2FowayKqf4t3JdQ8o70LazWzEpbWqyo7nDFwIgfi6zrNpVC8ix2ogorRx+BdzvUXoQjm2kYd3Kv0xtwHA="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:fb3f891f-1151-4f2e-9af3-8ec6d2ccf629"}},"directories":{},"maintainers":[{"name":"kkasturi","email":"kasturikhanke@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/generative-loaders_0.1.1_1786216502597_0.18146653996881446"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-08T03:17:38.903Z","modified":"2026-08-08T19:15:03.016Z","0.1.0":"2026-08-08T03:17:39.147Z","0.1.1":"2026-08-08T19:15:02.731Z"},"bugs":{"url":"https://github.com/kasturikhanke/generative-loaders/issues"},"license":"MIT","homepage":"https://progress-narrative.kkasturi2502.chatgpt.site","keywords":["react","ai","text","streaming","loader","animation","framer-motion","accessibility"],"repository":{"type":"git","url":"git+https://github.com/kasturikhanke/generative-loaders.git","directory":"packages/generative-loaders"},"description":"Accessible text-streaming, inline activity, and image-generation loaders for React.","maintainers":[{"name":"kkasturi","email":"kasturikhanke@gmail.com"}],"readme":"# generative-loaders\n\nAccessible React loading states designed for generative interfaces: sixteen animated text reveals, fourteen compact activity indicators, and nine image-generation placeholders.\n\n[Live gallery](https://progress-narrative.kkasturi2502.chatgpt.site) · [Documentation](https://progress-narrative.kkasturi2502.chatgpt.site/docs) · [GitHub](https://github.com/kasturikhanke/generative-loaders) · [Report an issue](https://github.com/kasturikhanke/generative-loaders/issues/new/choose)\n\n## Install\n\n```bash\nnpm install generative-loaders\n```\n\nThe package supports React 18 and newer. Import the stylesheet once near your application root.\n\n```tsx\nimport { ImageLoader, InlineLoader, TextLoader } from \"generative-loaders\";\nimport \"generative-loaders/styles.css\";\n\n<TextLoader text={streamedText} variant=\"decode\" color=\"#111111\" />\n\n<span>\n  <InlineLoader variant=\"matrix\" /> Thinking through the details…\n</span>\n\n<ImageLoader variant=\"bands\" size={160} label=\"Generating image\" />\n```\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\nconst [text, setText] = useState(\"\");\n\n// Append each decoded response chunk as it arrives.\nsetText((current) => current + chunk);\n\nreturn <TextLoader text={text} variant=\"cascade\" />;\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`\n\n**Image:** `skeleton`, `bands`, `tiles`, `scan`, `pixel-grid`, `resolution`, `focus`, `shutter`, `contour`\n\n## Props\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- Polite live status output for streamed text.\n- Decorative animation layers hidden from assistive technology.\n- Reduced-motion support with meaningful static states.\n- Stable SSR markup and append-aware text updates.\n- Safe fallback for invalid speed values.\n\nRead the [complete documentation](https://progress-narrative.kkasturi2502.chatgpt.site/docs) for integration examples and troubleshooting.\n\n## License\n\n[MIT](./LICENSE) © Kasturi Khanke and Generative Loaders contributors.\n","readmeFilename":"README.md"}