{"_id":"@daniesy/beam-border","_rev":"3-d3a9f063fd2ecd20716659f4a4f59ef6","name":"@daniesy/beam-border","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.0":{"name":"@daniesy/beam-border","version":"0.0.0","keywords":["vue","vue3","vue-component","animation","border","beam","glow","border-beam","effect","css"],"author":{"name":"Dan Florian","email":"hello@danutflorian.com"},"license":"MIT","_id":"@daniesy/beam-border@0.0.0","maintainers":[{"name":"daniesy","email":"daniesy@me.com"}],"dist":{"shasum":"2dad37f0e42b4bb3faea6e4d872e43c81ea47c5d","tarball":"https://registry.npmjs.org/@daniesy/beam-border/-/beam-border-0.0.0.tgz","fileCount":6,"integrity":"sha512-yRxsAaIS020J/bBY8BuR+v8hkaniN+6z7jaoqlBriE5+NycmJwSu2OGtqJLxEga2F+P0y4ACiEGBuoXZ3mmMEg==","signatures":[{"sig":"MEUCIAdqgsMGZBFCckGO59eFdSdlI4qAha3BE8HU6lPSVfB+AiEAwRtJv5IoF7pSMuxcJXICxBdeT1YSEPQZvs775bbkA1c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":162606},"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":"92aae87783795063737f592f46363d0d8932e91f","scripts":{"dev":"vite --host 127.0.0.1","test":"vitest run","build":"vite build","release":"bumpp --all","typecheck":"vue-tsc --noEmit","test:watch":"vitest","pack:dry-run":"npm pack --dry-run","prepublishOnly":"npm run typecheck && npm run test && npm run build"},"_npmUser":{"name":"daniesy","email":"daniesy@me.com"},"_npmVersion":"11.13.0","description":"Vue 3 port of border-beam animated border glow effect","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.17","vite":"^7.0.0","bumpp":"^11.1.0","jsdom":"^26.1.0","vitest":"^3.2.4","vue-tsc":"^3.0.4","typescript":"^5.8.3","@types/node":"^25.9.2","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":">=3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/beam-border_0.0.0_1781123407558_0.7011102205687056","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@daniesy/beam-border","version":"1.0.0","keywords":["vue","vue3","vue-component","animation","border","beam","glow","border-beam","effect","css"],"author":{"name":"Dan Florian","email":"hello@danutflorian.com"},"license":"MIT","_id":"@daniesy/beam-border@1.0.0","maintainers":[{"name":"daniesy","email":"daniesy@me.com"}],"dist":{"shasum":"fab0eb30051d18204559f82235273022ebca5e97","tarball":"https://registry.npmjs.org/@daniesy/beam-border/-/beam-border-1.0.0.tgz","fileCount":6,"integrity":"sha512-u+IpSmYKTtrV2M68rlMff+9NGf62jX8yPwOC+jqk7II9LRBGpjwiGlHT3coW8xm3kUahHKeXvhdAw01w0I1EGA==","signatures":[{"sig":"MEUCIQD3jiF4yfWCDAON8+GeSWFON7/PYXYNf39acRkZZw/rggIgDec56rweRmKiFFrgHdlOYbtwG2U9SJ1xy2gKCDlI64s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":162606},"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":"611220f5af87c0e243eaf8218ca85425cea92fb6","scripts":{"dev":"vite --host 127.0.0.1","test":"vitest run","build":"vite build","release":"bumpp --all","typecheck":"vue-tsc --noEmit","test:watch":"vitest","pack:dry-run":"npm pack --dry-run","prepublishOnly":"npm run typecheck && npm run test && npm run build"},"_npmUser":{"name":"daniesy","email":"daniesy@me.com"},"_npmVersion":"11.13.0","description":"Vue 3 port of border-beam animated border glow effect","directories":{},"sideEffects":false,"_nodeVersion":"24.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.17","vite":"^7.0.0","bumpp":"^11.1.0","jsdom":"^26.1.0","vitest":"^3.2.4","vue-tsc":"^3.0.4","typescript":"^5.8.3","@types/node":"^25.9.2","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":">=3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/beam-border_1.0.0_1781123444600_0.8616099291463477","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@daniesy/beam-border","author":{"name":"Dan Florian","email":"hello@danutflorian.com"},"version":"1.0.1","description":"Vue 3 port of border-beam animated border glow effect","type":"module","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"}},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/daniesy/beam-border.git"},"sideEffects":false,"scripts":{"dev":"vite --host 127.0.0.1","build":"vite build","typecheck":"vue-tsc --noEmit","test":"vitest run","test:watch":"vitest","pack:dry-run":"npm pack --dry-run","prepublishOnly":"npm run typecheck && npm run test && npm run build","release":"bumpp --all"},"keywords":["vue","vue3","vue-component","animation","border","beam","glow","border-beam","effect","css"],"license":"MIT","peerDependencies":{"vue":">=3.5.0"},"devDependencies":{"@types/node":"^25.9.2","@vitejs/plugin-vue":"^6.0.1","@vue/test-utils":"^2.4.6","bumpp":"^11.1.0","jsdom":"^26.1.0","typescript":"^5.8.3","vite":"^7.0.0","vite-plugin-dts":"^4.5.4","vitest":"^3.2.4","vue":"^3.5.17","vue-tsc":"^3.0.4"},"gitHead":"53ef0fb4872aad4ae32d519ea11206156e2891b4","_id":"@daniesy/beam-border@1.0.1","bugs":{"url":"https://github.com/daniesy/beam-border/issues"},"homepage":"https://github.com/daniesy/beam-border#readme","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-65CnqmsZ3IcGv8KZgt0TjHAKRPyFKkvBcyNIWuM/f9RaYvTvoN/p6zLP3Oketl0OQF0c7cgUqto9lJiMX5hUSA==","shasum":"438c85dfb960f9e8adda2a08e8c311d0bed43c39","tarball":"https://registry.npmjs.org/@daniesy/beam-border/-/beam-border-1.0.1.tgz","fileCount":6,"unpackedSize":163593,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDO/MhsxQQIjuZWDN9mi/Cwf09MxeCTZvXfXlpRioAtcAiEA/PiSB5pYBFiyoxHKYHqLktOnI7zitWI2d/DTqDTcbO8="}]},"_npmUser":{"name":"daniesy","email":"daniesy@me.com"},"directories":{},"maintainers":[{"name":"daniesy","email":"daniesy@me.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/beam-border_1.0.1_1784156412317_0.49838389345633205"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-10T20:30:07.349Z","modified":"2026-07-15T23:00:12.621Z","0.0.0":"2026-06-10T20:30:07.701Z","1.0.0":"2026-06-10T20:30:44.748Z","1.0.1":"2026-07-15T23:00:12.500Z"},"author":{"name":"Dan Florian","email":"hello@danutflorian.com"},"license":"MIT","keywords":["vue","vue3","vue-component","animation","border","beam","glow","border-beam","effect","css"],"description":"Vue 3 port of border-beam animated border glow effect","maintainers":[{"name":"daniesy","email":"daniesy@me.com"}],"readme":"# @daniesy/beam-border\n\nAnimated border beam effect for Vue 3. This package is a Vue port of Jakub Antalik's original React [`border-beam`](https://github.com/Jakubantalik/border-beam) project, adapted to Vue single-file components, Composition API composables, Vue events, and Vue fallthrough attributes.\n\nIt adds a traveling or breathing glow around any slotted element: cards, buttons, inputs, search bars, panels, and other UI surfaces.\n\n## Install\n\n```sh\nnpm install @daniesy/beam-border\n```\n\nVue is a peer dependency:\n\n```sh\nnpm install vue\n```\n\n## Quick start\n\n```vue\n<script setup lang=\"ts\">\nimport { BorderBeam } from \"@daniesy/beam-border\";\n</script>\n\n<template>\n  <BorderBeam>\n    <div class=\"card\">Your content here</div>\n  </BorderBeam>\n</template>\n\n<style scoped>\n.card {\n  border-radius: 16px;\n  padding: 32px;\n  background: #1d1d1d;\n}\n</style>\n```\n\nThe component wraps your default slot and overlays the animated beam effect. It auto-detects the `border-radius` of the first slotted element unless you pass `border-radius` explicitly.\n\n## Types\n\nBuilt-in presets control the glow style and motion. They fall into two families.\n\n### Rotate\n\n```vue\n<template>\n  <BorderBeam size=\"md\">\n    <Card />\n  </BorderBeam>\n\n  <BorderBeam size=\"sm\">\n    <IconButton />\n  </BorderBeam>\n\n  <BorderBeam size=\"line\">\n    <SearchBar />\n  </BorderBeam>\n</template>\n```\n\n- `md` is the default full border glow.\n- `sm` is tuned for compact elements.\n- `line` is a bottom-only traveling glow.\n\n### Pulse\n\n```vue\n<template>\n  <BorderBeam size=\"pulse-inner\">\n    <Card />\n  </BorderBeam>\n\n  <BorderBeam size=\"pulse-outside\">\n    <Card />\n  </BorderBeam>\n</template>\n```\n\n- `pulse-inner` is a contained breathing border glow.\n- `pulse-outside` is an outward-blooming halo around the element.\n\nBoth pulse types support all color variants, `strength`, `theme`, `tint`, and `duration`. Pulse defaults to a `2.3` second cycle.\n\n`pulse-outside` needs an opaque wrapped child. The colorful core and halo render behind your content and bloom outward, so transparent children will show the inner glow. The wrapper uses `overflow: visible`, so surrounding layout should allow the halo to spill.\n\n`pulse-outside` expects your child to provide its own subtle 1px edge, such as a border or `box-shadow: inset 0 0 0 1px`. This keeps the idle edge defined without double-painting the border.\n\n## Color variants\n\n```vue\n<template>\n  <BorderBeam color-variant=\"colorful\" />\n  <BorderBeam color-variant=\"mono\" />\n  <BorderBeam color-variant=\"ocean\" />\n  <BorderBeam color-variant=\"sunset\" />\n</template>\n```\n\n- `colorful` is the default rainbow spectrum.\n- `mono` is grayscale.\n- `ocean` uses blue and purple tones.\n- `sunset` uses orange, yellow, and red tones.\n\nAll variants except `mono` animate through a hue-shift cycle unless `static-colors` is enabled.\n\n## Custom tint\n\nUse `tint` when you want the original motion geometry with one custom color.\n\n```vue\n<template>\n  <BorderBeam size=\"pulse-outside\" tint=\"#22c55e\">\n    <div class=\"card\">Custom tinted pulse</div>\n  </BorderBeam>\n</template>\n```\n\nWhen `tint` is provided, colors are treated as static so the custom color stays stable.\n\n## Theme\n\n```vue\n<template>\n  <BorderBeam theme=\"dark\" />\n  <BorderBeam theme=\"light\" />\n  <BorderBeam theme=\"auto\" />\n</template>\n```\n\n- `dark` is the default.\n- `light` adapts opacity and contrast for light backgrounds.\n- `auto` follows `prefers-color-scheme`.\n\n## Strength\n\nControl the overall intensity without affecting the wrapped content.\n\n```vue\n<template>\n  <BorderBeam :strength=\"0.7\">\n    <Card />\n  </BorderBeam>\n</template>\n```\n\n`strength` accepts `0` to `1`. Internally, max strength is visually amplified so `1` reads clearly in real UI.\n\n## CSS tuning hooks\n\nUse CSS custom properties in the component's `style` attribute to tune generated layers without replacing their filters or animation logic.\n\n```vue\n<template>\n  <BorderBeam\n    size=\"pulse-outside\"\n    :style=\"{\n      '--pulse-glow-boost': 1.2,\n      '--beam-core-blur': '8px',\n      '--beam-bloom-opacity': 0.7,\n    }\"\n  >\n    <Card />\n  </BorderBeam>\n</template>\n```\n\n| Custom property | Default | Applies to | Description |\n| --------------- | ------- | ---------- | ----------- |\n| `--pulse-glow-boost` | `1` | Pulse variants | Relative multiplier for pulse glow reach |\n| `--beam-hue-base` | `0deg` | All variants | Base hue offset applied before animation |\n| `--beam-stroke-opacity` | `1` | All variants | Multiplier for the crisp beam stroke |\n| `--beam-inner-opacity` | `1` | All variants | Multiplier for the inner glow layer |\n| `--beam-bloom-opacity` | `1` | All variants | Multiplier for the outer bloom layer |\n| `--beam-core-blur` | theme preset | `pulse-outside` | Blur radius for the outward core glow |\n| `--beam-bloom-blur` | theme preset | `pulse-outside` | Blur radius for the outward halo |\n| `--beam-glow-brightness` | resolved brightness | `pulse-outside` | Brightness for core and halo filters |\n| `--beam-glow-saturate` | resolved saturation | `pulse-outside` | Saturation for core and halo filters |\n\n## Play and pause\n\n```vue\n<script setup lang=\"ts\">\nimport { shallowRef } from \"vue\";\nimport { BorderBeam } from \"@daniesy/beam-border\";\n\nconst active = shallowRef(true);\n</script>\n\n<template>\n  <BorderBeam :active=\"active\" @deactivate=\"console.log('faded out')\">\n    <Card />\n  </BorderBeam>\n</template>\n```\n\nThe component fades in and out smoothly when `active` changes. It also pauses animation work when the wrapper is offscreen.\n\n## Props\n\n| Prop                             | Type                                                         | Default        | Description                         |\n| -------------------------------- | ------------------------------------------------------------ | -------------- | ----------------------------------- |\n| `size`                           | `'sm' \\| 'md' \\| 'line' \\| 'pulse-outside' \\| 'pulse-inner'` | `'md'`         | Size/type preset                    |\n| `colorVariant` / `color-variant` | `'colorful' \\| 'mono' \\| 'ocean' \\| 'sunset'`                | `'colorful'`   | Color palette                       |\n| `theme`                          | `'dark' \\| 'light' \\| 'auto'`                                | `'dark'`       | Background adaptation               |\n| `strength`                       | `number`                                                     | `1`            | Effect intensity, clamped to `0..1` |\n| `duration`                       | `number`                                                     | per size       | Animation cycle duration in seconds |\n| `active`                         | `boolean`                                                    | `true`         | Whether the animation is active     |\n| `borderRadius` / `border-radius` | `number`                                                     | auto-detected  | Custom border radius in px          |\n| `brightness`                     | `number`                                                     | per size/theme | Glow brightness multiplier          |\n| `saturation`                     | `number`                                                     | per size/theme | Glow saturation multiplier          |\n| `hueRange` / `hue-range`         | `number`                                                     | `30`           | Hue rotation range in degrees       |\n| `tint`                           | `string`                                                     | `undefined`    | Custom single-color beam tint       |\n| `staticColors` / `static-colors` | `boolean`                                                    | `false`        | Disable hue-shift animation         |\n\nAll standard fallthrough attributes are forwarded to the wrapper element. That includes `id`, `class`, `style`, ARIA attributes, and DOM listeners.\n\n## Events\n\n| Event          | Description                           |\n| -------------- | ------------------------------------- |\n| `activate`     | Emitted when fade-in completes        |\n| `deactivate`   | Emitted when fade-out completes       |\n| `animationend` | Re-emits the wrapper `AnimationEvent` |\n\n## How it works\n\n`BorderBeam` renders a wrapper `div` with:\n\n- `::after`: the beam stroke\n- `::before`: the inner glow layer\n- `[data-beam-bloom]`: the outer bloom/glow child\n\nThe effect layers are absolutely positioned and use `pointer-events: none`, so they do not block interaction with your slot content.\n\nStyles are injected into `document.head` as shared, reference-counted stylesheets: one static base sheet (keyframes and `@property` registrations) plus one sheet per configuration (size × theme × color variant × static colors × tint). Any number of beams with the same configuration share a single `<style>` element, and per-instance values (radius, duration, opacity, brightness, hue range, …) flow in through CSS custom properties set inline on the wrapper — no `<style>` elements are rendered in your markup.\n\nRotate and line modes animate with CSS custom properties and keyframes. Pulse modes use a shared, frame-rate-capped `requestAnimationFrame` driver exposed through Vue composables, so multiple instances share one loop and can pause when inactive, offscreen, or reduced motion is preferred.\n\n> **SSR note:** stylesheets attach on the client (module code guards on `document`), so server-rendered markup paints the beam once the app hydrates.\n\n## Project structure\n\n```txt\nbeam-border/\n├── src/\n│   ├── index.ts\n│   ├── components/BorderBeam.vue\n│   ├── composables/\n│   ├── pulseDriver.ts\n│   ├── styles.ts\n│   └── types.ts\n├── tests/\n├── dist/\n├── .github/workflows/publish.yml\n├── package.json\n└── README.md\n```\n\n## Requirements\n\n- Vue `>=3.5.0`\n- Modern browser support for CSS masks, gradients, custom properties, and `ResizeObserver`\n\n## Development\n\n```sh\nnpm install\nnpm run dev\nnpm run typecheck\nnpm run test\nnpm run build\nnpm run pack:dry-run\n```\n\nThe demo runs with Vite:\n\n```sh\nnpm run dev\n```\n\n## Publishing to npm with GitHub Actions\n\nThis repo includes `.github/workflows/publish.yml`. It uses GitHub Actions and npm directly, with no paid third-party publishing service.\n\nTo publish:\n\n1. Create an npm automation token.\n2. Add it to your GitHub repository secrets as `NPM_TOKEN`.\n3. Make sure `package.json` has the package name and version you want to publish.\n4. Publish a GitHub release, or run the workflow manually from the Actions tab.\n\nThe workflow runs `npm ci`, `npm run typecheck`, `npm run test`, `npm run build`, then `npm publish --access public --provenance`.\n\n## Attribution\n\nThis is a Vue 3 port of [`Jakubantalik/border-beam`](https://github.com/Jakubantalik/border-beam). The visual behavior and API concepts come from the original React package; this version adapts them to Vue slots, Vue props/events, and composables.\n\n## License\n\nMIT. See [LICENSE](./LICENSE).\n","readmeFilename":"README.md","homepage":"https://github.com/daniesy/beam-border#readme","repository":{"type":"git","url":"git+https://github.com/daniesy/beam-border.git"},"bugs":{"url":"https://github.com/daniesy/beam-border/issues"}}