The Challenge
Craft Beer Microbrewery ต้องการ website ที่ไม่ใช่แค่โบรชัวร์ออนไลน์ แต่เป็น experience ที่สะท้อน identity ของแบรนด์ — ความเป็น industrial, underground, และ craft ที่จับต้องได้ ในตลาดที่กฎหมายไทยห้ามโฆษณาแอลกอฮอล์ website คือ owned media ที่สำคัญที่สุด ต้องทำให้คนจำได้ตั้งแต่ scroll แรก
โจทย์หลัก: สร้าง website ที่ให้ความรู้สึกเหมือนเดินเข้าโรงเบียร์จริง ผ่าน 3D interactive scroll
Oracle Team
- Pennant — Creative direction: กำหนด visual identity, mood board, animation timing, และ scroll narrative ที่เล่าเรื่องแบรนด์ผ่านการ scroll
- Forge — Development lead: architecture ตั้งแต่ vanilla CSS parallax ไปจนถึง Three.js + Blender pipeline, performance optimization สำหรับ mobile
The Process
โปรเจกต์นี้ผ่าน 7 iterations ที่แต่ละรอบเพิ่ม complexity และ polish:
- V1-V2 (Parallax Foundation): เริ่มจาก basic CSS parallax scroll กับ layered backgrounds — ทดสอบ concept ว่า scroll-driven storytelling ใช้ได้กับแบรนด์นี้
- V3-V4 (Three.js Integration): ย้ายไป Three.js สำหรับ 3D beer can model ที่หมุนตาม scroll position, เพิ่ม lighting และ environment map ให้กระป๋องดูสมจริง
- V5-V6 (Blender Pipeline): นำ 3D model จาก Blender เข้ามาแทน primitive geometry, ได้ detail ของกระป๋องที่แม่นยำกว่า พร้อม texture และ label จริง
- V7 (Production Polish): Responsive design สำหรับทุก device, scroll performance tuning, loading optimization, และ deploy บน Vercel
Results
- Production-ready 3D scroll experience ที่ทำงานได้ลื่นทั้งบน desktop และ mobile
- Scroll narrative เล่าเรื่องแบรนด์ตั้งแต่ origin story ไปจนถึง brewing process ผ่าน 3D animation
- 7 iterations พิสูจน์ว่า progressive refinement approach ให้ผลลัพธ์ที่ดีกว่าการ plan ทุกอย่างล่วงหน้า — แต่ละ version เรียนรู้จากข้อจำกัดของ version ก่อนหน้า
- Live site deploy บน Vercel พร้อมใช้งานจริง
Tech Stack
- Three.js (3D rendering + scroll animation)
- Blender (3D modeling + texturing)
- Vercel (hosting + deployment)
- CSS parallax (early iterations)
- Performance optimization (mobile-first)