What's Included
- TypeScript source (AnimatedBorder.tsx)
- Glow streak + grid background image assets
- Demo screen (DemoScreen.tsx)
- README with install + usage
- MP4 preview
About the Project
Built with react-native-reanimated v4 (+ react-native-worklets). A single useSharedValue is animated with withTiming/withRepeat at a linear easing to loop forever, representing the distance travelled along the card's perimeter. Inside a useAnimatedStyle worklet that distance is mapped edge-by-edge and corner-by-corner over the rounded-rectangle geometry (precomputed edge lengths and quarter-circle arc lengths) into an (x, y, rotateZ) pose, then applied as transforms to a glowing line Image so the beam follows the border and banks through the corners. The whole animation runs on the UI thread with no per-frame JS, and there is no native module code beyond Reanimated, so it works in a prebuild/dev-client setup. Tested on Expo SDK 56 (New Architecture) on iOS and Android; tweak SPEED, BORDER_RADIUS, and the card WIDTH/HEIGHT constants to fit any layout.
