One idea, felt fast
Visitors should understand “a flavor for every hour” before they read a word.
(08)Case study · Concept build
Food & Drink · 2026
A landing page that runs on the clock
A night-only ice cream window with eight flavors, one for every hour. We built a page where choosing a flavor moves the clock, and the whole site changes color with the night.
Concept build
- Industry
- Food & Drink
- Services
- Web Design & Development, Motion Design, UX/UI Design
- Year
- 2026
- Scope
- Landing page
(01)Context
Context
Soft Hours is a concept brand we created: a small-batch ice cream window that opens only at night, from 6 PM to 1 AM. Everything is churned at 5 PM, and each hour of the night has its own flavor, getting darker as the night goes on.
(02)The challenge
The challenge
A food brand's website is usually a menu, some photos and the opening hours. Soft Hours' whole idea is time: the menu follows the night. The page had to make that idea felt in a few seconds, on a phone as much as a laptop, without turning into a gimmick or shutting anyone out.
Eight color themes
Every text color had to stay readable as the page moved from orange to near-black.
Real product images
Eight cups cut out of one product image, lined up so they can move between places.
Rich motion, calm on request
Plenty of movement, with a quieter version for people who turn on reduced motion.
(03)At a glance
The build
- 8
- Flavors, one for each hour
- 6 PM–1 AM
- The night the page moves through
- AA
- Text contrast in all eight themes
- 700 ms
- For the whole page to change color
Facts about the build, not measured results.
(04)Our approach
Our approach
- 01
Time is the interface
Changing flavor moves the clock forward or back, and the page follows the sky from golden hour to last call.
- 02
One file runs the page
Each flavor's hour, name, colors, words and prices live in one place, so a change shows up everywhere at once.
- 03
Readable before beautiful
Colors were adjusted until every text pairing passed WCAG AA in all eight themes.
(05)What we built
What we built
01
An odometer clock
The hour rolls like an odometer: up when time moves forward, down when it goes back.
02
The whole page changes with the hour
Background, text, buttons, the wave and the illustrations all shift together, in about 700 milliseconds.
03
A stage for the cups
Tonight's cup takes the front, the next two wait in line, and they move between places with a little spring.
04
A menu that follows the night
Eight cards on a timeline from 6 PM to 1 AM. Pointing at one, or tapping it on a phone, switches the page to that hour.
05
The Window
An illustrated walk-up window that changes color with the hour, with tonight's real cup on the ledge.
06
Made for phones
On a phone the clock, headline and cup come first, and a swipe moves through the night.
(06)In practice
In motion
Left alone, the page moves to the next hour every five seconds. Point at the cups or move through it with the keyboard, and it waits for you.
(07)Showcase
Showcase
(08)Under the hood
Tech stack and architecture
A small, fast front end. One data file drives every color and word.Show the architectureHide
- 01DataHours, names, colors, words and prices for all eight flavors
- 02ThemeColors registered as CSS properties, so one transition moves them all
- 03MotionSpring movement for the cups, and a calmer version for reduced motion
- 04ReviewAutomated screenshots of every hour at desktop and phone sizes
Stack
- Vite
- React
- TypeScript
- Tailwind CSS
- Motion
- Playwright for screenshot review
(09)Designed to achieve
What it's designed to achieve
A small brand's idea, understood in seconds: the hour changes, the color changes, and the menu makes sense. It shows how a landing page can carry a concept rather than just list a menu, while staying readable and calm for everyone. As a concept, it hasn't been measured with real visitors.
The text-me signup on the page is a demo: it checks the number and sends nothing.
Soft Hours
Ice cream for after dark.
(10)Related
What this project proves
Soft Hours is a fictional brand created by OverC for this concept build. Its products, prices and opening hours are part of the concept.
(→)Next case study
Client · Bimaline
One connected hospital
A complete hospital information system of 32 connected subsystems, in use across multiple hospitals.
(11)Contact
Let's buildyours next.
Tell us about your product, timeline and constraints. You’ll hear back from a senior engineer within one business day — with questions, not a sales deck.
contact@overc.io