labs - GitLite

KO | EN

gitlite — search

#javascript #python #ai #go #golang #android #deep-learning #linux #nodejs #awesome #cli #awesome-list #security #openai

labs

(★ 102)

React Native animations, ready to install. Open source lab + registry + CLI.

파일 탐색기

최종 버전 다운로드 (.zip)

- settings.json
- android-icon-background.png
- android-icon-foreground.png
- android-icon-monochrome.png
- favicon.png
- icon.png
- splash-icon.png
- - DotGrid.tsx
- - fiber-canvas.tsx
  - make-webgpu-renderer.ts
- - LabHome.tsx
- - index.tsx
- css.d.ts
- global.css
- lab.tsx
.gitignore
AGENTS.md
app.json
App.tsx
CLAUDE.md
index.ts
LICENSE
metro.config.js
nativewind-env.d.ts
package-lock.json
package.json
postcss.config.mjs
README.md
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/rs-4/labs

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd labs

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run ios

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://rselmi.com/lab)

## Animations

| # | Animation | Folder | Description |
| - | --------- | ------ | ----------- |
| 01 | Pull Refresh Island | [`src/components/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`](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`](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`](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`](src/components/motion-fossil) | A finger trace gains depth, mass and a permanent metallic form on release. |

## Run

```bash
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/
    <slug>/
      <Component>.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

1. Create `src/components/<slug>/` with the component, a `Demo.tsx` and a `README.md`.
2. Register it in `src/lab.tsx`.