TanStack
精选
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.
AI 仓库情报摘要
FR-AI / ANALYSIS为什么值得关注
该仓库展示了创意十足的高质量微交互（如粘性下拉刷新、墨水开关），基于最新库（Expo SDK 57、Reanimated 4、Skia）构建，并附带详细说明和在线演示。
适合谁使用
- 寻找动画灵感的React Native开发者
- 探索微交互模式的UI/UX设计师
- 希望为应用添加精致手势的移动端开发者
- 尝试Reanimated 4和Skia的爱好者
典型使用场景
- 学习基于metaball的液体效果实现
- 原型化应用商店风格的卡片展开过渡
- 集成自定义下拉刷新或搜索动画
- 研究可复用动画组件的结构模式
项目优势
- 组织良好：每个动画独立文件夹，自带说明和演示
- 使用最新Expo SDK和Reanimated 4保证流畅性能
- 提供在线演示站点便于快速预览
- 明确的运行和添加新动画指南
使用前须知
- 目前仅包含5个动画
- 需要Expo环境（非原生React Native CLI）
- Metaball效果在低端设备上可能性能消耗较大
README 快速开始
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, aDemo.tsxand aREADME.md. - Register it in
src/lab.tsx.
相关仓库与替代方案
根据分类、Topic 和编程语言匹配的相似项目。
vercel-labs
精选
scriptc
scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.
Jakubantalik
精选
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.