{"_id":"gridora","_rev":"7-83853f431f7e1e4a86d3469514f60c6b","name":"gridora","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"gridora","version":"0.1.0","keywords":["gridora","react","loader","spinner","grid","animation","css","loading"],"author":{"name":"traceintime"},"license":"MIT","_id":"gridora@0.1.0","maintainers":[{"name":"edgerunner","email":"gabrielayer@protonmail.com"}],"homepage":"https://gridora.gabrielayer.com","dist":{"shasum":"73a19bb1d434352c1032a2878bff3cb2f6a98d3c","tarball":"https://registry.npmjs.org/gridora/-/gridora-0.1.0.tgz","fileCount":10,"integrity":"sha512-/V+XvcO0ViS5KWFaeazTgeGmQ5tgCCqx5628RCnmLkYCw2/LlTnDy7zDK4ofx+f5nwoO6ylDujhRhg9yIVd45A==","signatures":[{"sig":"MEUCIQCDYBQruGQ6ciX08ZD/7jDKYJAxep+ne+op0yZrF33u1gIgO0gFYIwekiI4Hoeg/Zpbp+2Xd7b1MZu64vemYsnZBYY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":492004},"main":"./dist/index.cjs","type":"module","_from":"file:gridora-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"edgerunner","email":"gabrielayer@protonmail.com"},"_resolved":"C:\\Users\\gabri\\AppData\\Local\\Temp\\08d1bfe824cf531d9efc46c3d70c88d3\\gridora-0.1.0.tgz","_integrity":"sha512-/V+XvcO0ViS5KWFaeazTgeGmQ5tgCCqx5628RCnmLkYCw2/LlTnDy7zDK4ofx+f5nwoO6ylDujhRhg9yIVd45A==","_npmVersion":"11.6.2","description":"Animated grid loaders for React — motion variants, effects, shapes and color ramps.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19","typescript":"^5","@types/react":"^19"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/gridora_0.1.0_1787907966649_0.9073733696429547","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"gridora","version":"0.2.0","keywords":["gridora","react","loader","spinner","grid","animation","css","loading","sequence"],"author":{"name":"0x65dgerunner"},"license":"MIT","_id":"gridora@0.2.0","maintainers":[{"name":"edgerunner","email":"gabrielayer@protonmail.com"}],"homepage":"https://gridora.gabrielayer.com","bugs":{"url":"https://github.com/0x65dgerunner/gridora/issues"},"dist":{"shasum":"d192e3034269c43fcda249c4c9dcf5fbf29cb1be","tarball":"https://registry.npmjs.org/gridora/-/gridora-0.2.0.tgz","fileCount":10,"integrity":"sha512-xnV5ukVj3oyn3n3+I+g6q5akrH76MJ6NoCx46wPRrl/pe1CyyzSKNpALxWMkfhwl5zZuJbHLyeJi0cCx2rmjDA==","signatures":[{"sig":"MEQCIH5GOiZgd87Gdow5HMJqSEHBVTHwqukBxPLVzVmIDm/QAiA3xvm4FuMRDRGBOmwECufkZ/YQ3VoTUsnZk6161+oAsQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":501967},"main":"./dist/index.cjs","type":"module","_from":"file:gridora-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"tsup --watch","build":"tsup"},"_npmUser":{"name":"edgerunner","email":"gabrielayer@protonmail.com"},"_resolved":"C:\\Users\\gabri\\AppData\\Local\\Temp\\faddc479ec611c535e8b146341d2bb0a\\gridora-0.2.0.tgz","_integrity":"sha512-xnV5ukVj3oyn3n3+I+g6q5akrH76MJ6NoCx46wPRrl/pe1CyyzSKNpALxWMkfhwl5zZuJbHLyeJi0cCx2rmjDA==","repository":{"url":"git+https://github.com/0x65dgerunner/gridora.git","type":"git","directory":"packages/gridora"},"_npmVersion":"11.6.2","description":"Animated grid loaders for React — variants, custom sequences, effects, shapes and color ramps.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19","typescript":"^5","@types/react":"^19"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/gridora_0.2.0_1787952264702_0.7964638008429985","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"gridora","version":"0.3.0","description":"Animated grid loaders for React — variants, custom sequences, effects, shapes and color ramps.","license":"MIT","author":{"name":"0x65dgerunner"},"homepage":"https://gridora.gabrielayer.com","repository":{"type":"git","url":"git+https://github.com/0x65dgerunner/gridora.git","directory":"packages/gridora"},"bugs":{"url":"https://github.com/0x65dgerunner/gridora/issues"},"type":"module","sideEffects":["**/*.css","./dist/styles.css","./dist/index.js","./dist/index.cjs"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"publishConfig":{"access":"public"},"peerDependencies":{"react":">=18","react-dom":">=18"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"devDependencies":{"@types/react":"^19","react":"^19","tsup":"^8.5.0","typescript":"^5"},"keywords":["gridora","react","loader","spinner","grid","animation","css","loading","sequence"],"scripts":{"embed-styles":"node scripts/embed-styles.mjs","build":"node scripts/embed-styles.mjs && tsup","dev":"node scripts/embed-styles.mjs && tsup --watch"},"_id":"gridora@0.3.0","_integrity":"sha512-vrd54353vCizwlu816f+TmywbApeId+PDsU/djOwdv+AbI7+c6XCpoxjW/VWh+Fnc3QECYmJmL5+2Bran56sRw==","_resolved":"C:\\Users\\gabri\\AppData\\Local\\Temp\\c27c52b63a8c77f887b183ac62f07480\\gridora-0.3.0.tgz","_from":"file:gridora-0.3.0.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-vrd54353vCizwlu816f+TmywbApeId+PDsU/djOwdv+AbI7+c6XCpoxjW/VWh+Fnc3QECYmJmL5+2Bran56sRw==","shasum":"611316860899a3a7fd309480580c007e6bea66f2","tarball":"https://registry.npmjs.org/gridora/-/gridora-0.3.0.tgz","fileCount":10,"unpackedSize":551214,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE8UHtFnQlaYXxxgZd2Z/uRuhQM0uOFrGnpyDqmLqK/qAiBWw+WQEiuZhdb9kU1QF1XRcF8uWnDrs9p6vjoB/QVjsQ=="}]},"_npmUser":{"name":"edgerunner","email":"gabrielayer@protonmail.com"},"directories":{},"maintainers":[{"name":"edgerunner","email":"gabrielayer@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gridora_0.3.0_1788032694150_0.4753086117781342"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-28T09:06:06.481Z","modified":"2026-08-29T19:44:54.403Z","0.1.1":"2020-06-18T14:15:01.190Z","0.1.0":"2026-08-28T09:06:06.791Z","0.2.0":"2026-08-28T21:24:24.859Z","0.3.0":"2026-08-29T19:44:54.281Z"},"bugs":{"url":"https://github.com/0x65dgerunner/gridora/issues"},"author":{"name":"0x65dgerunner"},"license":"MIT","homepage":"https://gridora.gabrielayer.com","keywords":["gridora","react","loader","spinner","grid","animation","css","loading","sequence"],"repository":{"type":"git","url":"git+https://github.com/0x65dgerunner/gridora.git","directory":"packages/gridora"},"description":"Animated grid loaders for React — variants, custom sequences, effects, shapes and color ramps.","maintainers":[{"name":"edgerunner","email":"gabrielayer@protonmail.com"}],"readme":"# gridora\r\n\r\n[![npm version](https://img.shields.io/npm/v/gridora)](https://www.npmjs.com/package/gridora)\r\n[![npm downloads](https://img.shields.io/npm/dm/gridora)](https://www.npmjs.com/package/gridora)\r\n[![license](https://img.shields.io/npm/l/gridora)](./LICENSE)\r\n[![React](https://img.shields.io/badge/React-%3E%3D18-61dafb?logo=react&logoColor=white)](#install)\r\n\r\nAnimated grid loaders for React — motion variants, per-dot effects, shapes, color ramps, a bitmap font, and custom cell sequences.\r\n\r\n**[Gallery](https://gridora.gabrielayer.com/loaders/radial)** · **[Studio](https://gridora.gabrielayer.com/studio)** · **[GitHub](https://github.com/0x65dgerunner/gridora)**\r\n\r\n## Install\r\n\r\n```bash\r\npnpm add gridora\r\n```\r\n\r\n```bash\r\nnpm install gridora\r\n```\r\n\r\n```bash\r\nbun add gridora\r\n```\r\n\r\nPeer dependency: **React 18+**.\r\n\r\n## Usage\r\n\r\nImport the component — keyframe styles are injected automatically on the client:\r\n\r\n```tsx\r\nimport { GridLoader } from \"gridora\"\r\n\r\nexport function Loader() {\r\n  return <GridLoader variant=\"orbit\" />\r\n}\r\n```\r\n\r\nOptional: import `gridora/styles.css` yourself if you prefer a static stylesheet (SSR without flash, strict CSP, etc.).\r\n\r\n### Customization\r\n\r\n```tsx\r\n<GridLoader\r\n  variant=\"radialPulse\"\r\n  gridSize={7}\r\n  cellSize={6}\r\n  gap={2}\r\n  speed={1.2}\r\n  colors={[\"#6366f1\", \"#a855f7\", \"#ec4899\"]}\r\n  colorMode=\"radial\"\r\n  effect=\"glow\"\r\n  shape=\"diamond\"\r\n  glow={4}\r\n/>\r\n```\r\n\r\n### Custom sequence\r\n\r\nPass ordered cell indices (`row * gridSize + col`). Animation delay follows that list; cells not listed stay inactive. This overrides `variant` and `mask`.\r\n\r\n```tsx\r\n<GridLoader\r\n  gridSize={5}\r\n  sequence={[0, 1, 2, 7, 12, 11, 10]}\r\n  effect=\"pulse\"\r\n  inactive=\"hidden\"\r\n/>\r\n```\r\n\r\nDesign sequences visually in the **[Studio](https://gridora.gabrielayer.com/studio)** and copy the snippet.\r\n\r\n### Text loader\r\n\r\nDraw strings with the built-in bitmap font:\r\n\r\n```tsx\r\nimport { GridLoaderText } from \"gridora\"\r\n\r\n<GridLoaderText text=\"LOAD\" effect=\"pulse\" color=\"#fff\" />\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| `variant` | `GridLoaderVariant` | `\"tokenStream\"` | Built-in motion or glyph pattern |\r\n| `sequence` | `number[]` | — | Custom cell order; overrides `variant` / `mask` |\r\n| `mask` | `GridMask \\| string` | — | Bitmap shape; drawing order via `maskMotion` |\r\n| `gridSize` | `number` | `3` | Rows and columns (2–12) |\r\n| `cellSize` | `number` | `4` | Cell size in pixels |\r\n| `dotSize` | `number` | `cellSize × 0.875` | Dot size in pixels |\r\n| `gap` | `number` | `2.5` | Space between cells |\r\n| `speed` | `number` | `1` | Cycle duration in seconds |\r\n| `spread` | `number` | `1` | How much of the cycle the stagger spans |\r\n| `color` | `string` | `\"currentColor\"` | Base color |\r\n| `colors` | `string[]` | — | Color ramp |\r\n| `colorMode` | `GridLoaderColorMode` | `\"solid\"` | How `colors` map onto the grid |\r\n| `effect` | `GridLoaderEffect` | `\"pulse\"` | Per-dot keyframes |\r\n| `shape` | `GridLoaderShape` | `\"circle\"` | Dot silhouette |\r\n| `easing` | `string` | `\"ease\"` | CSS timing function |\r\n| `inactive` | `\"dim\" \\| \"hidden\" \\| \"solid\"` | `\"dim\"` | Cells outside the shape |\r\n| `reverse` | `boolean` | `false` | Play the stagger backwards |\r\n| `paused` | `boolean` | `false` | Freeze the animation |\r\n| `label` | `string` | `\"Loading\"` | Accessible status label |\r\n| `respectReducedMotion` | `boolean` | `false` | Honor `prefers-reduced-motion` |\r\n\r\nAlso: `glow`, `minOpacity`, `maxOpacity`, `minScale`, `maxScale`, `offset`, `maskMotion`, `inactiveOpacity`, `inactiveColor`.\r\n\r\n## Helpers\r\n\r\n```tsx\r\nimport {\r\n  GRID_LOADER_VARIANTS,\r\n  GRID_LOADER_EFFECTS,\r\n  GRID_LOADER_SHAPES,\r\n  GRID_LOADER_DEFAULTS,\r\n  sequenceToPhases,\r\n  computePhases,\r\n} from \"gridora\"\r\n```\r\n\r\n`sequenceToPhases(sequence, gridSize)` turns an ordered index list into the per-cell phase array used by the loader.\r\n\r\n## Links\r\n\r\n- **Studio:** [gridora.gabrielayer.com/studio](https://gridora.gabrielayer.com/studio)\r\n- **Gallery:** [gridora.gabrielayer.com/loaders/radial](https://gridora.gabrielayer.com/loaders/radial)\r\n- **GitHub:** [0x65dgerunner/gridora](https://github.com/0x65dgerunner/gridora)\r\n- **npm:** [gridora](https://www.npmjs.com/package/gridora)\r\n\r\n## License\r\n\r\n[MIT](./LICENSE) © [0x65dgerunner](https://github.com/0x65dgerunner)\r\n","readmeFilename":"README.md"}