Study how a specific micro-interaction like a card expand or pull-to-refresh is built in React Native.
Copy a single animation component into your own Expo app.
Browse a running catalog of liquid and gesture-based UI effects on device.
| rs-4/labs | bozhoudev/video-skills-toolkit | gonemedia/aipointer | |
|---|---|---|---|
| Stars | 98 | 98 | 98 |
| Language | TypeScript | TypeScript | TypeScript |
| Setup difficulty | moderate | moderate | easy |
| Complexity | 2/5 | 2/5 | 2/5 |
| Audience | developer | vibe coder | general |
Figures from each repo's GitHub metadata at analysis time.
Requires Expo tooling and an iOS runtime to launch the demo app.
This repository is a collection of small React Native animation experiments, each one focused on a single micro-interaction rather than a full app feature. Every animation lives in its own folder with its own README, and all of them run from one Expo app that has a Lab home screen listing every demo. Four animations are included so far. Pull Refresh Island is a gooey pull to refresh effect where a water drop appears to get pulled out of the phone's Dynamic Island. Ink Toggle is a dark mode switch where a drop of ink falls and floods the screen to change the theme. Card Expand recreates the App Store style transition, where tapping a card turns it into the full screen and dragging down sends it back. Pull Search mimics an iOS style search interaction, where pulling a list down grows a glassy pill shape from the bottom of the screen and opens the keyboard automatically. To try it, you install the dependencies and run the iOS command, which opens the app on the Lab screen. From there you tap any entry to run its demo, and a floating pill button takes you back to the list. The animations are also viewable as a live web page linked from the README. On the technical side, the project is built with Expo SDK 57, Reanimated 4, Gesture Handler, Skia, and NativeWind version 5, which is Tailwind for React Native. Most of the liquid style effects work by drawing black metaball shapes on a Skia canvas, blurring them together, and then applying a color matrix to sharpen the blurred alpha channel back into a clean hard edge. The code is organized so each animation folder holds the reusable component itself, a demo screen used by the app, and a README explaining what it does, how it works, and which values can be tuned. A central registry file lists every entry shown on the Lab home screen. Adding a new animation means creating a new folder with those same three pieces and registering it in that file, which keeps the pattern consistent across every experiment in the repository.
A collection of small React Native micro-interaction demos, each in its own folder, all viewable from one Expo app with a Lab home screen.
Mainly TypeScript. The stack also includes TypeScript, React Native, Expo.
No license is stated in the README excerpt available.
Setup difficulty is rated moderate, with roughly 30min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Don't trust strangers blindly. Verify against the repo.