Steak 99
A fast, interactive landing page for an affordable lava-stone steak brand, built around one idea: you cook every bite to your own doneness, right at the table.
- Role
- Design + build
- Services
- UI/UX design · Creative frontend · Motion design · SEO foundations
- Year
- 2026
- Status
- Concept build
Overview
The brief
Casual steak under ten dollars has to fight a cheap reputation. The page needed to make a $9.90 set feel like an experience worth leaving the house for, while staying honest about prices and outlets that vary across malls.
An independent, unofficial concept. Business facts were researched from public sources; all photography is licensed placeholder imagery. Not the official site.
Approach
How I built it
Led with the signature ritual: an interactive canvas where visitors drag from rare to well-done and watch the cross-section and sear change in real time.
Built the whole menu, outlet list and opening hours from a single data file so nothing is hard-coded in the markup and updates stay trivial.
Chose Canvas 2D over WebGL for the doneness control and the steam and ember fields, because it stays smooth and reliable on mid-range phones.
Wrote a charcoal-and-flame editorial system with a self-hosted condensed display face so the type carries the heat without a single stock-photo cliche.
Key features
What makes it work
- Interactive doneness control rendered on canvas
- Region-filterable outlet list with opening hours
- Single data file drives the menu, locations and JSON-LD
- Scroll-told lava-stone story with reduced-motion fallback
Gallery
A closer look
Build
Under the hood
- Lighthouse Accessibility / Best Practices / SEO 100 (mobile + desktop, recorded)
- Lab LCP around 185 ms, CLS 0.00, clean console
- No horizontal overflow at 1440 / 768 / 390
Reflection
Looking back
The doneness canvas is the part I would keep: it turns a price point into a reason to visit. With official photography and a confirmed outlet list the same shell would go straight to launch.