ProjectText input
Border beam
Animated borders for native TypeScript, Astro, and Vue.
AgentAuto
Generating interfaceBuilding accessible components...
Inset surfaceThe beam follows an inner boundary without changing your component.
Installation
npm install @danixts/border-beam
import { BorderBeam } from '@danixts/border-beam/astro'
<BorderBeam as="button" size="md">Continue</BorderBeam>npm install @danixts/border-beam vue
import { BorderBeam } from '@danixts/border-beam/vue'Playground
Every option updates one controller
Type
Color
AstroTypeScript
Component variants
Real buttons, inputs, pills, and cards
Button · md
Button · ocean
Icon · sm
Search · line
Pill · pulse inner
Minimal cardReusable surface
Card · pulse outside
Input · sunset
Badge · sm mono
Minimal cardReusable surface
Panel · ocean
Astro form controls
Fluid, custom surfaces with exact beam alignment
EnvironmentSelect
NotificationsSwitch
Deployment alertsDisabled
OpacitySlider
SeatsNumber input
NotesTextarea
Native Astro and Vue
One engine, two typed integrations
Astro
A processed TypeScript script mounts the native controller. No framework runtime required.
Vue 3
The official component maps reactive props and destroys its controller on unmount.