# บทเรียน 07 — GSAP product story, storefront และ quote demo ## ผลลัพธ์การเรียนรู้ ผู้เรียนจะออกแบบ storyboard แนะนำสินค้า HUSH ONE, ตรวจ desktop pin เทียบกับ natural flow/reduced motion, ทดลอง listening scenarios แบบ visual-only, โหลดสินค้า `GET /api/catalog` และส่ง cart ด้วย `POST /api/quotes`. Worker เป็นผู้คำนวณ `totalPrice` แบบ integer satang จาก server catalog ของ demo; result คือ `quote-demo` ไม่ใช่ card checkout หรือคำเสนอทางการค้า. ## ต้องมีก่อนเริ่ม - รัน `npm run db:local` แล้วคง `npm run dev` ไว้ที่ `http://localhost:3320` - project นี้ติดตั้ง `gsap` แล้ว (ตรวจได้ด้วย `npm ls gsap`); อย่าเพิ่ม animation package สำหรับ lab - ใช้ชื่อ/อีเมลสมมติเท่านั้น. `DEMO_MODE=true` ทำให้ D1 redacts name/email และข้าม Turnstile เพื่อสอน local flow; มันไม่ได้เปิดใช้รับข้อมูลลูกค้าจริง ## จากหน้าโชว์สินค้า สู่ product story เว็บสินค้าแบบพรีเมียมไม่ได้รีบวาง catalog grid ไว้ใต้ hero แต่ค่อยตอบคำถามของผู้ซื้อทีละบท: สินค้านี้คืออะไร ให้ประสบการณ์แบบไหน ใช้สบายหรือไม่ ใช้ได้นานเท่าไร แล้วจึงพาไปเปรียบเทียบและเลือกซื้อ หน้า AirPods Max ของ Apple ใช้ลำดับจากเสียง ชิ้นส่วน โหมดการฟัง ไปจนถึงการใช้งานและข้อมูลก่อนซื้อ เรานำ **หลักการจัดจังหวะเนื้อหา** นี้มาเรียน โดยสร้างชื่อ ข้อความ สี ภาพและ interaction ของ HUSH เอง ไม่คัดลอกหน้าหรือทรัพย์สินของ Apple ([Apple product page](https://www.apple.com/airpods-max/), [Apple Newsroom, 8 ธันวาคม 2020](https://www.apple.com/newsroom/2020/12/apple-introduces-airpods-max-the-magic-of-airpods-in-a-stunning-over-ear-design/)). Storyboard ของตัวอย่างจึงยาวพอให้เห็นหน้าที่ของแต่ละ section: | ช่วง | คำถามของผู้ชม | สิ่งที่หน้าใช้ตอบ | | --- | --- | --- | | Hero + highlights | นี่คืออะไร และเด่นเรื่องใด | HUSH ONE, ภาพสินค้าขนาดใหญ่, จุดเด่น 3 เรื่อง | | Sound stage | แนวคิดเรื่องเสียงเป็นอย่างไร | วงแหวน driver, copy หนึ่งประเด็น และ scenario controls แบบ visual-only | | Materials + everyday | ใส่สบายและอยู่กับวันจริงอย่างไร | close-up, วัสดุสมมติ, แบตเตอรี่สมมติ 30 ชั่วโมง และ USB-C | | Specs + compare | ต่างจากรุ่นอื่นอย่างไร | รายละเอียดแบบเปิดอ่านได้และข้อมูลสินค้า 3 รุ่นจาก API | | Shop + FAQ + CTA | ขั้นต่อไปคืออะไร | cart, quote-demo, คำตอบเรื่องข้อมูลสมมติ และทางกลับไปเลือกรุ่น | HUSH ONE คือชื่อที่ใช้เล่าเรื่องให้ catalog item `headphones` หรือ “หูฟัง Studio One” เท่านั้น ส่วนราคาและสินค้าทั้งสามรุ่นยังยึด `GET /api/catalog`. ค่า 40 mm, 30 ชั่วโมง และสเปกอื่นเป็น **ข้อมูลสมมติสำหรับการเรียน** ไม่ใช่ผลทดสอบผลิตภัณฑ์จริง ช่วง listening scenarios เปลี่ยนเฉพาะภาพวงแหวน แท่ง visualizer และข้อความ ไม่มีการเล่นเสียงหรือจำลองผลตัดเสียงจริง ช่วง sound stage ใช้ pin เพื่อให้ผู้ชมโฟกัสกับเหตุการณ์เดียว แต่ทำเฉพาะจอที่กว้างอย่างน้อย 1024px สูงอย่างน้อย 700px และไม่ได้ขอ Reduce Motion. GSAP แนะนำให้ pin โครงที่นิ่งแล้ว animate children เพราะการ transform pinned element เองทำให้ค่าที่คำนวณไว้คลาดเคลื่อนได้ ([ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)). มือถือ จอเตี้ย และ reduced motion อ่านเนื้อหาเดียวกันแบบ natural document flow; `gsap.matchMedia()` จะ revert branch เมื่อ media condition เปลี่ยน ([GSAP `matchMedia()`](https://gsap.com/docs/v3/GSAP/gsap.matchMedia%28%29/)). แบบฝึก product story ฉบับลึกนี้เป็น **กิจกรรมต่อยอดสำหรับศึกษาด้วยตนเอง** เนื้อหาไม่เพิ่มเวลาในตารางอบรม 2 วัน วันละ 4 ชั่วโมง ## Prompt สำหรับสร้างเว็บสินค้า GSAP ใช้ prompt นี้ในสำเนา starter เพื่อสร้างเว็บสินค้า “HUSH” ก่อนเริ่ม lab. สำเนา canonical อยู่ที่ [Prompt ฉบับเต็ม — HUSH product story](../prompts/hush-product-story-prompt.md) เว็บไซต์ตัวอย่างและภาพด้านล่างเป็นแนวทางให้เทียบ ส่วน motion, keyboard และราคา server-side ต้องตรวจขณะใช้งานจริงด้วย ```text ปรับเว็บไซต์โชว์สินค้าเครื่องเสียงภาษาไทยแบรนด์สมมติ “HUSH” ใน starter หลักสูตร AI Web Studio ให้เป็น product story ที่มีเนื้อหาและจังหวะใกล้เคียงคุณภาพของเว็บไซต์เปิดตัวผลิตภัณฑ์ระดับพรีเมียม ใช้ Apple เป็น reference เฉพาะหลักการจัดลำดับเรื่อง พื้นที่ว่าง ภาพสินค้าขนาดใหญ่ และการเปิดเผยรายละเอียดทีละบท ห้ามคัดลอกข้อความ ภาพ screenshot โลโก้ ชื่อผลิตภัณฑ์ สีประจำรุ่น layout แบบจุดต่อจุด หรือ trade dress ของ Apple เขียนชื่อ ประโยชน์ รายละเอียด ภาพประกอบ SVG/CSS และ visual interaction ของ HUSH ขึ้นใหม่ ก่อนแก้ ให้อ่าน package.json, examples/store/{index.html,style.css,main.js}, migrations/0001_initial.sql, GET /api/catalog และ POST /api/quotes ใน src/worker.ts สรุป storyboard, state ของ interaction, motion plan และไฟล์ที่จะเปลี่ยนก่อนลงมือ แก้เฉพาะ examples/store/{index.html,style.css,main.js} ใช้ semantic HTML, CSS, vanilla JavaScript, GSAP และ ScrollTrigger ที่ติดตั้งอยู่แล้ว ไม่เพิ่ม dependency ไม่แก้ Worker, D1, migration, API contract, ข้อมูล seed หรือเว็บตัวอย่างอื่น เป้าหมายของหน้า: - ผู้ชมทั่วไปเข้าใจ HUSH ONE, เปรียบเทียบสินค้าสามรุ่น และขอใบเสนอราคาสาธิตได้ - “HUSH ONE” เป็นชื่อเชิง editorial ของ catalog item id `headphones` ซึ่ง API เรียกว่า “หูฟัง Studio One” - รักษา catalog IDs เดิมทั้งสามค่า: `headphones`, `speaker`, `earbuds` - ชื่อ คำอธิบาย และราคาในการ์ดร้าน/ตารางเปรียบเทียบต้องมาจาก GET /api/catalog - สเปก 40 mm, แบตเตอรี่ 30 ชั่วโมง และรายละเอียดเชิงผลิตภัณฑ์อื่นเป็นข้อมูลสมมติ ต้องมีป้าย “ข้อมูลสมมติสำหรับการเรียน” ใกล้เนื้อหา ห้ามเขียนเป็นผลทดสอบหรือคำรับรองจริง ทิศทางภาพ “product-led studio editorial”: - ใช้ palette Cloud #f5f5f7, Ink #22202b, Lilac #dcd5ff, Iris #6551b7, Muted #686471 และ White #ffffff เป็น design tokens - ใช้ IBM Plex Sans Thai สำหรับเนื้อหา/หัวเรื่องไทย และ Inter Bold สำหรับ wordmark HUSH ONE กับตัวเลขเชิงเทคนิค โดยใช้เฉพาะฟอนต์ local ใน public/fonts - ใช้ภาพเดิม `/images/headphones.webp` เป็นภาพสินค้าหลัก กำหนด width/height หรือ aspect-ratio เพื่อกัน layout shift; ใช้ CSS crop, background, shadow และ framing สร้างมุมมองใหม่ได้ - ไม่สร้างหรืออ้างว่าได้สร้างภาพใหม่ และไม่ดึงภาพ third-party - ใช้พื้นที่ขาวและ lilac กว้าง สลับกับบทเสียงพื้นเข้มเพียงหนึ่งช่วง - ใช้ border radius, shadow และ gradient เท่าที่สื่อวัสดุหรือ depth ของสินค้า ไม่ตกแต่งทุก section สร้าง storyboard ตามลำดับนี้ โดยแต่ละบทมีหนึ่งประโยชน์หลักและหนึ่งหลักฐาน/คำอธิบาย: 1. sticky product navigation: wordmark HUSH, anchor ไปภาพรวม/เสียง/สเปก/เลือกรุ่น, ปุ่มเปิดกระเป๋าเดิม และ anchor offset ที่ไม่บัง heading 2. hero: eyebrow “HUSH ONE / OVER-EAR HEADPHONES”, h1 เดิม “ฟังโลก ในแบบของคุณ”, คำอธิบายสั้น ราคา HUSH ONE ที่อัปเดตจาก API; ระหว่าง loading/error ให้แสดง “ดูรุ่นและราคาที่พร้อมให้ทดลองด้านล่าง” โดยไม่แต่งตัวเลขราคา, CTA “สำรวจรุ่นและราคา” และ “รู้จัก HUSH ONE” พร้อมภาพหูฟังขนาดใหญ่ 3. editorial highlights: การ์ดสั้น 3 เรื่อง ได้แก่ เวทีเสียง ความสบาย และจังหวะใช้งานทั้งวัน หลีกเลี่ยงตัวเลข/คำอ้างประสิทธิภาพที่ไม่มีที่มา 4. sound chapter พื้นเข้ม: เวทีวงแหวน driver เป็น signature ของหน้า มี HUSH ONE, “40 mm · ข้อมูลสมมติ” และ copy อธิบายเสียงแบบไม่อ้างผลวัดจริง 5. listening scenarios: ปุ่ม “โฟกัสงาน”, “ระหว่างทาง”, “พักสักครู่” เปลี่ยนเฉพาะข้อความ และความสูงของแท่ง visual equalizer; ใช้ button กับ `aria-pressed`, keyboard ได้, มี status text และข้อความชัดเจนว่าเป็นภาพสาธิต ไม่มีเสียงเล่นและไม่จำลองผลตัดเสียงจริง 6. materials/comfort: ภาพ close-up จาก asset เดิมหรือ CSS composition พร้อมอธิบายวัสดุสมมติ โดยไม่เลียนแบบชื่อวัสดุหรือชิ้นส่วนของผลิตภัณฑ์จริง 7. everyday/battery: เล่าแบตเตอรี่สมมติ 30 ชั่วโมงและ USB-C เป็นสถานการณ์ใช้งานตัวอย่าง ไม่ใส่ข้อความรับประกันหรือ claim ที่ไม่ได้ทดสอบ 8. specifications: ใช้ `
` หรือโครง semantic ที่อ่านได้โดยไม่ใช้ JavaScript แสดง 40 mm, 30 ชั่วโมง, USB-C และข้อมูลสมมติอื่นอย่างกระชับ 9. API-backed comparison: วางต่อจากการ์ด shop ใน section เดียวกัน เปรียบเทียบสินค้าสาม catalog IDs จาก response เดียวกับการ์ด แสดงชื่อ คำอธิบาย และราคาโดยใช้ API พร้อม loading, empty และ error state; ห้าม hard-code ราคาเป็น fallback 10. shop: รักษาการ์ดสินค้า ปุ่มเพิ่มสินค้า กระเป๋า quantity controls และ quote form เดิม 11. FAQ: ใช้ native `
` อธิบายข้อมูลสมมติ, quote-demo และไม่มี audio playback 12. closing CTA: พากลับไปเลือกรุ่นหรือเปิดส่วนสินค้า โดยไม่อ้างว่าเป็น checkout ข้อกำหนด GSAP และ responsive: - register ScrollTrigger หนึ่งครั้ง และคง `gsap.matchMedia()` ที่ active เพียงหนึ่ง instance; ใช้ตัวแปร `let motion` กับ `setupMotion()` เพื่อ revert ก่อนสร้างใหม่เมื่อคืนหน้าจาก bfcache - เขียน HTML/CSS ให้เนื้อหาทุกบทมองเห็นและอ่านตามลำดับได้ตั้งแต่ก่อน JavaScript โหลด ห้ามตั้ง opacity:0/visibility:hidden เป็น initial state ของเนื้อหาสำคัญ - เปิด pinned sound stage เฉพาะ media query `(min-width: 1024px) and (min-height: 700px) and (prefers-reduced-motion: no-preference)` - pin wrapper `.story-stage` หรือ section ที่นิ่ง แล้ว animate เฉพาะ children เช่นวงแหวน, product render, copy และ visualizer; ห้าม animate transform ของ pinned element เอง - ใช้ scrub แบบมีขอบเขต ไม่ scroll-jack ไม่เปลี่ยน native scrollbar และไม่ผูก CTA กับจุดจบ animation - ระหว่าง 761–1023px, desktop ที่สูงไม่ถึง 700px, มือถือ และ reduced motion ให้ทุก section เรียง natural document flow โดยไม่มี pin และไม่มี scrub - motion ย่อยที่ไม่จำเป็นทำงานเฉพาะ `prefers-reduced-motion: no-preference` - ใน reduced motion ให้ clear transform/opacity/visibility ที่ animation อาจทิ้งไว้ และให้ scenario controls, anchors, cart และ quote form ทำงานครบ - เมื่อ media query เปลี่ยน GSAP ต้อง revert animation/ScrollTrigger ของ branch เดิม - เรียก `motion.revert()` เมื่อ page ถูกทิ้งผ่าน `pagehide`; ถ้า `pageshow.persisted` คืนหน้าจาก bfcache ให้สร้าง motion ใหม่อย่างปลอดภัยหรือ refresh โดยไม่เพิ่ม trigger ซ้ำ - refresh ScrollTrigger หลัง image/font/DOM geometry พร้อมจริงเท่านั้น ไม่เรียกทุก frame ข้อกำหนด interaction และ accessibility: - มี skip link, landmark, heading hierarchy, alt ที่อธิบายภาพ, visible focus และสี contrast อ่านได้ - ทุก control มีชื่อที่ screen reader เข้าใจ; scenario buttons มี selected state ทั้งภาพและ `aria-pressed` - scenario เปลี่ยน state แบบ visual-only และต้องไม่เรียก Web Audio, `