Radiant — คลัง shader ระดับ production ที่แค่ “copy…
สิ่งที่โคตรน่าสนใจคือมันไม่ใช่ library แต่เป็น “ไฟล์ HTML เดี่ยว” แต่ละ effect มีครบทั้ง canvas + script + style ในตัวเอง แค่ copy ไปวาง หรือ embed iframe ก็ใช้ได้ทันที ไม่มี npm ไม่มี build step ใด ๆ
คอนเซปต์มันเลยชัดมาก คือทำให้ shader ที่ปกติยาก กลายเป็นของที่ frontend dev หยิบไปใช้ได้เลย เช่น black hole แบบฟิสิกส์จริง, ผ้า silk ไหล, particle flow หรือ crack แบบทอง Kintsugi ระดับงานโชว์
จุดที่ผมว่าฉลาดมากคือ “ออกแบบมาเพื่อ production” ไม่ใช่ demo เหมือน Shadertoy เพราะทุกตัว optimize มาแล้ว เน้น 60fps, pause ตอน tab ไม่ active และรองรับจอ retina แบบไม่กินเครื่องเกิน
อีกอย่างที่โคตรเข้ายุคคือเอาไป remix กับ AI ได้ทันที แค่ copy code ไปใส่ Claude หรือ ChatGPT แล้วสั่ง “เปลี่ยนสี” หรือ “เพิ่ม motion” มันจะกลายเป็น tool สร้าง visual แบบกึ่ง no-code ไปเลย
ฟีเจอร์ v1.1 ก็เริ่มโหดขึ้น เช่น interactive ด้วย mouse/touch ทุก shader, preview พร้อมกันทั้งหน้า, มี shader ใหม่เพิ่ม และปรับ effect บางตัวให้ realistic ขึ้น เช่นน้ำแบบ Fresnel หรือแสง corona
ข้อดีชัด ๆ คือฟรี 100% (MIT), ใช้ commercial ได้, integrate ง่ายกว่าทุกตัวในตลาด และเหมาะมากกับ landing page, portfolio หรือ presentation ที่อยากดูแพงขึ้นทันที
ข้อสังเกตตอนนี้คือมันยังใหม่มาก จำนวน shader ยังไม่เยอะเท่า Shadertoy และบางตัวที่ไม่ใช่ featured ยังดู generic ไปหน่อย แต่ direction ถือว่าชัดและไปได้ไกลมาก
สรุปสั้น ๆ Radiant คือ “Shadertoy เวอร์ชันใช้งานจริง” ที่ตัดความยุ่งยากทั้งหมดออก เหลือแค่ copy แล้ว deploy ใครทำเว็บแล้วอยากให้มันดู premium แบบ effort น้อย นี่คือของที่ควรรู้จักมาก ๆ
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac