Cobean is a fictional specialty coffee brand built as an image-led design study. Generated photography, charcoal textures, and three complementary typefaces give the single page a distinct coffee identity across light and dark themes.
From discovery to recipe
Visitors can browse five coffees with an accessible carousel, then open a complete house recipe for each drink. A scroll-led process scene follows the journey from origin to brew, with a clear ordered version for smaller screens and reduced motion.
Key features
- Five-coffee gallery with keyboard, swipe, and timed navigation
- Measured recipes in accessible dialogs
- Scroll-linked accents and four-stage coffee process
- Responsive light and dark themes with motion controls
Tech stack
Next.jsReactTypeScriptMotionCSS