Why it is worth attention

It showcases creative, high-quality micro-interactions (e.g., gooey pull-to-refresh, ink toggle) built with cutting-edge libraries (Expo SDK 57, Reanimated 4, Skia) and includes detailed READMEs and live demos.

Who it is for

React Native developers seeking animation inspiration
UI/UX designers exploring micro-interaction patterns
Mobile app developers wanting to add polished gestures
Hobbyists experimenting with Reanimated 4 and Skia

Use cases

Learning how to implement metaball-based liquid effects
Prototyping app store–style card expand transitions
Integrating custom pull-to-refresh or search animations
Studying pattern for structuring reusable animation components

Strengths

Well-organized: each animation is isolated with its own README and demo
Uses latest Expo SDK and Reanimated 4 for smooth performance
Live demo site available for quick previews
Clear instructions for running and adding new animations

Considerations

Only 5 animations currently included
Requires Expo environment (not vanilla React Native CLI)
Metaball effects may be performance-intensive on low-end devices

README quick start

lab

React Native micro-interaction experiments. One folder per animation, each with its own README, all runnable from a single Expo app with a Lab home screen.

Live pages: rselmi.com/lab

Animations

#	Animation	Folder	Description
01	Pull Refresh Island	`src/components/pull-refresh-island`	Gooey pull-to-refresh where a water drop is pulled out of the Dynamic Island.
02	Ink Toggle	`src/components/ink-toggle`	A dark mode switch that pours the theme: a drop of ink falls and floods the screen.
03	Card Expand	`src/components/card-expand`	The App Store transition: tap a card, it becomes the screen, drag down to send it back.
04	Pull Search	`src/components/pull-search`	The iOS 26 search: pull the list down, a liquid glass pill grows from the bottom, keyboard opens by itself.
05	Motion Fossil	`src/components/motion-fossil`	A finger trace gains depth, mass and a permanent metallic form on release.

Run

npm install
npm run ios

The app opens on the Lab screen. Tap an entry to run its demo, use the floating "lab" pill to come back.

Stack

Expo SDK 57, Reanimated 4, Gesture Handler, Skia, NativeWind v5 (Tailwind v4). Most of the liquid effects are metaballs: black shapes on a Skia canvas with a blur, then a color matrix that sharpens the alpha back into a hard edge.

Structure

src/
  components/
    /
      .tsx   # the reusable component
      Demo.tsx          # the demo screen used by the app
      README.md         # what it is, how it works, tuning knobs
  screens/LabHome.tsx   # the entry list
  lab.tsx               # registry: add your entry here
  tw/                   # NativeWind-wrapped RN primitives

Adding an animation

Create src/components// with the component, a Demo.tsx and a README.md.
Register it in src/lab.tsx.

Related repositories

Similar projects matched by category, topics, and programming language.

TanStack

Featured

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web DevelopmentFrontend Frameworks

14,861

vercel-labs

Featured

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

Developer ToolsCode Quality & Build

1,985

Jakubantalik

Featured

thinking-orbs

A React component library that renders six hand-tuned animated thought orb loading indicators on a plain 2D canvas, with two purpose-tuned sizes and automatic theme detection for AI and agent UIs.

AI & Machine LearningAI Agents

1,191