Artisan Coffee
To showcase the high-end capabilities of modern web architecture, we developed a standalone, immersive scrollytelling environment for a boutique coffee roastery. The goal: Translate the sensory experience of a small-batch roastery into a cinematic digital journey.
Year
2026
Platform
WordPress
Focus
Immersive UX
Digital
Crema
The aesthetic is rooted in Neo-Artisan Minimalism: a design style that combines high-performance interaction with traditional, tactile textures.
Dark Cacao (#1A1412)
The foundational canvas, providing a deep, moody atmosphere.
Craft Gold (#C4A574)
Signature accent for interactive highlights and sketching.
Off-White (#FFFBF5)
Maintains readability with a soft, organic warehouse feel.
Technical
Architecture
Scrollytelling Engine
Frame-based video-scrubbing logic. Using 800vh of vertical depth, we LERP-ed 295 high-resolution frames for buttery-smooth cinematic motion.
Three.js Fluid Dynamics
Real-time WebGL liquid simulation. Generated coffee crema textures mapped to a Three.js plane that ripples dynamically based on cursor position.
Cinematic SVG Drawing
Multi-layered dash-sketch protocol. Hand-draws each word sequentially, followed by a solid-fill fade after the "pen" finishes the stroke.
Search-First
Architecture
Semantic Integrity
Utilized HTML5 semantic tags like <nav>, <main>, <section>, and structured <h1>-<h3> hierarchy to make certain search crawlers master the content flow.
Performance at 60FPS
By optimizing keyframes for transform and opacity only, we maintained a constant 60FPS, a critical factor in performance-based Core Web Vitals rankings.
Feature Quick Reference
LOGIC
Standalone Demo Engine
NARRATIVE
Dynamic Loading Status
UX
Floating Coffee Nav
ANIMATION
Golden Sketch Protocol