Baan Design Studio — Portfolio Website สำหรับสตูดิโอออกแบบ

โจทย์: เว็บที่ต้องขายงานได้ด้วยตัวเอง

Baan Design Studio เป็นสตูดิโอออกแบบภายในที่มีผลงานโดดเด่น แต่เว็บไซต์เดิมทำให้ผลงานดูด้อยค่า พวกเขาต้องการเว็บที่ "สวยพอๆ กับงานที่เราทำ" และต้องโหลดเร็วพอที่จะไม่ทำให้ลูกค้าหนีก่อนเห็นงาน

สิ่งที่เราทำ

Animation-first Design Process

เราเริ่มจากการ prototype animation ใน CodePen ก่อน แล้วค่อย implement จริง เพราะ animation ที่ดีต้องออกแบบมาพร้อมกับ layout ไม่ใช่ add-on ทีหลัง

Horizontal Scroll Gallery

ใช้ GSAP ScrollTrigger + Lenis ทำ horizontal pinned section ที่ scroll ตาม vertical ได้ลื่นไหล:

gsap.to('.gallery-track', {
  x: () => -(gallery.scrollWidth - window.innerWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.gallery-section',
    start: 'top top',
    end: () => `+=${gallery.scrollWidth - window.innerWidth}`,
    pin: true,
    scrub: 1,
  },
})

Image Reveal Animation

ทุกรูปเข้าด้วย clip-path animation ที่ทำให้รู้สึกเหมือน "เปิดม่าน":

@keyframes reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

Performance Optimization

ความท้าทายใหญ่คือรูปภาพคุณภาพสูงจาก photographer มืออาชีพที่ไฟล์ใหญ่มาก เราแก้ด้วย:

• @nuxt/image + AVIF format ลดขนาดไฟล์ได้ 60-80%
• Intersection Observer สำหรับ lazy load ที่แม่นยำกว่า native loading="lazy"
• Blur placeholder เพื่อให้หน้าดู complete ระหว่างรูปโหลด
• Priority load เฉพาะรูป above-the-fold

ผลลัพธ์

"ลูกค้าคนแรกที่ติดต่อมาหลังเว็บใหม่ออนไลน์ บอกว่าตัดสินใจจากเว็บเลย ไม่ได้ดู portfolio เพิ่มเติม"

— คุณวรรณา สุนทร, Creative Director