Motion Kit — a11y
ชุด animation พร้อมใช้ · เคารพ reduce-motion ทุกตัว · กดสลับ Full↔Reduce ดูได้
three.js — 3D บนเว็บ
WebGL + WebGPU · กราฟิก 3D, particle, shader, compute
Generative Art
Canvas 2D · ศิลปะที่ขยับเองด้วยโค้ด
Web Animation
scroll reveal + micro-interaction · vanilla
Creative CSS
เทคนิค CSS ล้วน · ไม่มี JavaScript เลย
Data Charts
กราฟ SVG ทำมือ · animate + hover
Image Filters
แต่งรูปด้วย canvas pixel · ไม่มีไลบรารี
Particle Physics
ลูกบอลมีแรงโน้มถ่วง + เด้ง + เมาส์ดูด/ผลัก
Audio Visualizer
Web Audio · สร้างเสียงเอง แล้ววาดความถี่
Shader Art — GLSL
WebGL fragment shader ดิบ · GPU วาดทุกพิกเซล
Game of Life
เซลล์ออโตมาตา · กฎ B3/S23 · คลิกวาดเซลล์
Image → ASCII
แปลงรูปเป็นตัวอักษร · luminance sampling
Variable Fonts
เล่นแกนฟอนต์แปรผัน · font-variation-settings
k-means (AI)
จับกลุ่มข้อมูลอัตโนมัติ · vanilla ML ไม่มี library
Fractal Explorer
Mandelbrot/Julia · คลิกซูมเข้าได้ไม่จบ
Maze Generator
สร้าง + แก้เขาวงกต · DFS gen + BFS solve
Maps
แผนที่ procedural · pan/zoom · ไม่ใช้ tile ภายนอก
Raymarching
3D จาก SDF บน GPU · sphere tracing
3D Physics
ลูกบอลเด้งในกล่อง 3D · project เอง ไม่ใช้ lib
Mic Visualizer
วิช่วลไลซ์เสียงจากไมค์จริง · getUserMedia
WebGL Particles
อนุภาคหลักหมื่นบน GPU · เมาส์ดูด/ผลัก
Image → Vector
แปลงรูป raster เป็น SVG · marching squares
WebGPU Compute
อนุภาคหลายแสนตัว · GPU คำนวณฟิสิกส์เองด้วย compute shader
Cloth & Rope
ฟิสิกส์ผ้า/เชือก Verlet · ลากจับ + ฉีกขาดได้
Kinetic Type
พิมพ์คำเอง (ไทย/อังกฤษ) → ตัวอักษรประกอบจากอนุภาค
Boids — Flocking
ฝูงเคลื่อนพร้อมกันจาก 3 กฎ + spatial hash รันพันตัว
Voronoi
เซลล์ per-pixel บน GPU · สลับ distance metric 3 แบบ
ASCII Video
เว็บแคม → ASCII real-time · มี fallback plasma
หมวดถัดไป
นี่คือจุดเริ่ม — จะเพิ่ม lab เรื่องอื่นที่เรียน/ลองทำเข้ามาอีก ให้เว็บนี้เป็นที่รวมว่า "ทำอะไรได้บ้าง" บอกได้เลยว่าอยากเห็นหมวดอะไรก่อน