A wave of light when money moves
When money arrives a warm wave of light rises behind the glass and the balance rolls as it passes; send money and a cool one washes back down.
React Native Skia · Reanimated · Expo Glass Effect · Expo UI (SwiftUI) · Expo Sensors · Expo Haptics
1Demo
2Flow
- 1Tilt the phoneYouthe card's foil band slides with it
- 2Mom sends $1,217Appa glass notice drops in with a soft haptic
- 3A warm wave risesApplight washes up behind the tiles; as the crest crosses the balance it rolls to $9,867, with a success haptic
- 4Tap Dad's faceYou$200 goes, with a light tick
- 5A cool wave washes downAppthe balance rolls to $9,667 as the crest passes, with a firm tap
3How it fits
4Code
const balanceY = insets.top + 150;
// The new balance lands when the crest of the wave passes the number.
const land = useCallback((delta: number) => {
setBalance((b) => b + delta);
}, []);
useAnimatedReaction(
() => (front.value - balanceY) * dir.value < 0,
(passed, previous) => {
if (passed && previous === false && pending.value !== 0) {
const delta = pending.value;
pending.value = 0;
scheduleOnRN(land, delta);
scheduleOnRN(delta > 0 ? feedback.arrived : feedback.sent);
}
},
);
const wave = useCallback(
(direction: 1 | -1, delta: number) => {
dir.value = direction;
warm.value = direction === 1 ? 1 : 0;
pending.value = delta;
front.value = direction === 1 ? height + 260 : -260;
amp.value = withSequence(withTiming(1, { duration: 200 }), withTiming(1, { duration: 1700 }), withTiming(0, { duration: 900 }));
front.value = withTiming(direction === 1 ? -420 : height + 420, {
duration: 2600,
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
});
},
[amp, dir, front, height, pending, warm],
);Tapping doesn't change the number. A reaction on the UI thread waits for the crest to cross the balance, then lands it with the haptic.
5Decisions
Landing the balance when the crest crosses it over updating it on tap
the digits roll at the moment the light reaches them
Real Liquid Glass tiles over a faked blur
the glass refracts the wave for free, so the effort goes into timing
SwiftUI's numeric text through Expo UI over a hand-built rolling counter
it is the system's own digit animation, not an imitation of it
One wave, warm in and cool out over a different effect for each event
one effect timed to one meaning: money in, money out
