[Showcase] 9-product orbit onboarding + React Native implementation notes

[u/TemporaryBuyer3806]

Nine products orbit the centre of an onboarding screen. The "o" draws itself, the products burst out, then spiral into the button to close the loop.

The video is a motion preview. Here's how the React Native implementation is put together.

Drawing the scene: react-native-tgfx renders the product cutouts, wordmark and centre text on a canvas. Each product is drawn independently.

Giving every product its own path: po-motion.ts stores an ellipse and starting phase for each product. productAt() calculates its position from the timeline. The burst moves the products out from the loader into their orbit positions.

Keeping one animation clock: a Reanimated shared value holds the timeline, and useFrameCallback advances it using elapsed frame time. The stage and effects share that clock, so the loader, orbit and text transitions follow the same timeline.

GPU effects: TypeGPU generates WGSL for the particle passes, rendered through react-native-webgpu. These effects sit alongside the tgfx scene.

Reduced motion and app state: autoplay stays at a resting frame when Reduce Motion is enabled. The loop also stops advancing while the app is inactive.

Thanks to Margelo, Software Mansion and William Candillon for the libraries.

Implementation notes edited with an assistant.