Border Beam

Border Beam is a UI animation component library that can apply a moving light or color beam to the border of cards or containers in React, SwiftUI, and React Native environments.

Multi-platform support
- Supports React 18 and above, and can be installed with npm install border-beam.
- SwiftUI provides a Metal shader–based port that supports iOS 17 and macOS 14 and above.
- React Native provides an Expo-compatible beta port based on Skia and Reanimated, currently verified on iOS and experimental on Android.
Animation styles
- Supports Rotate mode, where light moves along the border, and Pulse mode, where brightness changes as if breathing.
Detailed customization
- Size and type: Provides Medium, Small, Line, Pulse Inner, Pulse Outside presets
- Color themes: Provides Colorful, Mono, Ocean, Sunset palettes
- Strength: Adjust the transparency and intensity of the light in the 0–1 range using the strength value
- Additional settings: Theme, playback duration, brightness, saturation, hue range, and active state adjustments

Similar tools

Transitions.dev

A web UI transition collection you can apply with copy, skills, and Refine

Similar tools

Transitions.dev

beUI

Morphicons

Paper Shaders

Colors & Fonts

Get the week's signal by email, every Saturday.

Related insights

Design Systems That Keep AI from Guessing

In the AI era, a designer’s competitiveness lies in “reusability of judgment”

Similar tools

Transitions.dev

beUI

Morphicons

Paper Shaders

Colors & Fonts

Get the week's signal by email, every Saturday.