CASE 08 · WEBGL MARKETING SITE

ORENVIS.

ออกแบบและพัฒนาเว็บไซต์สตูดิโอดิจิทัลภาษาไทยให้ตัวเว็บไซต์แสดงฝีมือด้วยตัวเอง—เนื้อหาอ่านได้ชัดบนพื้นมืด ขณะที่ WebGL, motion และ interaction เสริมบุคลิกโดยไม่ขวางการติดต่อ

เปิดเว็บไซต์จริง ↗ดูขอบเขตงาน
ภาพ Orenvis Web Design and Software บนฉากอวกาศและวัตถุสามมิติแบบเส้นโครง
IMMERSIVE · TECHNICAL · CONFIDENTDark ground · Cream type · Orange signal
ROLE FIT
Web Developer · Frontend Design · Frontend Developer
DELIVERABLE
Responsive single-page marketing site
STACK
Vite · HTML/CSS/JS · Three.js · GSAP · Lenis
STATUS
Production · deployed 2026-09-07

THE CHALLENGE

ให้ความเคลื่อนไหว
เป็นหลักฐานของฝีมือ

กลุ่มเป้าหมายคือธุรกิจไทยที่กำลังประเมินบริการออกแบบเว็บและพัฒนาซอฟต์แวร์ เว็บไซต์จึงต้องสร้างความมั่นใจด้วยงานภาพและ motion แต่ยังต้องอ่านภาษาไทยง่าย เปิดดูบริการ/ผลงานได้ และไปถึงการติดต่อโดยไม่หลง

Content first

คงโครงสร้างและข้อความภาษาไทยให้เป็นแกน ไม่ปล่อยให้เอฟเฟกต์บดบังความหมาย

SEMANTIC HTML · THAI-FIRST

Motion with a job

starfield, orb, pointer และ scroll response สื่อความเป็น technical โดยใช้การเคลื่อนไหวอย่างยับยั้ง

WEBGL · SCROLL · POINTER

Failure is a state

ถ้า WebGL หรือ JavaScript มีปัญหา เนื้อหายังมองเห็นได้และมี CSS backdrop รองรับ

FALLBACK · NO-JS VISIBILITY

ROLE & SCOPE

สามขอบเขตงาน
ในเว็บไซต์เดียว

แยก deliverable, technology และ evidence ตามงานที่มีอยู่จริง เพื่อให้เห็นว่าการออกแบบกับการพัฒนาต่อกันตรงไหน โดยไม่เปลี่ยนชื่อบทบาทในประสบการณ์ทำงานจริง

01 · WEB DELIVERY

Web Developer

สร้างเว็บไซต์จาก content structure ถึง static build และไฟล์สนับสนุนการค้นหา พร้อมแยก active source ออกจาก starter code ที่ไม่ได้ใช้งาน

DELIVERABLES

  • Single-page information architecture
  • Semantic HTML และ structured data
  • Vite build, sitemap, robots และ llms.txt
Vite 8HTMLCSSJavaScript

EVIDENCE / STATE

active source และ dist มี release record ที่ตรวจไฟล์ production ตรงกัน; ไม่ใช้ dead code ใต้ src/ เป็นหลักฐาน

02 · DESIGN TO INTERFACE

Frontend Design

แปลงบุคลิก immersive, technical และ confident เป็นระบบภาพที่ responsive และอ่านภาษาไทยได้จริง

DELIVERABLES

  • Dark/cream visual system และ orange accent
  • Typography hierarchy และ responsive layouts
  • Service, portfolio, process, FAQ และ contact surfaces
CSS variablesResponsive UIVisual QA

EVIDENCE / STATE

style system มี mobile breakpoints, contrast hierarchy และ content-first fallback

03 · UI ENGINEERING

Frontend Developer

พัฒนา interaction และ animation เป็น module ที่แยกหน้าที่ พร้อมจัดการ lifecycle และ accessibility preferences

