Swimming mark
MascotThe logomark patrols back and forth, turning in 3D at each end so the front always leads. A looping brand mascot.
Rive
Back to homeSugar Shark · Brand System · v1.0
2026-05-02
Sugar Shark
The brand system
In design
The mobile library inherits the web register.
Once the web UI library is locked, these five screens are the next bench. The brand’s central interaction — the warn moment after a scan — leads. Mobile-first, 390×844, light mode for v1.
01 · Screen
In designScan
Camera-first capture: barcode, label, or menu item. Big tap target, low chrome, the viewfinder does the talking.
02 · Screen
In designScan result
The brand’s central interaction. The score, the recommendation, and the canonical no-color warn pattern. One sentence in plain language — never a chart.
03 · Screen
In designHome
The home base. Recent scans, your watchlist, and a single primary action — never a feed.
04 · Screen
In designLog
What you’ve eaten, when, and what we said about it. Tabular numerals, GI scores aligned column-to-column.
05 · Screen
In designWatching
Categories you’re tracking — rice bowls, sauces, drinks. The list earns its place by surfacing repeat offenders before you reach.
06 — Motion
Motion
Small, triggered effects — not interactive toys. Loading states, entrances, and quiet status loops that make the app feel alive while data lands. In React Native these are built with Moti and Reanimated. Every one is decel-only — no bounce, no overshoot — and goes still for anyone who asks for reduced motion. The previews below loop so you can feel the timing.
Skeleton shimmer
LoadingScan result and log rows hold their shape while data loads — a soft sweep, never a spinner on a blank screen.
Moti · Skeleton
0GI
Score reveal
TriggeredThe GI score counts up to its value as the result lands. It arrives once and settles — no bounce.
Reanimated
Analyzing…
Scanning pulse
StatusThe “analyzing” heartbeat while the camera reads a label. Calm, infinite, low-attention.
Moti · loop
Content settle
EntranceScreen content fades and rises a few pixels on mount. Decel only — it arrives, it doesn’t spring.
Moti
Staggered list
EntranceLog and watchlist rows cascade in one after another, ~90ms apart. Order you can feel.
Moti · stagger
Processing ring
StatusThe quiet loop for the moment between a scan and its result. One arc, one direction.
Reanimated