The whole effect is one SkSL shader running in @shopify/react-native-skia. Nothing is layered over the button: the shader paints the surface, a resting aurora of two blobs sitting under the bottom edge, then three sweep passes, a bottom-hugging spill that runs ahead of the wavefront, a rose body, and a white-hot core, plus a drifting spark field that only shows near the leading edge. All three sweep layers share one anchored left edge and only their leading edge moves, so the core lights the very first pixel of the pill instead of leaving a dark notch at the left cap. Hold progress, the finish flood and the spark amount are Reanimated shared values pushed into the uniforms through useDerivedValue, so the animation stays on the UI thread and only label changes cross to JS. The press is tracked with React Native's own onTouchMove rather than a GestureDetector, because a detector wrapped around a Pressable turned one physical press into three press-in cycles. On iOS 26 the optional glass surface uses the native Liquid Glass material; elsewhere it falls back to an expo-blur BlurView, which on Android needs an explicit clipping parent to round its corners. Skia rules out Expo Go, so this wants a development build. Built and tested on Expo SDK 56, React Native 0.85, Reanimated 4.3 with react-native-worklets.
A hold-to-confirm button whose progress bar is the light itself: a Skia shader sweeps the pill over a 2 second hold, and lifting early rewinds it. Every colour, radius and timing was fitted frame by frame against a reference recording, so the sweep and the flood at the end are measured, not guessed. Drop it on any destructive confirm: leaving a session, deleting an account.
A pill button lit by a Skia aurora: two soft lights sit just below the bottom edge and bleed up into the surface, blooming under your finger. Colours, spread, drift and press feel are all props, and glass mode swaps the fill for iOS 26 Liquid Glass with a blur fallback everywhere else. Drop it in as the primary CTA on an onboarding, paywall or checkout screen.
A snap carousel of voice cards, pixel-matched to Claude's voice settings: the centred card glows from a Skia shader driven by the audio it plays. Cards ease down a measured scale curve as they leave the centre, dots track the scroll, and a selection haptic fires once the snap settles. Drop it into an onboarding or settings flow where a user auditions voices.
A bank card that ices over when you tap Freeze, with a Skia runtime shader growing a dendritic frost front from the four corners. It refracts the artwork through crystal facets and creeps an ice lattice onto the background behind it. Tap a card to lift it out of the wallet list onto a dimmed scrim, then toggle freeze from the focus bar. Built for fintech card-lock screens.
