### Install border-beam Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Install the border-beam package using npm. ```bash npm install border-beam ``` -------------------------------- ### BorderBeam Component Usage Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Demonstrates how to use the BorderBeam component with different props to customize its appearance and behavior. ```APIDOC ## BorderBeam Component API This document outlines the properties available for the `BorderBeam` React component. ### Props | Prop | Type | Default | Description | |---|---|---|---| | `children` | `ReactNode` | — | Content to wrap | | `size` | `'sm' | 'md' | 'line' | 'pulse-outside' | 'pulse-inner'` | `'md'` | Size/type preset | | `colorVariant` | `'colorful' | 'mono' | 'ocean' | 'sunset'` | `'colorful'` | Color palette | | `theme` | `'dark' | 'light' | 'auto'` | `'dark'` | Background adaptation | | `strength` | `number` | `1` | Effect opacity (0–1), only affects the beam layers | | `duration` | `number` | `1.96` / `3.1` / `2.3` | Animation cycle duration in seconds (rotate / line / pulse) | | `active` | `boolean` | `true` | Whether the animation is playing | | `borderRadius` | `number` | auto-detected | Custom border radius in px | | `brightness` | `number` | per-type (`1.3`) | Glow brightness multiplier; falls back to the type's preset default | | `saturation` | `number` | `1.2` | Glow saturation multiplier | | `hueRange` | `number` | `30` | Hue rotation range in degrees | | `staticColors` | `boolean` | `false` | Disable hue-shift animation | | `className` | `string` | — | Additional class on the wrapper | | `style` | `CSSProperties` | — | Additional inline styles on the wrapper | | `onActivate` | `() => void` | — | Called when fade-in completes | | `onDeactivate` | `() => void` | — | Called when fade-out completes | All standard `HTMLDivElement` attributes are also forwarded to the wrapper. ``` -------------------------------- ### BorderBeam Theme Adaptation Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Shows how to set the theme for the BorderBeam to adapt to dark or light backgrounds. 'auto' detects system preferences. ```tsx {/* Dark background (default) */} {/* Light background */} {/* Detects system preference */} ``` -------------------------------- ### Project Structure Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Overview of the Border-Beam project directory structure, detailing the purpose of key files and folders. ```text border-beam/ ├── src/ │ ├── index.ts # Public exports │ ├── BorderBeam.tsx # React component │ ├── types.ts # TypeScript type definitions │ ├── styles.ts # CSS generation engine │ └── pulseDriver.ts # Shared rAF loop driving the pulse breathing ├── demo/ # Vite + React demo site ├── dist/ # Built output (ESM + CJS + types) ├── package.json ├── LICENSE └── README.md ``` -------------------------------- ### Theme Persistence Source: https://github.com/jakubantalik/border-beam/blob/main/demo/index.html This JavaScript snippet handles theme persistence by reading the 'theme' value from localStorage. It applies the 'light' or 'dark' theme to the document's root element, defaulting to 'dark' if an error occurs or no theme is set. ```javascript (function () { try { var t = localStorage.getItem('theme'); document.documentElement.dataset.theme = t === 'light' ? 'light' : 'dark'; } catch (e) { document.documentElement.dataset.theme = 'dark'; } })(); ``` -------------------------------- ### BorderBeam Play/Pause Animation Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Demonstrates controlling the animation of the BorderBeam using the 'active' prop and handling deactivation events. ```tsx const [active, setActive] = useState(true); console.log('faded out')}> ``` -------------------------------- ### Rotate Beam Presets Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Use 'size' prop to control the traveling beam effect. 'md' is default, 'sm' for smaller elements, and 'line' for bottom-only glow. ```tsx {/* Full border glow (default) */} ``` ```tsx {/* Compact glow for small elements */} ``` ```tsx {/* Bottom-only traveling glow */} ``` -------------------------------- ### Basic Usage of BorderBeam Component Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Wrap your content with the BorderBeam component to apply the effect. It automatically detects the border-radius of its first child. ```tsx import { BorderBeam } from 'border-beam'; function App() { return (
Your content here
); } ``` -------------------------------- ### BorderBeam Color Variants Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Demonstrates how to apply different color palettes to the BorderBeam effect. The 'colorful' variant is the default. ```tsx {/* Rainbow spectrum (default) */} {/* Grayscale */} {/* Blue-purple tones */} {/* Orange-yellow-red tones */} ``` -------------------------------- ### BorderBeam Strength Control Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Illustrates how to adjust the intensity of the BorderBeam effect. Strength ranges from 0 (invisible) to 1 (full intensity). ```tsx {/* 70% intensity */} ``` -------------------------------- ### Pulse Beam Presets Source: https://github.com/jakubantalik/border-beam/blob/main/README.md Use 'pulse-inner' for contained breathing glow or 'pulse-outside' for an outward-blooming halo. Both support color variants, strength, theme, and duration. ```tsx {/* Contained breathing border glow */} ``` ```tsx {/* Outward-blooming halo around the element */} ``` -------------------------------- ### URL Path Normalization Source: https://github.com/jakubantalik/border-beam/blob/main/demo/index.html This JavaScript snippet normalizes URL paths by decoding and rejoining query parameters. It modifies the browser's history state to reflect the normalized path. ```javascript (function (l) { if (l.search[1] === '/') { var decoded = l.search.slice(1).split('&').map(function (s) { return s.replace(/~and~/g, '&'); }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash); } })(window.location); ``` -------------------------------- ### URL Rewriting Logic Source: https://github.com/jakubantalik/border-beam/blob/main/demo/public/404.html This JavaScript code manipulates the current URL to adjust path segments and query parameters for routing purposes. It is used to modify the browser's location. ```javascript var pathSegmentsToKeep = 0; var l = window.location; l.replace( l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname .split('/') .slice(0, 1 + pathSegmentsToKeep) .join('/') + '/?/' + l.pathname .slice(1) .split('/') .slice(pathSegmentsToKeep) .join('/') .replace(/&/g, '~and~') + (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash ); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.