HẠT. Specialty Roastery
Three motions
that make a menu feel crafted.
A concept website for a specialty roastery where every transition answers one question: where did this come from, and where does it go?
The project
A motion study,
built as a working website.
I designed and coded a complete one-page menu for a specialty roastery to test a simple idea: motion should explain the interface, not decorate it.
- Role
- UI, motion design & front-end
- Deliverable
- Live responsive site + 44 s motion breakdown
- Platform
- Desktop & mobile web
- Stack
- HTML, CSS, GSAP 3
Art direction, layout, motion rules, front-end implementation and the vertical video that explains them. The video's browser windows run the site's own motion code, so every duration and ease shown on screen is the real value.
Try it
The live site.
Turn the cups, open a card.
Use the thumbnails, the arrow keys, the scroll wheel or a swipe to change drink. Tap the cup or “Xem chi tiết” to open its card; ✕, Esc or the backdrop closes it.
The embedded site scales to fit this frame. On a phone, open it full screen for the mobile layout.
The three rules
The common way,
and the way I chose.
Each rule replaces a familiar default with a movement that keeps the visitor oriented.
Turn around a pivot
Slide the product sideways at a constant speed.
Cups sit on an 860 px orbit whose centre is outside the right edge of the screen. Changing drink turns the whole orbit 45°, so each cup arrives along a curve, like a tray being rotated.
- Duration
- 0.9 s
- Ease
- power3.inOut
- Step
- 45° desktop / 30° phone
Follow the reading order
Swap every line of text at the same moment.
The old copy lifts out, then the new copy enters top to bottom: label, name, description, tasting notes, price. Each line starts 0.08 s after the one above, so the eye is led instead of flooded.
- Duration
- 0.6 s per line
- Ease
- power3.out
- Stagger
- 0.08 s
Open and close along the same path
Pop a modal in the middle of the screen, away from what was tapped.
The detail card starts as the exact circle of the cup (440 × 440, radius 220) and grows into the panel; the photo shrinks into its corner. Closing plays the same path in reverse, back to the cup.
- Duration
- 0.7 s
- Ease
- power4.inOut
- Start = end
- the cup's own rect
Motion breakdown
Shown in 45 seconds.
Motion only.
A vertical film for social media shows each of the three motions on the live site: close up, in an x-ray of the whole orbit, on the phone layout, slowed down where the detail matters, then at real speed, ending with desktop and phone together.
- Overlays mark the pivot, the reading order and the timings; the site underneath is the real build
- Slow-motion passages are marked with their speed (0.5×)
- Built with HyperFrames from the site's own GSAP timelines
Responsive
Same rules,
re-drawn for a thumb.
Below 820 px the page switches to a 430 px layout. The orbit is rebuilt, not shrunk: its pivot moves under the cup and the card becomes a full-height sheet.
Details
Motion that can
step out of the way.
Expressive movement only works if it never blocks anyone.
Instant when asked
With prefers-reduced-motion every transition becomes an instant state change, using the same functions with zero duration.
Always reachable
Real buttons and tabs, arrow-key navigation, a focus-trapped dialog that returns focus on close, and a live region that announces the selected drink.
Site and film agree
Each motion returns a GSAP timeline with explicit start and end values, so the page plays it live and the video places it on a seekable clock.
Playfair Display
Inter / JetBrains Mono
Self-hosted with the Vietnamese subset, so every diacritic renders in the right face.#120E0B#F3E9DC#C98B5A#E2B48AReflection
Good motion answers
“where did that come from?”
The pivot, the reading order and the shared path are small decisions, but together they make a single page feel physical and easy to follow.
What I delivered
A complete, responsive concept website with three documented motion rules, accessible fallbacks, and a 45-second film that shows them with the site's own code.
Honest scope
HẠT. is a fictional brand created for this study. There is no client, launch or usage data; prices, origins and recipes are illustrative. Product photos are from Unsplash: Nathan Dumlao (three images) and Monaz Nazary.