Loading...
Loading...
Loading...
รวม background effect patterns — Gradient Mesh (CSS keyframes) และ Floating Particles (Framer Motion) พร้อม config ปรับแต่งได้
Background gradient blob ที่เคลื่อนไหวด้วย CSS keyframes เท่านั้น — ไม่ใช้ JS animation, 0 KB extra bundle, SSR-safe
Animated Gradient Mesh — CSS Only
Animated Gradient Mesh — Usage & Config
blobCount — จำนวน gradient blob (2-5)speed — slow / medium / fastcolors — custom gradient colors (oklch/rgb/hex)blur — blur intensity (px) — ยิ่งสูงยิ่ง softopacity — opacity ของ mesh layer (0-1)อนุภาคลอยขึ้น-ลงด้วย Framer Motion animate + infinite repeat — รองรับ custom size, count, speed, color
Floating Particles — Framer Motion
Floating Particles — Usage & Config
count — จำนวน particles (default: 30)sizeRange — [min, max] ขนาด particle (px)speedRange — [min, max] duration animation (s)particleClass — Tailwind class สำหรับสี เช่น 'bg-brand-100/30'floatDistance — ระยะลอยขึ้น-ลง (px)