Skip to content
maximized.studio

Hydrately: one Rive file, two native apps

Hydrately is a free hydration tracker for iPhone and Android. You log drinks in two taps, keep a daily pace and build a streak.

Rive file shared by both apps
1Rive file shared by both apps
artboards in that file
5artboards in that file
Luau scripts, signed at build
3Luau scripts, signed at build
for all of it
455 KBfor all of it

Draw it once, use it everywhere

  1. 1iPhone

    It started native

    Badge, drops and confetti were SwiftUI code. Fine, with one app.

  2. 2Android

    Then came Android

    Drawing it all twice was no option. One Rive file became the shared component library.

  3. 3Web

    It paid off on the web

    hydrately.app's wordmark and the demos on this page play the same files as the apps.

  4. 4Next

    Ready for more

    Any new platform is one Rive runtime away.

The one gap: widgets

Widgets can't run Rive, so they still use native artwork. Rive in widgets would be the dream.

1Splash screen2Streak badge4Progress bar6Background

From launch to Home

The splash washes away to Home, where three of the six are already running.

  1. 1SplashAt launch
  2. 2StreakBadgeHome, celebrations
  3. 3StreakPopupStreak milestones
  4. 4ProgressBarHome
  5. 5InsightCardStats
  6. 6PatternBackgroundEvery screen
1

Splash

  • Rain falls in four layers: far drops small and slow, near drops big and fast.
  • When the app is ready, the water sweeps the word away and uncovers Home.
2

StreakBadge

  • One number in, six metals out: bronze at 1 day, diamond at 365.
  • A new count replays the pop-in. A band of light crosses it every seven seconds.
3

StreakPopup

  • It sits over the running background, with the badge nested inside.
  • Stars and confetti take the badge's metal, so a diamond streak sparkles in diamond.

Tap the button in the popup to dismiss it, just like in the app.

4

ProgressBar

  • The app passes progress, pace and a tier. A Luau script draws the bar at any width.
  • Falling behind turns it amber, then red. Reaching the goal plays three sweeps of light.
6:34 AM11:31 PM

tier 1 · On pace

5

InsightCard

  • Glass, an accent color per insight, and a foil that slides as you tilt the phone.
  • The text on top stays native, so it grows with Dynamic Type.

Timing

9 AM

You drink most during this hour

Move your pointer over the card to tilt it. In the app, the phone's motion does this.

6

PatternBackground

  • Drifting drops or rolling waves, in five themes.
  • One instance runs behind the whole app and never restarts.
7

Wordmark

  • The splash's word in a 40 KB file of its own, so hydrately.app's homepage loads only that.
  • The letters are plain vector shapes, with no font file and no script.

Five rules that kept it fast

Load once, never restart

The background keeps running under every sheet and celebration.

No blank first frame

The loading screen waits until Rive has drawn its first frame.

Motion knows when to stop

Reduce Motion and Low Power Mode pause it. So does a hidden screen.

Text stays native

Copy sits on top of Rive, so Dynamic Type and screen readers work.

Checked at build

A renamed input in the editor fails the build instead of the app.

Runs on Rive's native iOS and Android runtimes, and on the web on this page

See Hydrately
All Rive examples
contact

Ready to make it fun?

We design the streaks, rewards, and animations that turn first-time users into regulars. Book a call and see the engine behind this site.

hello@maximized.studio
linkedin.com/in/maximvellinga