Skip to content
native cook
Esc

Loading the catalog…

Mood Capsule Check-In


A mood check-in on a near-black screen (#0E0E10): under the grey question "How are you feeling?" sit five upright capsules (62 × 103 pt, 9.5 pt apart) in violet, blue, teal, yellow and orange, each with a pale mark in its middle, a glassy edge and a glow of its own colour; a dark tile with a gear and a chart icon is at the top right and a two-part control "Current mood / Overall today" at the bottom. A tap makes a capsule swell into a glowing lozenge (158 × 306 pt) in the middle of the screen that holds its mark, two translucent chips ("Emotions", "Context") and a round pale button with an up arrow, while the other moods turn into small grey capsules (42 × 73 pt) at its sides, the question blurs away, the mood's name ("Pleasant") appears above and the whole screen takes a haze of that colour. A sideways swipe, or a tap on a grey capsule, hands the lozenge to the neighbouring mood: one deflates as the other inflates, the name and the haze changing with it. A tap on a chip steps it through its words (it turns solid once it holds one), the round button shows a check and closes the lozenge, and a tap outside closes it without sending.

Category
Forms
Added
Oct 12, 2026
Stacks
RN · Swift · Kotlin
Author
Not known · posted by Oleg Matskov ↗

Is this your design? Ask for a correction or removal

React Native · Expo SDK 52+, TypeScript

✦ If the result drifts from the video, tell your agent what looks different and how it should look. A short correction usually closes the gap.