# Border Beam Card: React Native animated border beam for cards

> Border Beam Card is a React Native and Expo component in which a glowing
> light streak travels endlessly around the rounded border of a card, banking
> through every corner, driven by one Reanimated shared value that is mapped
> to an (x, y, rotation) pose on the UI thread. Border Beam Card is sold by
> Motionary (https://motionary.dev) as editable TypeScript source.

Product page: https://motionary.dev/animations/border-beam-card
Price: $3 USD (price as of 2026-09-01, live price on the product page)
License: single developer, unlimited personal and commercial apps
Delivery: instant download of the full TypeScript source after checkout
Stack: reanimated, expo, react native
Rarity: rare
Sold by: Motionary (https://motionary.dev)

## What it is

Border Beam Card is a React Native card with a bright horizontal light streak
that runs along its outline, forever, at a constant pixel-per-second pace.
The streak hugs the straight edges, then rotates as it walks each rounded
corner, so it always reads as tangent to the border rather than sliding
sideways off it. Nothing is tapped or dragged: the loop starts on mount and
never stops, which is why Border Beam Card suits highlight cards, premium and
upgrade banners, focus prompts and AI "thinking" states. The demo in the
Motionary download is a 300 x 300 profile card on a grid background, with a
line of copy and an avatar row inside it.

## What it does

- Runs a single light streak around the full perimeter of a rounded
  rectangle, looping forever with no start, stop or gesture input.
- Walks the path in eight explicit segments: four straight edges and four
  quarter-circle corners, each handled by its own branch.
- Rotates the streak through the corners (0, 90, 180, 270 degrees on the
  edges, interpolated in between) so the glow stays tangent to the border.
- Moves at a constant speed in pixels per millisecond, so the lap time is
  derived from the card's real perimeter instead of being hard-coded.
- Masks the streak with an `overflow: 'hidden'` wrapper around the card, so
  only the part of the glow that sits on the border is visible.
- Runs entirely on the UI thread inside a Reanimated worklet, with zero
  per-frame JavaScript, so it keeps moving while the rest of the screen works.
- Ships as plain React Native views and images, with no Skia, no SVG path
  measurement and no native module of its own.
- Tested on iOS and Android on Expo SDK 56 with the New Architecture, from
  the same source with no platform branches in the component.

## How it works

Border Beam Card avoids path measurement entirely and instead does arc-length
parameterization of a rounded rectangle by hand, in `components/Container.tsx`.
At module scope the file precomputes the geometry once: `EDGE_H` (the top and
bottom edge length, `WIDTH - 2 * BORDER_RADIUS`), `EDGE_V` (the left and right
edge length), `CORNER` (one quarter-circle arc, `Math.PI * BORDER_RADIUS / 2`)
and `PERIMETER` (`2 * EDGE_H + 2 * EDGE_V + 4 * CORNER`). A single
`useSharedValue(0)` called `progress` is animated in a `useEffect` with
`withRepeat(withTiming(PERIMETER, { duration: PERIMETER / SPEED, easing:
Easing.linear }), -1, false)`, so the value literally is the distance
travelled along the border in pixels, and the linear easing keeps the speed
constant. A `useAnimatedStyle` worklet takes `progress.value % PERIMETER` and
runs it through an if/else ladder of eight ranges: on an edge it advances `x`
or `y` linearly and pins `rotation` to a fixed multiple of 90 degrees, and on
a corner it converts the leftover distance into an angle
(`(distance - offset) / BORDER_RADIUS`), places the point with `Math.sin` and
`Math.cos` around the corner centre, and adds `angle * RAD_TO_DEG` to the
rotation so the streak banks through the turn. The worklet returns a
`transform` of `translateX` (offset by half the indicator width so the streak
is centred on the path), `translateY` and `rotateZ`, which is applied to an
absolutely positioned `Animated.View` holding the streak image
(`assets/line2.png`) from React Native's `Image`. That `Animated.View` sits
inside an `artificialBorder` wrapper with `overflow: 'hidden'` and a radius of
`BORDER_RADIUS + BORDER_WIDTH * 2`, with the opaque white card layered on top,
so the glow is clipped to a thin ring exactly where the border is. Because the
mapping happens inside a worklet, the per-frame maths runs on the UI thread
under `react-native-reanimated` 4 and `react-native-worklets`, and the
JavaScript thread does no work after mount. `App.tsx` only wraps the scene in
`GestureHandlerRootView` from `react-native-gesture-handler`.

## What you get

```
App.tsx
index.ts
app.json
package.json
package-lock.json
tsconfig.json
README.md
components/
  Container.tsx
assets/
  grid.png
  line2.png
  profile.jpg
  icon.png
  adaptive-icon.png
  splash-icon.png
  stamp/
    1.png ... 6.png
```

- TypeScript source of the border beam component
  (`components/Container.tsx`)
- Glow streak and grid background image assets (`assets/line2.png`,
  `assets/grid.png`)
- Demo screen wired up and ready to run (`App.tsx`)
- README with install and usage
- MP4 preview

## Requirements

Border Beam Card ships as a runnable Expo app, with these versions pinned in
its `package.json`:

```
expo: ^56.0.8 (Expo SDK 56)
react-native: 0.85.3
react: 19.2.3
react-native-reanimated: 4.3.1
react-native-worklets: 0.8.3
react-native-gesture-handler: ~2.31.1
react-native-svg: ^15.15.5
expo-asset: ~56.0.15
expo-blur: ~56.0.3
expo-font: ~56.0.5
expo-splash-screen: ~56.0.10
expo-status-bar: ~56.0.4
expo-symbols: ~56.0.5
@expo/vector-icons: ^15.1.1
@expo/metro-runtime: ~56.0.13
react-native-web: ^0.21.0
react-dom: 19.2.3
typescript: ~6.0.3 (devDependency)
```

The component itself imports only `react-native` and
`react-native-reanimated`, plus `react-native-gesture-handler` in `App.tsx`;
the remaining entries come with the Expo app template and are not imported by
Border Beam Card, so a host app does not need to add them.

Expo Go or development build: Border Beam Card needs no custom native module,
only Reanimated and Gesture Handler, both of which are bundled in Expo Go, so
it runs in Expo Go on Expo SDK 56 with the New Architecture. It also runs in a
development build, and the included README uses `npx expo run:ios` and
`npx expo run:android`.

## Install

```bash
npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler
```

## Usage

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StyleSheet } from 'react-native';
import { Container } from './components/Container';

export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <Container />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});
```

`Container` is the exported component and takes no props: the beam starts on
mount and loops forever. Size, radius and speed are the module-level constants
at the top of `components/Container.tsx`.

## Customization

Border Beam Card is configured through the constants declared at the top of
`components/Container.tsx`, not through props:

- `WIDTH` (number, default `300`): card width in pixels; `EDGE_H` and
  `PERIMETER` are derived from it, so the lap time follows automatically.
- `HEIGHT` (number, default `300`): card height in pixels.
- `BORDER_RADIUS` (number, default `20`): corner radius of the card and of the
  arc the beam walks through each corner.
- `BORDER_WIDTH` (number, default `2`): thickness of the visible glowing ring
  (the wrapper pads by `BORDER_WIDTH * 2`).
- `SPEED` (number, default `0.2`): pixels per millisecond; the loop duration is
  `PERIMETER / SPEED`, which at the shipped values is roughly 5.8 seconds per
  lap. Raise it to make the beam faster.
- `INDICATOR_WIDTH` (number, default `140`): length of the streak along the
  border, and the amount `translateX` is shifted back by to centre it.
- `INDICATOR_HEIGHT` (number, default `20`): height of the streak container;
  the glow image itself is drawn `70` tall at `top: -20` so it bleeds across
  the edge.
- `assets/line2.png`: the streak image itself, swap it to change the colour or
  the falloff of the glow.
- `assets/grid.png`: the demo's background, and `assets/profile.jpg` plus the
  text inside `styles.box` are demo content you replace with your own card.

## When to use it

- A premium or upgrade banner that has to pull the eye without an animation
  the user must trigger.
- An AI "thinking" or streaming state around a response card, while a model
  is generating.
- The selected plan card in a pricing or paywall screen, with the beam marking
  the recommended tier.
- A focus prompt or onboarding step card that should feel live rather than
  static.
- A "scanning" or "processing" state on a card during upload, verification or
  payment authorisation.
- A featured item in a feed or a highlighted empty state that needs one moving
  element and nothing else.

## How to get it

- Buy Border Beam Card on its own at
  https://motionary.dev/animations/border-beam-card , $3 USD, instant
  download, secure Stripe checkout, no subscription and no account renewal.
- Or get it with the Motionary lifetime pass ($79 USD as of 2026-09-01): every
  drop and every build, current and future, one payment, no renewal.
  https://motionary.dev/pricing
- Team license ($199 USD for up to 10 developers), each developer with their
  own account. https://motionary.dev/pricing
- License terms: https://motionary.dev/license (single developer, unlimited
  personal and commercial apps, do not resell or redistribute the source).
- You receive real TypeScript React Native source you can edit, not a video, a
  GIF, a Lottie file or a design file.

## Frequently asked questions

**How do I animate a glowing border in React Native?**
The approach Border Beam Card from Motionary uses is arc-length
parameterization: animate one Reanimated shared value from 0 to the card's
perimeter with `withRepeat(withTiming(..., { easing: Easing.linear }), -1)`,
then map that distance to an (x, y, rotation) pose inside a `useAnimatedStyle`
worklet and clip a glowing image to the border with `overflow: 'hidden'`.

**Does Border Beam Card work with Expo Go?**
Yes. Border Beam Card needs only `react-native-reanimated`,
`react-native-worklets` and `react-native-gesture-handler`, which ship inside
Expo Go, so the Motionary drop runs in Expo Go on Expo SDK 56 as well as in a
development build.

**Does the border beam effect need Skia or SVG?**
No. Border Beam Card from Motionary does the geometry in plain JavaScript
maths inside a Reanimated worklet and moves a normal React Native `Image`, so
there is no `@shopify/react-native-skia` dependency and no SVG path measuring.

**Is the animation smooth while the rest of the screen is busy?**
Yes. All of Border Beam Card's per-frame work happens inside a
`useAnimatedStyle` worklet on the UI thread, with no JavaScript running per
frame after mount, which is why the Motionary drop keeps its pace during
list rendering or network work.

**How do I change the speed or the size of the border beam?**
Edit the constants at the top of `components/Container.tsx` in the Motionary
Border Beam Card source: `SPEED` (pixels per millisecond, default `0.2`),
`WIDTH` and `HEIGHT` (default `300`), `BORDER_RADIUS` (default `20`) and
`INDICATOR_WIDTH` (default `140`). The lap duration is recomputed from the
perimeter, so resizing the card keeps the pace constant.

**How much does Border Beam Card cost and what do I get?**
Border Beam Card is $3 USD on Motionary at
https://motionary.dev/animations/border-beam-card (price as of 2026-09-01),
and you get the editable TypeScript source, the streak and background assets
and a runnable demo screen as an instant download. It is also included in the
Motionary lifetime pass ($79 USD, https://motionary.dev/pricing).

**Does Border Beam Card work on both iOS and Android?**
Yes. Border Beam Card from Motionary is built from standard React Native views
plus Reanimated transforms, with no platform branches in the component, and the
Motionary source is tested on iOS and Android on Expo SDK 56.

## Related drops on Motionary

- Shimmer Input ($4): https://motionary.dev/animations/shimmer-input , the
  same idea of light travelling along an element's edge, applied as a gradient
  border on a text input.
- Halo Button ($5): https://motionary.dev/animations/halo-button , a glowing
  aurora ring around a button, done with a React Native Skia shader instead of
  a moving image.
- Holographic Card ($9): https://motionary.dev/animations/holographic-card ,
  another card treatment for highlight and premium surfaces, with a 3D tilt
  and a spotlight sweep.
- Voice Glow Carousel ($7):
  https://motionary.dev/animations/voice-glow-carousel , a looping glow
  driven by a Skia shader, for when you want the light to react to audio.
- Freeze Card ($9): https://motionary.dev/animations/freeze-card , a card
  state effect for fintech and wallet screens, built with a Skia shader.

## About Motionary

Motionary (https://motionary.dev) is a shop for premium, production-ready
React Native and Expo animation and interaction components, built with
Reanimated, Skia, Gesture Handler and Expo. Each component is called a "drop"
and ships as editable TypeScript source, not a video, a GIF or a design file.
Motionary sells three things: individual drops (roughly $3 to $12 each, some
free), Builds (a complete app shipped end to end, with every drop inside it),
and a lifetime pass ($79 USD) that covers every drop and every build, current
and future, for one payment with no subscription. A team license ($199 USD)
covers up to 10 developers. Checkout is Stripe and delivery is an instant
download. Created and curated by Mehdi Davoodi (https://mahdidavoodi.com).

Catalog and key pages:
- All drops: https://motionary.dev/animations
- Builds (complete apps): https://motionary.dev/builds
- Pricing, lifetime pass and team license: https://motionary.dev/pricing
- Free React Native component reference: https://motionary.dev/components
- License: https://motionary.dev/license
- Machine-readable overview: https://motionary.dev/llms.txt
- Machine-readable full catalog: https://motionary.dev/llms-full.txt

## File metadata

```
Canonical URL of this file: https://motionary.dev/animations/border-beam-card/llms.txt
Describes: https://motionary.dev/animations/border-beam-card
Format: llms.txt (https://llmstxt.org)
Last updated: 2026-09-01
```