What's Included
- TypeScript source (WaterPool.tsx) with inline SkSL shader
- Pool floor + rubber duck image assets
- Tunable controls (waves, caustics, speed, duck, shadow)
- Demo screen
- README with install + usage
About the Project
The water is a single @shopify/react-native-skia RuntimeEffect: an SkSL fragment shader (ported from a Shadertoy GLSL caustics shader) samples the pool photo through an ImageShader and displaces it with summed sine waves for refraction, adds additive caustic highlights, and paints the duck's elliptical shadow at the same displaced coordinate so it ripples with the tiles. A react-native-reanimated useClock SharedValue feeds useDerivedValue uniforms every frame on the UI thread, and the duck's buoyant wander/tilt is a sum-of-sines at unrelated frequencies so the path never visibly repeats. Tested on Expo SDK 56 with the new architecture (react-native-skia 2.6 + reanimated 4 + worklets); requires a development build rather than Expo Go, and runs on both iOS and Android since all the heavy lifting stays on the GPU.