DELIVERABLES

  • Preloader, overlay menu และ scroll reveal
  • Starfield, nebula และ procedural orb
  • reduced-motion, visibility pause และ WebGL fallback
Three.jsGLSLGSAPScrollTriggerLenis

EVIDENCE / STATE

30fps cap, mobile geometry reduction, context-loss handling และ resource disposal อยู่ใน source

INFORMATION ARCHITECTURE

ลำดับที่พาผู้ชม
จากความสนใจสู่การติดต่อ

หน้าเดียวไม่ได้แปลว่าไม่มี IA แต่ละ section ทำหน้าที่ตอบคำถามถัดไปของผู้ประเมินบริการ ก่อนจบที่ contact action

01

Hero

วางบุคลิกและคุณค่าหลัก

02

Services

ขอบเขตปัจจุบันและอนาคต

03

Portfolio

ตัวอย่างงานและความเชี่ยวชาญ

04

About

แนวคิด วัฒนธรรม และเหตุผล

05

Process + FAQ

วิธีทำงานและลดข้อสงสัย

06

Contact

เปลี่ยนความสนใจเป็นบทสนทนา

FRONTEND ARCHITECTURE

เอฟเฟกต์หลายชั้น
แต่ความรับผิดชอบไม่ปนกัน

โครงสร้างแยก content, interaction และ 3D scene ออกจากกัน ทำให้ motion มีพื้นที่ของตัวเองและเนื้อหายัง degrade ได้อย่างปลอดภัย

index.html · Content & semanticssections · navigation · JSON-LD · FAQ · contact
style.css · Visual systemtokens · typography · layout · responsive · fallback
main.js · Interaction orchestrationpreloader · menu · Lenis · ScrollTrigger · reveal
scene.js · WebGL scenestars · nebula · GLSL orb · pointer · lifecycle

STATES & EVIDENCE

ประสบการณ์ยังทำงาน
เมื่อเงื่อนไขเปลี่ยน

หลักฐานใน source ไม่ได้มีเฉพาะ happy path แต่รวมภาวะที่ browser, device หรือ preference ของผู้ใช้ต่างออกไป

No JavaScript

hidden state ถูกตั้งจาก JavaScript ไม่ใช่ CSS เพื่อให้เนื้อหายังคงมองเห็นเมื่อ script ไม่ทำงาน

CONTENT VISIBLE

Reduced motion

ลด smooth animation และเรนเดอร์ฉากแบบ static ตาม preference ของระบบ รวมถึงรองรับการเปลี่ยนค่าระหว่างใช้งาน

USER PREFERENCE

Mobile resources

ลดจำนวนดาว geometry detail และ pixel-ratio cap เพื่อรักษาภาระการเรนเดอร์บนหน้าจอเล็ก

ADAPTIVE RENDERING

Context loss / hidden tab

CSS backdrop รองรับเมื่อ WebGL ใช้ไม่ได้ และ loop จะพักเมื่อ tab ถูกซ่อน พร้อม dispose resource เมื่อ hot reload

RECOVERY / LIFECYCLE

ขอบเขตหลักฐาน: active files คือ index.html, main.js, scene.js และ style.css; ส่วน src/ เป็น dead code และไม่ถูกนับเป็น stack หลัก เอกสาร HANDOFF ตอนท้ายบันทึก production deployment และการตรวจ byte match วันที่ 7 กันยายน 2026 ซึ่ง supersede สถานะ intended domain ตอนต้น เคสนี้ไม่อ้าง conversion, lead, SEO ranking หรือผลทางธุรกิจ และไม่รวมข้อมูล outreach หรือ credential ใด ๆ

PUBLIC WEBSITE

ดูงานออกแบบและ Frontend ทำงานพร้อมกัน

เปิดเว็บไซต์สาธารณะ หรือกลับไปดูการจับคู่บทบาทกับเคสอื่นใน Portfolio

เปิด orenvis.com ↗กลับไป Portfolio