{"_id":"thinking-orbs","_rev":"5-4b1bfc5aad849d8933803372a1a1eea0","name":"thinking-orbs","dist-tags":{"latest":"0.3.1"},"versions":{"0.1.0":{"name":"thinking-orbs","version":"0.1.0","keywords":["react","loading","loader","spinner","ai","agent","llm","canvas","animation","dark-mode"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"thinking-orbs@0.1.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://orbs.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/thinking-orbs/issues"},"dist":{"shasum":"c5ed769c2d4b8f617caf0252624db6a95c73eb2e","tarball":"https://registry.npmjs.org/thinking-orbs/-/thinking-orbs-0.1.0.tgz","fileCount":6,"integrity":"sha512-53Z+cUMVsuWil3pNOC2vlwR9PQ1+n3ceHwI0Fd3UqaX4YTJsWeQw+9KRn9WWt66JHORYh2m3o6ZpUApX6nVULg==","signatures":[{"sig":"MEUCIGJ6iGnPjDX5adRdNpW2YLt8gAYoAZHULPOVp2a8qqH4AiEAoYz28S7y5NwxWMI0HoLBB8Eu7yxoblr5n7ZjXw1E+f4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/thinking-orbs@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":38075},"main":"dist/index.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs.js"}}},"gitHead":"b7267c138fb018c0bf93f964a4cef62ee0b9682b","scripts":{"dev":"vite --config vite.config.demo.ts","build":"vite build","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/thinking-orbs.git","type":"git"},"_npmVersion":"10.8.2","description":"Dotted thought-orb loading indicators for AI & agent UIs — six tuned states, two sizes, auto dark/light","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.3.3","@types/react":"^18.2.0","tailwind-merge":"^3.6.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.3.3","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/thinking-orbs_0.1.0_1784630810230_0.45316978710271005","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"thinking-orbs","version":"0.1.1","keywords":["react","loading","loader","spinner","ai","agent","llm","canvas","animation","dark-mode"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"thinking-orbs@0.1.1","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://orbs.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/thinking-orbs/issues"},"dist":{"shasum":"a9fea3b816e76bb750efc969cff4ccf94d529bd5","tarball":"https://registry.npmjs.org/thinking-orbs/-/thinking-orbs-0.1.1.tgz","fileCount":6,"integrity":"sha512-nLvLTGJtk74K13MmP7XiRdzFiQx7UsoZAIyBZNgXyl7Q3h2mdz0r3eKn9LCsuzb3DGOVjwDvMhtnAkIqJJRVQA==","signatures":[{"sig":"MEQCICWXE1itQ8uObsOipj3bekUoKX/c7bu0KXdgBOpahHMtAiBJdFSyp7uLr62EZPVHgOdJBm6QuepF8ypUTvwd80l/LQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/thinking-orbs@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":38109},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"382be79c472cd600277f01e14f98f8c0ee18dcb0","scripts":{"dev":"vite --config vite.config.demo.ts","build":"vite build","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/thinking-orbs.git","type":"git"},"_npmVersion":"10.8.2","description":"Dotted thought-orb loading indicators for AI & agent UIs — six tuned states, two sizes, auto dark/light","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.3.3","@types/react":"^18.2.0","tailwind-merge":"^3.6.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.3.3","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/thinking-orbs_0.1.1_1784651868710_0.8491956540547798","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"thinking-orbs","version":"0.2.0","keywords":["react","loading","loader","spinner","ai","agent","llm","canvas","animation","dark-mode"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"thinking-orbs@0.2.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://orbs.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/thinking-orbs/issues"},"dist":{"shasum":"cb20a179f2db38ae9fbae76f69966e82dccb14d8","tarball":"https://registry.npmjs.org/thinking-orbs/-/thinking-orbs-0.2.0.tgz","fileCount":6,"integrity":"sha512-CQux/YsLlB9nY60BDpZ/uW7knAvXg+U2T/gzrzuLRw8xlzfJPLXZxAg2tbbIBGp/nE2Kol1GfbMOJnoH+tcb/A==","signatures":[{"sig":"MEQCIDrkYDVxUu0DvuxSWHcN6b173/jvMwgTJOuVdRBhqvsRAiBgbIiXRjw+0vcs2WRzE84MDpd5bGCB3xT/ilIbCpYNCw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/thinking-orbs@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":47214},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./package.json":"./package.json"},"gitHead":"8157b726c35712acba57f5d72149c2d33b5f0fd6","scripts":{"dev":"vite --config vite.config.demo.ts","build":"vite build","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/thinking-orbs.git","type":"git"},"_npmVersion":"10.8.2","description":"Dotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"clsx":"^2.1.1","vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.3.3","@types/react":"^18.2.0","tailwind-merge":"^3.6.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.3.3","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/thinking-orbs_0.2.0_1785761415944_0.4412472408983168","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"thinking-orbs","version":"0.3.0","keywords":["react","loading","loader","spinner","ai","agent","llm","canvas","animation","dark-mode"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"thinking-orbs@0.3.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://orbs.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/thinking-orbs/issues"},"dist":{"shasum":"ea90c19f79890b751718f4bdf1b75b6ec9cba9ce","tarball":"https://registry.npmjs.org/thinking-orbs/-/thinking-orbs-0.3.0.tgz","fileCount":23,"integrity":"sha512-6WaaqhuQNjc8OfKQ/HIoLFpMPESUwL/Cg2sTY1zsz7D5MHUlX9UqRY7JH49P9AYfokpMMQ67hwHKZOYO5upEhA==","signatures":[{"sig":"MEQCIEaSuySxXLfkKaenqXVsy6yEiKI/IJ4vv45fLxzBL2uEAiAQGmVxmK9Ly7TVF9/jJVhSfn9n/0IhhF1uZx+FoX5jmg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/thinking-orbs@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":55109},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./engine":{"import":{"types":"./dist/engine/index.d.ts","default":"./dist/engine.es.js"},"require":{"types":"./dist/engine/index.d.ts","default":"./dist/engine.cjs"}},"./package.json":"./package.json"},"gitHead":"dd1716da9f814db1db3a1927022d95cb66cdbcbe","scripts":{"dev":"vite --config vite.config.demo.ts","spec":"tsx scripts/extract-spec.ts && tsx scripts/extract-golden.ts","build":"vite build","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.config.demo.ts","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/thinking-orbs.git","type":"git"},"_npmVersion":"10.8.2","description":"Dotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.23.12","clsx":"^2.1.1","vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","tailwindcss":"^4.3.3","@types/react":"^18.2.0","tailwind-merge":"^3.6.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@tailwindcss/vite":"^4.3.3","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/thinking-orbs_0.3.0_1786472487854_0.47978546500732944","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"thinking-orbs","version":"0.3.1","description":"Dotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light","type":"module","main":"dist/index.cjs","module":"dist/index.es.js","types":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.es.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}},"./engine":{"import":{"types":"./dist/engine/index.d.ts","default":"./dist/engine.es.js"},"require":{"types":"./dist/engine/index.d.ts","default":"./dist/engine.cjs"}},"./package.json":"./package.json"},"sideEffects":false,"scripts":{"dev":"vite --config vite.config.demo.ts","build":"vite build","build:demo":"vite build --config vite.config.demo.ts","typecheck":"tsc --noEmit","spec":"tsx scripts/extract-spec.ts && tsx scripts/extract-golden.ts","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0"},"devDependencies":{"@tailwindcss/vite":"^4.3.3","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0","clsx":"^2.1.1","react":"^18.2.0","react-dom":"^18.2.0","tailwind-merge":"^3.6.0","tailwindcss":"^4.3.3","tsx":"^4.23.12","typescript":"^5.3.0","vite":"^5.0.0","vite-plugin-dts":"^3.7.0"},"keywords":["react","loading","loader","spinner","ai","agent","llm","canvas","animation","dark-mode"],"author":{"name":"Jakub Antalik"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Jakubantalik/thinking-orbs.git"},"bugs":{"url":"https://github.com/Jakubantalik/thinking-orbs/issues"},"homepage":"https://orbs.jakubantalik.com","_id":"thinking-orbs@0.3.1","gitHead":"bd204b73c9b6660fad7210b1ad48d9dc2adbb89d","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-3BG1aeB1RUTxItCml/BBuIz5JRM4kZqGuyx+vouv0fXTtcR9ZNoKjWGneHPx94y74GxgArwJZ1qbJR5dt54kSw==","shasum":"2da2c6ff4a451375d576c17d41bbff2d2f3c633c","tarball":"https://registry.npmjs.org/thinking-orbs/-/thinking-orbs-0.3.1.tgz","fileCount":23,"unpackedSize":55080,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/thinking-orbs@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEC9nPh/hRX62XitM+V0q2eleTOsweXtP37Fc+yy0TugAiAyU/GHhkF6ulus4c9Mj5gmOJWl7lFxWKWCmavrUntI1g=="}]},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"directories":{},"maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/thinking-orbs_0.3.1_1786475227276_0.7608822970351532"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-21T10:46:49.881Z","modified":"2026-08-11T19:07:07.820Z","0.1.0":"2026-07-21T10:46:50.363Z","0.1.1":"2026-07-21T16:37:48.869Z","0.2.0":"2026-08-03T12:50:16.092Z","0.3.0":"2026-08-11T18:21:28.007Z","0.3.1":"2026-08-11T19:07:07.442Z"},"bugs":{"url":"https://github.com/Jakubantalik/thinking-orbs/issues"},"author":{"name":"Jakub Antalik"},"license":"MIT","homepage":"https://orbs.jakubantalik.com","keywords":["react","loading","loader","spinner","ai","agent","llm","canvas","animation","dark-mode"],"repository":{"type":"git","url":"git+https://github.com/Jakubantalik/thinking-orbs.git"},"description":"Dotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"readme":"# thinking-orbs\n\nDotted thought-orb loading indicators for AI & agent UIs. Nine hand-tuned animated states, each shipped at two purpose-tuned sizes, rendered on a plain 2D canvas — no WebGL, no filters, works identically in Chrome, Safari and Firefox.\n\n[Live demo](https://orbs.jakubantalik.com) · [Repository](https://github.com/Jakubantalik/thinking-orbs) · [Report an issue](https://github.com/Jakubantalik/thinking-orbs/issues)\n\n## Install\n\n```bash\nnpm install thinking-orbs\n```\n\n## Quick start\n\n```tsx\nimport { ThinkingOrb } from 'thinking-orbs';\n\nfunction Status() {\n  return <ThinkingOrb state=\"searching\" size={64} />;\n}\n```\n\n## States\n\nNine verbs an agent can be doing, each a distinct animation:\n\n```tsx\n<ThinkingOrb state=\"working\" />     {/* particles on tilted orbits */}\n<ThinkingOrb state=\"searching\" />   {/* a scan meridian sweeps a dotted globe */}\n<ThinkingOrb state=\"solving\" />     {/* bands scramble, then click back solved */}\n<ThinkingOrb state=\"listening\" />   {/* a waveform rolls through the rings */}\n<ThinkingOrb state=\"connecting\" />  {/* a constellation wires itself */}\n<ThinkingOrb state=\"weaving\" />     {/* three strands plait around the sphere */}\n<ThinkingOrb state=\"composing\" />   {/* an undulating multi-band sash */}\n<ThinkingOrb state=\"breathing\" />   {/* a ring slowly morphing */}\n<ThinkingOrb state=\"shaping\" />     {/* dotted outline: circle → triangle → square */}\n```\n\n## Sizes\n\nTwo tuned presets — separate designs, not a scale factor. `64` for chat-avatar scale, `20` for inline-text scale. Each carries its own dot count, dot size and speed tuning:\n\n```tsx\n<ThinkingOrb state=\"working\" size={64} />\n<ThinkingOrb state=\"working\" size={20} />\n```\n\n## Theme\n\nStrictly monochrome — light ink for dark backgrounds, dark ink for light backgrounds — with the mode picked automatically from the host project:\n\n```tsx\n<ThinkingOrb theme=\"auto\" />   {/* default — detects from the project */}\n<ThinkingOrb theme=\"dark\" />   {/* pin: light dots for dark backgrounds */}\n<ThinkingOrb theme=\"light\" />  {/* pin: dark dots for light backgrounds */}\n```\n\n`auto` resolves in three layers and updates live when any of them change:\n\n1. an ancestor `data-theme=\"dark|light\"` attribute or `dark`/`light` class (the Tailwind / shadcn convention), watched via `MutationObserver`;\n2. otherwise `prefers-color-scheme`, subscribed for live OS theme switches;\n3. SSR-safe — the canvas paints only on the client, after the theme has resolved.\n\n## Other props\n\n```tsx\n<ThinkingOrb\n  state=\"solving\"\n  size={20}\n  speed={1.5}          // multiplier on the preset's baked speed\n  paused={false}       // freeze on the current frame\n  aria-label=\"Analysing repository…\"  // overrides the per-state default\n/>\n```\n\nAll other `<canvas>` props (`className`, `style`, `data-*`, …) pass through.\n\n## Accessibility & performance\n\n- `role=\"img\"` with a sensible per-state `aria-label` out of the box.\n- `prefers-reduced-motion: reduce` renders a static representative frame — no animation — and still follows the live theme.\n- Every instance pauses automatically when scrolled offscreen (`IntersectionObserver`) or when the tab is hidden, and resumes in phase — all instances share one clock.\n- Plain 2D canvas arcs only: no `ctx.filter`, no SVG filters, no WebGL — the same pixels everywhere, cheap on low-end devices. Device-pixel-ratio capped at 2.\n\n## License\n\nMIT © Jakub Antalik\n","readmeFilename":"README.md"}