What's Included
- TypeScript source (ZipperCurtain.tsx)
- Demo App (App.tsx) with tap-to-toggle
- Denim panel + zipper pull image assets
- README with install + usage
- MP4 preview
About the Project
Each half of the zipper is rendered as a textured triangle mesh with @shopify/react-native-skia's Vertices + ImageShader, not a masked image, so the denim and the teeth baked on its inner edge physically deform as it opens. A single shared progress value (0..1) drives everything via react-native-reanimated v4 worklets: per-row vertex x positions follow a hyperbola (shift = OPEN_SLOPE * (sqrt(d² + R²) − R)) for a soft V with no hard kink, while texture coords and triangle indices stay fixed. The timeline splits in two — unzip (0→0.6) then curtain slide-off (0.6→1) — with the pull keeping a continuous pace so there's no velocity break at the hand-off. All vertex math runs on the UI thread. Because Skia ships native code it requires a dev build (not Expo Go); tested on Expo SDK 56 (iOS + Android) with react-native-worklets.
