{"_id":"border-beam","_rev":"6-9ee08d9684a41ceb7aefa1d1df0d0c05","name":"border-beam","dist-tags":{"latest":"1.4.1"},"versions":{"1.0.1":{"name":"border-beam","version":"1.0.1","keywords":["react","animation","border","beam","glow","effect","css"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"border-beam@1.0.1","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://github.com/Jakubantalik/border-beam#readme","bugs":{"url":"https://github.com/Jakubantalik/border-beam/issues"},"dist":{"shasum":"d9e970832b716a2c5d6722486e871815271858fc","tarball":"https://registry.npmjs.org/border-beam/-/border-beam-1.0.1.tgz","fileCount":6,"integrity":"sha512-kswSYT8zRmt5en+wZMtJAbM8RjJglqSKwyRuQZWXnMHQsBwJisaznTfhD8SWvWJZKAtGbSkE2q/wY7seiNDmcw==","signatures":[{"sig":"MEUCIBySUp9NpPt3izu8atxMRo4+BJkdZQ2ZZt35rMZpfVXQAiEAmnIz3hA+5gMS8rm8gTGq9DKM1d7tEw7c32o2O0mCmNc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":120038},"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":"9667a8662702e5791c4f3ee9786bfe5491698b6a","scripts":{"dev":"vite","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/border-beam.git","type":"git"},"_npmVersion":"11.11.1","description":"Animated border beam effect for React","directories":{},"sideEffects":false,"_nodeVersion":"25.8.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/border-beam_1.0.1_1776015881801_0.11684534626167298","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"border-beam","version":"1.1.0","keywords":["react","animation","border","beam","glow","effect","css"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"border-beam@1.1.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://beam.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/border-beam/issues"},"dist":{"shasum":"1639ffe6f86f2ef5176b04718bb37ad9f66feca0","tarball":"https://registry.npmjs.org/border-beam/-/border-beam-1.1.0.tgz","fileCount":6,"integrity":"sha512-P7VN93Dg2OV4OxaFtbk0/T+IFCQuXKeRVSLFSDnNUJSv/fb37fl+YRpWr3SkRR0LCKrCYIEAIDspNVavC8MNJg==","signatures":[{"sig":"MEQCIDHeQVgP1h8pZiA1flOAN1dhChFAy5gVmQtlXmE2PjA+AiAn3OdjZRN1+/rYB/nIfqN32WPWnGYX1UYbBIsGXGCw7Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":152854},"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":"dcfc06cc0ebd72aca8984403b362efa650f2d1d9","scripts":{"dev":"vite","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/border-beam.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated border beam effect for React","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/border-beam_1.1.0_1780670620688_0.162314653452847","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"border-beam","version":"1.2.0","keywords":["react","animation","border","beam","glow","effect","css"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"border-beam@1.2.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://beam.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/border-beam/issues"},"dist":{"shasum":"b1050f77f5c82318d7961892facfebd62e0c361d","tarball":"https://registry.npmjs.org/border-beam/-/border-beam-1.2.0.tgz","fileCount":6,"integrity":"sha512-WDcuwqVgd0SqIw1VQhXoSzXS4r3YhGBdd1pb+RqDmBe7+umydR9GrnazJkRs+7ngQV/PSP/4lZHhwu36DE2+bQ==","signatures":[{"sig":"MEUCIGyysLMueJsLsEuMriO5ebHPlcpypaNTMMQSMyYErrlaAiEA9e0XA9kUDryIXgLaMAc/OkoYe2zRJL65xI6TQjm0Kig=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":153756},"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":"b2b943268544ed1c2884f50d4e781a08b705fe34","scripts":{"dev":"vite","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/border-beam.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated border beam effect for React","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/border-beam_1.2.0_1781011724749_0.525670893347322","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"border-beam","version":"1.3.0","keywords":["react","animation","border","beam","glow","effect","css"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"border-beam@1.3.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://beam.jakubantalik.com","bugs":{"url":"https://github.com/Jakubantalik/border-beam/issues"},"dist":{"shasum":"afa004eebcb5736a228343dc594a9720a47de477","tarball":"https://registry.npmjs.org/border-beam/-/border-beam-1.3.0.tgz","fileCount":6,"integrity":"sha512-oZSISp3aQau4ASTmzm5pzxeBinO6Fh2HW0gyEixJgtpUZvRiU0vNpP+IwGRrNpIyqPjA7Rf5EBnVqDSJ49cm5w==","signatures":[{"sig":"MEQCIAlZ1b0DqI3knAa6a+bhKbDXkAauS02O+rEt/hXnR7EVAiAi1oqY3yoOxK0qj9KjqwXyuN8AteX+zyYqYis9BcL0QA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":156261},"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":"50ebc2405fca40d0b907ec4c721a3cf4b1f96e25","scripts":{"dev":"vite","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/border-beam.git","type":"git"},"_npmVersion":"10.8.2","description":"Animated border beam effect for React","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/border-beam_1.3.0_1783014141257_0.3544099043211073","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"border-beam","version":"1.4.0","keywords":["react","animation","border","beam","glow","effect","css"],"author":{"name":"Jakub Antalik"},"license":"MIT","_id":"border-beam@1.4.0","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"homepage":"https://libraries.dev/beam","bugs":{"url":"https://github.com/Jakubantalik/Libraries.dev/issues"},"dist":{"shasum":"ac5846ee3c598eac6899af159d1c82368d673ad0","tarball":"https://registry.npmjs.org/border-beam/-/border-beam-1.4.0.tgz","fileCount":6,"integrity":"sha512-BsRqN5GQB76V5BlaJd64d8F0lW13HzNt/08cdxzAjlaVMV5/nb9nk0GuZKTF3qLWV2fmfbuUzXxvXisxNnw2TA==","signatures":[{"sig":"MEYCIQCpXOiz7cd1z8VkL4Gj4LeXbpY76tfLigoy8IPLJpUHCgIhAJTotgPcauGuHNfQXo5Twa4wDv3POeCfuE1znQp2XoYB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIGkzV21GkhGGxn68oyTX7h1S5PbIFTarUmqKkEJmLPsgAiEAyWSfoVmmsuISHrFLoiP9LT70+TY3ZUdzGCRywAHHWDA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":198689},"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":"b7c588f1cfe3497d1d8a2fd8a6950351f0330285","scripts":{"dev":"vite","spec":"tsx scripts/extract-spec.ts","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"repository":{"url":"git+https://github.com/Jakubantalik/Libraries.dev.git","type":"git","directory":"packages/border-beam"},"_npmVersion":"10.8.2","description":"Animated border beam effect for React","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.23.1","vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/border-beam_1.4.0_1790064672603_0.49062645713954844","host":"s3://npm-registry-packages-npm-production"}},"1.4.1":{"_id":"border-beam@1.4.1","bugs":{"url":"https://github.com/Jakubantalik/Libraries.dev/issues"},"dist":{"shasum":"74cced9e679571c4c85db75de2b387eb243f206d","tarball":"https://registry.npmjs.org/border-beam/-/border-beam-1.4.1.tgz","fileCount":6,"integrity":"sha512-YyugmKjrhkg1PBC1ZKX7JvFo/zYzha6NXOq24VWrnvBYmDRvGCgFS9oxZoKJ+oS9Kn436l1etYGlAdGiWK+3ag==","signatures":[{"sig":"MEYCIQD4lEb7lR0FQokO0o4wVANOMP4AV2V/X6kA7GUjRG1epwIhAIJJfTS0j7wDmRalnXxa99xDtehJsa7sYo8Bumqd4abL","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCqWukq1kty1Vv0JhAiPdQpQnxFkPJSHT90EAxAc/ZrgQIhAJlsCGjVmntGmIv7WC12DI/l3fGbgtgjbK0KGFibeb+X"}],"unpackedSize":198683},"main":"dist/index.cjs","name":"border-beam","type":"module","types":"dist/index.d.ts","author":{"name":"Jakub Antalik"},"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"}}},"gitHead":"740b349cd601710388c9334abd0320718d32b286","license":"MIT","scripts":{"dev":"vite","spec":"tsx scripts/extract-spec.ts","build":"vite build","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"version":"1.4.1","_npmUser":{"name":"jakubkubo","email":"jakubja@gmail.com"},"homepage":"https://libraries.dev/beam","keywords":["react","animation","border","beam","glow","effect","css"],"repository":{"url":"git+https://github.com/Jakubantalik/Libraries.dev.git","type":"git","directory":"packages/border-beam"},"_npmVersion":"10.8.2","description":"Animated border beam effect for React","directories":{},"maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"sideEffects":false,"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.23.1","vite":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","vite-plugin-dts":"^3.7.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/border-beam_1.4.1_1790092546133_0.08037389577527398"}}},"time":{"created":"2026-04-12T17:44:41.800Z","modified":"2026-09-22T15:55:46.439Z","1.0.1":"2026-04-12T17:44:41.947Z","1.1.0":"2026-06-05T14:43:40.815Z","1.2.0":"2026-06-09T13:28:44.893Z","1.3.0":"2026-07-02T17:42:21.401Z","1.4.0":"2026-09-22T08:11:12.722Z","1.4.1":"2026-09-22T15:55:46.232Z"},"bugs":{"url":"https://github.com/Jakubantalik/Libraries.dev/issues"},"author":{"name":"Jakub Antalik"},"license":"MIT","homepage":"https://libraries.dev/beam","keywords":["react","animation","border","beam","glow","effect","css"],"repository":{"url":"git+https://github.com/Jakubantalik/Libraries.dev.git","type":"git","directory":"packages/border-beam"},"description":"Animated border beam effect for React","maintainers":[{"name":"jakubkubo","email":"jakubja@gmail.com"}],"readme":"# border-beam\n\nAnimated border beam effect for React. A lightweight component that adds a traveling or breathing glow animation around any element — cards, buttons, inputs, or search bars.\n\n## Install\n\n```bash\nnpm install border-beam\n```\n\n## Quick start\n\n```tsx\nimport { BorderBeam } from 'border-beam';\n\nfunction App() {\n  return (\n    <BorderBeam>\n      <div style={{ padding: 32, borderRadius: 16, background: '#1d1d1d' }}>\n        Your content here\n      </div>\n    </BorderBeam>\n  );\n}\n```\n\nThe component wraps your content and overlays the animated beam effect. It auto-detects the `border-radius` of the first child element.\n\n## Types\n\nBuilt-in presets control the glow style and motion. They fall into two families:\n\n### Rotate (traveling beam)\n\n```tsx\n<BorderBeam size=\"md\">  {/* Full border glow (default) */}\n  <Card />\n</BorderBeam>\n\n<BorderBeam size=\"sm\">  {/* Compact glow for small elements */}\n  <IconButton />\n</BorderBeam>\n\n<BorderBeam size=\"line\">  {/* Bottom-only traveling glow */}\n  <SearchBar />\n</BorderBeam>\n```\n\n### Pulse (breathing glow, no rotation)\n\n```tsx\n<BorderBeam size=\"pulse-inner\">    {/* Contained breathing border glow */}\n  <Card />\n</BorderBeam>\n\n<BorderBeam size=\"pulse-outside\">  {/* Outward-blooming halo around the element */}\n  <Card />\n</BorderBeam>\n```\n\nBoth pulse types support all color variants, `strength`, `theme`, and the breathe\nspeed via `duration` (defaults to `2.3`).\n\n> **`pulse-outside` requires an opaque wrapped child.** The colorful core and halo\n> render *behind* your content (`z-index: -1`) and bloom outward, so only the part\n> that spills beyond the element shows. If your child is transparent, the inner glow\n> will show through. The wrapper uses `overflow: visible`, so make sure the\n> surrounding layout has room (or `overflow: visible`) for the halo to spill.\n\n> **`pulse-outside` relies on the wrapped element's own 1px border as the idle\n> hairline.** It does not paint its own hairline by default, so the colored stroke\n> rides directly on top of your element's existing edge instead of doubling it. If\n> your child has no border, add a subtle 1px border (or `box-shadow: inset 0 0 0 1px`)\n> so the edge stays defined while the beam is faded out.\n\n## Color variants\n\nFour color palettes are available:\n\n```tsx\n<BorderBeam colorVariant=\"colorful\" />  {/* Rainbow spectrum (default) */}\n<BorderBeam colorVariant=\"mono\" />      {/* Grayscale */}\n<BorderBeam colorVariant=\"ocean\" />     {/* Blue-purple tones */}\n<BorderBeam colorVariant=\"sunset\" />    {/* Orange-yellow-red tones */}\n```\n\nAll variants except `mono` animate through a hue-shift cycle.\n\n## Theme\n\nAdapts beam colors for dark or light backgrounds:\n\n```tsx\n<BorderBeam theme=\"dark\" />   {/* Dark background (default) */}\n<BorderBeam theme=\"light\" />  {/* Light background */}\n<BorderBeam theme=\"auto\" />   {/* Detects system preference */}\n```\n\n## Strength\n\nControl the overall intensity of the effect without affecting the wrapped content:\n\n```tsx\n<BorderBeam strength={0.7}>  {/* 70% intensity */}\n  <Card />\n</BorderBeam>\n```\n\n`strength` accepts a value from `0` (invisible) to `1` (full intensity, default).\n\n## Play / pause\n\nToggle the animation on and off with smooth fade transitions:\n\n```tsx\nconst [active, setActive] = useState(true);\n\n<BorderBeam active={active} onDeactivate={() => console.log('faded out')}>\n  <Card />\n</BorderBeam>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `ReactNode` | — | Content to wrap |\n| `size` | `'sm' \\| 'md' \\| 'line' \\| 'pulse-outside' \\| 'pulse-inner'` | `'md'` | Size/type preset |\n| `colorVariant` | `'colorful' \\| 'mono' \\| 'ocean' \\| 'sunset'` | `'colorful'` | Color palette |\n| `theme` | `'dark' \\| 'light' \\| 'auto'` | `'dark'` | Background adaptation |\n| `strength` | `number` | `1` | Effect opacity (0–1), only affects the beam layers |\n| `duration` | `number` | `1.96` / `3.1` / `2.3` | Animation cycle duration in seconds (rotate / line / pulse) |\n| `active` | `boolean` | `true` | Whether the animation is playing |\n| `borderRadius` | `number` | auto-detected | Custom border radius in px |\n| `brightness` | `number` | per-type (`1.3`) | Glow brightness multiplier; falls back to the type's preset default |\n| `saturation` | `number` | `1.2` | Glow saturation multiplier |\n| `hueRange` | `number` | `30` | Hue rotation range in degrees |\n| `staticColors` | `boolean` | `false` | Disable hue-shift animation |\n| `className` | `string` | — | Additional class on the wrapper |\n| `style` | `CSSProperties` | — | Additional inline styles on the wrapper |\n| `onActivate` | `() => void` | — | Called when fade-in completes |\n| `onDeactivate` | `() => void` | — | Called when fade-out completes |\n\nAll standard `HTMLDivElement` attributes are also forwarded to the wrapper.\n\n## How it works\n\n`BorderBeam` renders a wrapper `<div>` with:\n\n- **`::after`** — the beam stroke (rotate: conic gradient masked to the border; pulse: the colored perimeter ring / hairline)\n- **`::before`** — inner glow layer (pulse-outside pushes this outward behind the content)\n- **`[data-beam-bloom]`** — outer bloom/glow child div\n\nAll effect layers are absolutely positioned and use `pointer-events: none`, so they never interfere with your content. The rotate and line types animate via CSS `@property` keyframes for smooth GPU-accelerated transitions; because the keyframes also declare explicit `0% / 50% / 100%` stops, browsers without `@property` support degrade gracefully (stepped instead of interpolated motion) rather than breaking. The pulse types drive their slow breathing from a single shared, frame-rate-capped (~30fps) `requestAnimationFrame` loop that writes plain CSS custom properties — so the breathing works even without `@property` support, repaints less often, and automatically pauses when the instance is inactive, offscreen, or the user prefers reduced motion. The pulse types also isolate their stacking context, cap blur radii, and hint `will-change` on the animated layers for performance.\n\n## Project structure\n\n```\nborder-beam/\n├── src/\n│   ├── index.ts          # Public exports\n│   ├── BorderBeam.tsx     # React component\n│   ├── types.ts           # TypeScript type definitions\n│   ├── styles.ts          # CSS generation engine\n│   └── pulseDriver.ts     # Shared rAF loop driving the pulse breathing\n├── demo/                  # Vite + React demo site\n├── dist/                  # Built output (ESM + CJS + types)\n├── package.json\n├── LICENSE\n└── README.md\n```\n\n## Requirements\n\n- React 18+\n- Modern browser with CSS `@property` support (Chrome 85+, Safari 15.4+, Firefox 128+)\n\n## Accessibility\n\nThe effect layers are purely decorative and use `pointer-events: none`. They do not affect keyboard navigation or screen readers. The pulse types ship a built-in `prefers-reduced-motion: reduce` block that disables their animations; the rotate types respect `prefers-reduced-motion` when implemented by the consumer.\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}