gitwtfhub

wtf is labs?

rs-4/labs — explained in plain English

Analysis updated 2026-05-18

98TypeScriptAudience · developerComplexity · 2/5Setup · moderate

TL;DR

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.

Mindmap

mindmap
  root((repo))
    What it does
      Micro-interaction demos
      Lab home screen
      Per-animation README
    Tech stack
      Expo
      Reanimated
      Skia
      NativeWind
    Use cases
      Study animations
      Copy components
      Browse live demos
    Audience
      Mobile developers
      UI engineers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Study how a specific micro-interaction like a card expand or pull-to-refresh is built in React Native.

REASON 2

Copy a single animation component into your own Expo app.

REASON 3

Browse a running catalog of liquid and gesture-based UI effects on device.

What's in the stack?

TypeScriptReact NativeExpoReanimatedSkiaNativeWind

How it stacks up

rs-4/labsbozhoudev/video-skills-toolkitgonemedia/aipointer
Stars989898
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderateeasy
Complexity2/52/52/5
Audiencedevelopervibe codergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires Expo tooling and an iOS runtime to launch the demo app.

No license is stated in the README excerpt available.

Wtf does this do

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.

Yoink these prompts

Prompt 1
Explain how the Card Expand animation in this repo recreates the App Store transition.
Prompt 2
Walk me through running this Expo lab app on iOS and trying the demos.
Prompt 3
How do the metaball style liquid effects work using Skia in this project?
Prompt 4
Show me the steps to add a new animation folder to this lab registry.

Frequently asked questions

wtf is labs?

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.

What language is labs written in?

Mainly TypeScript. The stack also includes TypeScript, React Native, Expo.

What license does labs use?

No license is stated in the README excerpt available.

How hard is labs to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is labs for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.