{"_id":"gradient-shimmer","_rev":"2-e0c7f3ccad2d605e392517e3a32a5a5e","name":"gradient-shimmer","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"gradient-shimmer","version":"0.1.0","keywords":["react","shimmer","gradient","text","animation","web-animations-api","loading","skeleton","running"],"author":{"name":"ziye"},"license":"MIT","_id":"gradient-shimmer@0.1.0","maintainers":[{"name":"lzybiasia","email":"lzybiasia@gmail.com"}],"homepage":"https://github.com/BIAsia/gradient-shimmer#readme","bugs":{"url":"https://github.com/BIAsia/gradient-shimmer/issues"},"dist":{"shasum":"46137af51e068c59628b2ceb54808e6dc8499461","tarball":"https://registry.npmjs.org/gradient-shimmer/-/gradient-shimmer-0.1.0.tgz","fileCount":7,"integrity":"sha512-/F6mQiyCZ1xZOy1H8Wa35ATGXg2XI65IfJpyIeBiL/xhwJyvbEMk/hkWd+OR8xKirWxtnhBxhP8W4YP7uluHIQ==","signatures":[{"sig":"MEQCIBo1w/+FBxQ5upJutf2O0qIfPTYWFjGnBMdLxSddlE1nAiAZJCfjNxA4XHnkkQ4zEJWh0T9ENgqUUQP7ARymPguSFg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35113},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"a39760c7505122fc62067b8af1e36e5cb4e0ca8f","scripts":{"dev":"tsup --watch","build":"tsup && node scripts/add-use-client.mjs","prepack":"npm run build","typecheck":"tsc --noEmit","smoke:pack":"node scripts/smoke-pack.mjs","release:check":"npm run typecheck && npm run smoke:pack && npm pack --dry-run","prepublishOnly":"npm run release:check"},"_npmUser":{"name":"lzybiasia","email":"lzybiasia@gmail.com"},"repository":{"url":"git+https://github.com/BIAsia/gradient-shimmer.git","type":"git"},"_npmVersion":"11.12.1","description":"A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind.","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","_hasShrinkwrap":false,"packageManager":"pnpm@11.3.0","devDependencies":{"tsup":"^8.3.0","react":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","playwright-core":"^1.61.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/gradient-shimmer_0.1.0_1782040871711_0.4584440288005831","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"gradient-shimmer","version":"0.1.1","description":"A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind.","type":"module","packageManager":"pnpm@11.3.0","sideEffects":false,"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"}},"scripts":{"build":"tsup && node scripts/add-use-client.mjs","dev":"tsup --watch","typecheck":"tsc --noEmit","smoke:pack":"node scripts/smoke-pack.mjs","release:check":"npm run typecheck && npm run smoke:pack && npm pack --dry-run","prepack":"npm run build","prepublishOnly":"npm run release:check"},"keywords":["react","shimmer","gradient","text","animation","web-animations-api","loading","skeleton","running"],"author":{"name":"ziye"},"license":"MIT","homepage":"https://github.com/BIAsia/gradient-shimmer#readme","repository":{"type":"git","url":"git+https://github.com/BIAsia/gradient-shimmer.git"},"bugs":{"url":"https://github.com/BIAsia/gradient-shimmer/issues"},"peerDependencies":{"react":">=18"},"devDependencies":{"@types/react":"^19.0.0","playwright-core":"^1.61.0","react":"^19.0.0","tsup":"^8.3.0","typescript":"^5.5.0"},"gitHead":"29e8d662e28d86d1eb9885f62919d9a5a9a10f32","_id":"gradient-shimmer@0.1.1","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-zSbJINOyDE04rxudOg0O30Vm/iozjln3f0/t5wgISzSoR0KDOhenEnmgWwX6kwxEsIidCMXu61QmLxa9zWVzwg==","shasum":"214da80a62d29c97ca174e9dc9bb286f69258d3f","tarball":"https://registry.npmjs.org/gradient-shimmer/-/gradient-shimmer-0.1.1.tgz","fileCount":7,"unpackedSize":34571,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDCSH8SswBPwatzxyZZh0AIKwx/driuv8T619OTVeezXQIhAL/YURsf4V1G961FpBpRLbAAG6J9ciDw/iLI47k4kd+g"}]},"_npmUser":{"name":"lzybiasia","email":"lzybiasia@gmail.com"},"directories":{},"maintainers":[{"name":"lzybiasia","email":"lzybiasia@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gradient-shimmer_0.1.1_1782044776555_0.4070252542152335"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-21T11:21:11.519Z","modified":"2026-06-21T12:26:16.891Z","0.1.0":"2026-06-21T11:21:11.860Z","0.1.1":"2026-06-21T12:26:16.756Z"},"bugs":{"url":"https://github.com/BIAsia/gradient-shimmer/issues"},"author":{"name":"ziye"},"license":"MIT","homepage":"https://github.com/BIAsia/gradient-shimmer#readme","keywords":["react","shimmer","gradient","text","animation","web-animations-api","loading","skeleton","running"],"repository":{"type":"git","url":"git+https://github.com/BIAsia/gradient-shimmer.git"},"description":"A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind.","maintainers":[{"name":"lzybiasia","email":"lzybiasia@gmail.com"}],"readme":"# gradient-shimmer\n\n

\n \"gradient-shimmer\n

\n\nA zero-dependency React text shimmer that sweeps a **multi-stop gradient**\nhighlight across your text. Driven by the Web Animations API — no CSS import, no\nTailwind, no runtime dependencies.\n\n```bash\nnpm i gradient-shimmer\n```\n\n## Usage\n\n```tsx\nimport { GradientShimmer } from \"gradient-shimmer\"\n\nexport function Running() {\n return memory-research\n}\n```\n\nPass your own gradient stops instead of a preset:\n\n```tsx\n\n building your project…\n\n```\n\nThe text is real DOM text (selectable, screen-readable), the band fades into the\ntext's own `currentColor`, and the sweep pauses off-screen, while scrolling, and\nunder `prefers-reduced-motion`.\n\n## Compatibility\n\n`gradient-shimmer` supports React 18+ and current evergreen browsers.\n\nThe full animated shimmer effect relies on:\n\n- `background-clip: text` / `-webkit-background-clip: text` to clip the gradient\n to real text.\n- `color-mix()` to keep the highlight's soft edges visually blended into the\n base text color.\n- `Element.animate()` from the Web Animations API to run the sweep.\n- `IntersectionObserver` for the off-screen pause behavior.\n\nFallback behavior is deliberately readable:\n\n- If `background-clip: text` is unavailable, the component renders ordinary text.\n- If `Element.animate()` is unavailable, the text keeps its first static gradient\n paint and does not sweep.\n- If `IntersectionObserver` is unavailable, the shimmer still works; only the\n off-screen pause gate is skipped.\n- If `color-mix()` is unavailable, the original blended highlight is not\n guaranteed. This library keeps `color-mix()` because that blend is part of the\n intended visual design.\n\nThe package is SSR-safe to import, but the component itself is client-side. The\npublished entry files include `\"use client\"` for React Server Components /\nNext.js App Router projects.\n\n## Props\n\n| Prop | Type | Default | Notes |\n| --- | --- | --- | --- |\n| `children` | `string` | — | The text to shimmer. |\n| `gradient` | `GradientStop[] \\| GradientPresetName` | `\"sunrise\"` | Multi-stop band or a preset (see below). |\n| `easing` | `\"smooth\" \\| \"gentle\" \\| \"snappy\"` | `\"smooth\"` | Sweep curve. |\n| `duration` | `number` | `1.45` | Reference speed; normalized by text width (constant px/s). |\n| `spread` | `number` | `3` | Band width in px/char; scales with font size. |\n| `angle` | `number` | `105` | Gradient angle in degrees. |\n| `pauseBetween` | `number` | `1000` | Idle gap (ms) after each sweep. |\n| `baseColor` | `string` | `\"currentColor\"` | Color the band fades into. |\n| `pauseOnScroll` | `boolean` | `true` | Pause while the page scrolls. |\n| `pauseWhenOffscreen` | `boolean` | `true` | Pause while outside the viewport. |\n| `respectReducedMotion` | `boolean` | `true` | Static gradient under reduced motion. |\n| `as` | `ElementType` | `\"span\"` | Element to render. |\n| `className` / `style` / `aria-*` / `data-*` | — | — | Passed through. |\n\n## Presets\n\nBuilt-in `gradient` names (`GradientPresetName`):\n\n`sunrise` · `bubble` · `sunset` · `peach` · `tonic` · `mint` · `spring` · `twilight` · `bay`\n\n## Also exported\n\n```ts\nimport { gradientPresets, easingPresets, buildBandGradient } from \"gradient-shimmer\"\n```\n\n`buildBandGradient(stops, angle)` is the pure helper that returns the CSS\n`background-image` for the highlight band — useful for SSR or custom rendering.\nIt uses `--gs-base`, `--gs-spread`, and `--gs-spread-mid` CSS variables when\nused outside the bundled component.\n\n## Next.js\n\nThe published entry files include `\"use client\"` so `GradientShimmer` works in\nNext.js App Router projects. You can import it from a Client Component directly:\n\n```tsx\nimport { GradientShimmer } from \"gradient-shimmer\"\n\nexport function StatusText() {\n return building your project...\n}\n```\n\n## Release check\n\n```bash\npnpm release:check\n```\n\nThis type-checks the source, packs the npm tarball, installs it into a temporary\nconsumer project with React 18, and verifies ESM, CJS, and TypeScript imports.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}