[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-865":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},865,"border-beam","Jakubantalik\u002Fborder-beam","Jakubantalik","Animated border beam effect for React","http:\u002F\u002Fbeam.jakubantalik.com\u002F",null,"TypeScript",742,49,645,1,0,35,48,85,105,9.1,"MIT License",false,"main",true,[27,28,29,30,31,32],"beam","design","effect","glow","motion","product","2026-06-12 02:00:19","# border-beam\n\nAnimated border beam effect for React. A lightweight component that adds a traveling 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    \u003CBorderBeam>\n      \u003Cdiv style={{ padding: 32, borderRadius: 16, background: '#1d1d1d' }}>\n        Your content here\n      \u003C\u002Fdiv>\n    \u003C\u002FBorderBeam>\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## Sizes\n\nThree built-in size presets control the glow intensity and animation style:\n\n```tsx\n\u003CBorderBeam size=\"md\">  {\u002F* Full border glow (default) *\u002F}\n  \u003CCard \u002F>\n\u003C\u002FBorderBeam>\n\n\u003CBorderBeam size=\"sm\">  {\u002F* Compact glow for small elements *\u002F}\n  \u003CIconButton \u002F>\n\u003C\u002FBorderBeam>\n\n\u003CBorderBeam size=\"line\">  {\u002F* Bottom-only traveling glow *\u002F}\n  \u003CSearchBar \u002F>\n\u003C\u002FBorderBeam>\n```\n\n## Color variants\n\nFour color palettes are available:\n\n```tsx\n\u003CBorderBeam colorVariant=\"colorful\" \u002F>  {\u002F* Rainbow spectrum (default) *\u002F}\n\u003CBorderBeam colorVariant=\"mono\" \u002F>      {\u002F* Grayscale *\u002F}\n\u003CBorderBeam colorVariant=\"ocean\" \u002F>     {\u002F* Blue-purple tones *\u002F}\n\u003CBorderBeam colorVariant=\"sunset\" \u002F>    {\u002F* Orange-yellow-red tones *\u002F}\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\u003CBorderBeam theme=\"dark\" \u002F>   {\u002F* Dark background (default) *\u002F}\n\u003CBorderBeam theme=\"light\" \u002F>  {\u002F* Light background *\u002F}\n\u003CBorderBeam theme=\"auto\" \u002F>   {\u002F* Detects system preference *\u002F}\n```\n\n## Strength\n\nControl the overall intensity of the effect without affecting the wrapped content:\n\n```tsx\n\u003CBorderBeam strength={0.7}>  {\u002F* 70% intensity *\u002F}\n  \u003CCard \u002F>\n\u003C\u002FBorderBeam>\n```\n\n`strength` accepts a value from `0` (invisible) to `1` (full intensity, default).\n\n## Play \u002F pause\n\nToggle the animation on and off with smooth fade transitions:\n\n```tsx\nconst [active, setActive] = useState(true);\n\n\u003CBorderBeam active={active} onDeactivate={() => console.log('faded out')}>\n  \u003CCard \u002F>\n\u003C\u002FBorderBeam>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `ReactNode` | — | Content to wrap |\n| `size` | `'sm' \\| 'md' \\| 'line'` | `'md'` | Size\u002Ftype 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` \u002F `2.4` | Animation cycle duration in seconds |\n| `active` | `boolean` | `true` | Whether the animation is playing |\n| `borderRadius` | `number` | auto-detected | Custom border radius in px |\n| `brightness` | `number` | `1.3` | Glow brightness multiplier |\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 `\u003Cdiv>` with:\n\n- **`::after`** — the beam stroke (conic gradient masked to the border)\n- **`::before`** — inner glow layer\n- **`[data-beam-bloom]`** — outer bloom\u002Fglow child div\n\nAll effect layers are absolutely positioned and use `pointer-events: none`, so they never interfere with your content. Animations use CSS `@property` for smooth GPU-accelerated transitions.\n\n## Project structure\n\n```\nborder-beam\u002F\n├── src\u002F\n│   ├── index.ts          # Public exports\n│   ├── BorderBeam.tsx     # React component\n│   ├── types.ts           # TypeScript type definitions\n│   └── styles.ts          # CSS generation engine\n├── demo\u002F                  # Vite + React demo site\n├── dist\u002F                  # 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 component respects `prefers-reduced-motion` when implemented by the consumer.\n\n## License\n\n[MIT](.\u002FLICENSE)\n","border-beam 是一个为 React 应用提供动画边框光束效果的轻量级组件，适用于卡片、按钮、输入框或搜索栏等元素。其核心功能包括自动检测子元素的 `border-radius` 以实现环绕发光效果，并支持多种尺寸预设（如全边框发光、紧凑型发光和底部单独发光）、颜色变体（彩虹色谱、单色、海洋色调和日落色调）以及适应深色或浅色背景的主题设置。此外，该组件还允许用户通过调整强度、持续时间、激活状态等属性来控制动画效果的具体表现。border-beam 非常适合于需要增强视觉吸引力且对性能有要求的Web应用界面设计中使用。",2,"2026-06-11 02:39:54","CREATED_QUERY"]