Haswell Creative — Case Study 34
Start a project

Vitaforge Daily · Health & Wellness App · Concept

A wellness check-in that feels like breathing out

Most wellness apps open with a form: sliders, dropdowns, a progress bar that says step 1 of 12. Vitaforge Daily asks one question a day. We designed the onboarding quiz screen so that answering it takes three taps and a swipe, and feels calm while you do it.

Role
Interface design, interaction design, front-end build
Year
2026
Deliverables
Mobile quiz screen (React 18, TypeScript, Tailwind CSS 3, Lucide icons, Vite), liquid-glass component styles, slide-to-confirm control, staggered entrance choreography, single-file build
The whole interaction in six seconds: tap the answers that apply, then slide to confirm. Selected cards frost over rather than changing colour, and the Done label fades as the thumb travels.

The problem

Wellness apps tend to onboard like insurance companies. The first screen asks for age, height and weight, the second a list of goals in a checkbox column, and a progress bar keeps count. People who downloaded the app to feel less stressed get a questionnaire before they get anything back.

Vitaforge Daily's pitch is a short daily check-in, not a full health profile. The first screen had to show that straight away: one question, a handful of answers big enough to tap without aiming, and a way to answer out loud for anyone who would rather not tap at all.

It also had to look like it belongs on a current phone. Frosted, translucent surfaces are now the default look of the operating system, and an app that ignores them looks older than it is.

The approach

Three moves, in order.

01

Put the calm in the background

The screen sits on a photograph that is blurred until it is only colour and soft shapes, with a cool grey-blue wash over it. Nothing competes with the question. The only warm colour on the screen is a gold glow behind the voice button, so that is where the eye goes once the cards are read.

02

Make every surface the same glass

The badge, the cards, the voice button and the slider track all share one liquid-glass style: nearly clear, lightly blurred, with a hairline border that brightens at the top and bottom edges like light catching a lens. A selected card is the same glass, just slightly frosted and a little brighter, so the selection reads without any tick marks or accent colour.

03

Replace the Submit button with a gesture

A Next button gets tapped by mistake. A slider has to be dragged on purpose. The thumb follows your finger, the Done label and chevrons fade as it moves, and on release it either snaps to the end (past 85% of the track) or springs back to the start. Keyboard users can press Enter on the thumb to finish.

The work

What we built.

The screen

The Vitaforge Daily quiz screen shown at full size inside a phone frame, centred on a white page. A Vitaforge Daily pill with a timer icon sits at the top under the Dynamic Island, then the question, the four answer cards with Stress and Skin selected, the voice button with its gold glow, and the Done slider.
The screen at actual size, 375 × 780 points, in a phone frame built in CSS. The frame, the bezel and the Dynamic Island are drawn from layered box shadows rather than an image, so the mockup stays sharp at any zoom.
A close-up of the four answer cards. Stress and Skin are slightly frosted and brighter; Sleep quality and Weight are nearly clear. Each card has a small number at the top left and its label at the bottom.
Selected versus unselected. Selected cards get more blur, a brighter fill and a stronger edge highlight. There is no accent colour and no checkmark, just a change in the glass.
Three frames of the Done slider: the white thumb at rest on the left with Done and three chevrons visible, the thumb dragged halfway with the label fading, and the thumb snapped to the right end with the label almost gone.
The slider at rest, mid-drag, and complete. The label and chevrons fade in step with how far the thumb has moved, so you can see your progress before you let go.

The entrance

Five frames of the screen loading: first only the badge, then the question appearing, then the answer cards rising in one after another, then the voice button, and finally the Done slider.
Everything rises 16 pixels and fades in, top to bottom, over about 1.3 seconds: badge, question, each card 80 ms apart, the voice button, then the slider. The screen reads in the order it assembles. Anyone who has turned on reduced motion gets the finished screen immediately.

Also delivered

The screen is built in React 18 and TypeScript with Tailwind CSS 3 and Lucide icons, bundled by Vite. The glass effect is two small CSS classes: the gradient hairline is a pseudo-element masked down to a 1.4px ring, so it follows any corner radius without an extra element. The drag uses pointer events with pointer capture, so it behaves the same with a mouse, a finger or a stylus.

The production build inlines all of its script and styles into a single 161 KB HTML file (52 KB compressed) that opens straight from disk. The full project source ships alongside it. Open the live screen →

Results

What the build has to hit.

1 file

The whole screen, inlined, opens from disk

52 KB

Compressed size of the production build

1

Glass style, used on every surface

85%

How far you drag before Done commits

Vitaforge Daily is a concept project. The app, its name and its features are fictional, and the screen shown is an interactive prototype of one onboarding step rather than a shipped product. The background photograph is loaded from an external image host.