What's Included
- RainOverlay.tsx — Skia Atlas rain particle system
- ObstacleRect type for splash-on-UI collisions
- Apple Weather-style demo screen (collapsing header + glass cards)
- Scroll-synced splash example with measured card rects
- README with install + usage
About the Project
The whole storm is a single @shopify/react-native-skia <Atlas>: one 64x64 sprite texture holds five streak lengths plus a soft droplet, and every drop is positioned through a useRSXformBuffer worklet that runs entirely on the UI thread from a useClock value. Each drop's fall/splash/respawn cycle is derived statelessly by re-hashing its seed per cycle, so 800 drops (plus 3 splash droplets each) simulate without any mutable particle state or React re-renders. Drops carry a depth value that biases speed, length, scale and opacity for parallax, and a configurable fraction collide with obstacle rects — screen-space rectangles you measure from your own UI via measureInWindow. A scrollY shared value is subtracted from each obstacle top per frame so splashes stay glued to cards as they scroll, and obstacleMinY stops splashes from rendering over a pinned header. Props expose numDrops, windAngle, collideChance and a debug rect overlay. Built on Reanimated 4 / react-native-worklets and tested on Expo SDK 56 (iOS + Android); requires the Skia native module, so it runs in a dev build rather than Expo Go.