ทำเว็บ ให้น่ารัก แบบมีลูกเล่น เจ๋งมาก

เตรียมรูปใบหน้าและ Direct link PNG โปร่งใส 4 รูป แล้วแทนค่าตัวอย่างก่อนสั่งสร้างเว็บ

1.promt สร้าง charactor 
สร้างตัวละคร Chibi 3D โดยอิงบุคคล และรายละเอียดหน้าตา ทั้งหมดจากภาพต้นฉบับ รักษาใบหน้า อัตลักษณ์ สีผิว และทรงผมให้เหมือนเดิม แต่เปลี่ยนชุดเป็นธีมต่างๆ ให้เข้ากับคน สร้าง 4 ภาพ เเยกกันพื้นหลังขาว

2.ลบ พื้นหลัง
ilovepng.com ฟรี

3.อัพรูปให้ได้ลิงก์ อัพที่ https://www.iloveimg.com/remove-background → copy Direct URL ทั้ง 4 รูป

4.copy Master Prompt จากเอกสาร แล้วแทนค่า:
[YOUR_IMAGE_URL_1-4] = ลิงก์รูป 4 ตัว
[YOUR_BG_COLOR_1-4] = สีพื้นหลัง เช่น #C0392B
[YOUR_BRAND_NAME] = ชื่อ brand
[YOUR_SUBTITLE] / [YOUR_DESCRIPTION] / [YOUR_CTA_TEXT] = ข้อความ

master prompt 
https://docs.google.com/document/d/196o3gb9gfGDOQx2NWHQkty0DJrhpD20lOgLC68KAGSU/edit?usp=sharing

Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using lucide-react for icons.


**Fonts (load in index.html head):**
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
Body font: 'Inter, sans-serif'. Display font: 'Anton, sans-serif'.


**Data (replace URLs and colors with your own):**
const ITEMS = [
 { src: '[<a href="https://ibb.co/KpBJ0nNd"><img src="https://i.ibb.co/q3hvy60K/Chat-GPT-Image-27-2569-09-52-04-1-1.png" alt="Chat-GPT-Image-27-2569-09-52-04-1-1" border="0"></a>]', bg: '#E74C3C' },
  { src: '[<a href="https://ibb.co/DfLKb18x"><img src="https://i.ibb.co/3mkhsTMD/Chat-GPT-Image-27-2569-09-52-04-2-1.png" alt="Chat-GPT-Image-27-2569-09-52-04-2-1" border="0"></a>]', bg: '#283593' },
  { src: '[<a href="https://ibb.co/GvWWdswr"><img src="https://i.ibb.co/Fb55hsvd/Chat-GPT-Image-27-2569-09-52-04-3-1.png" alt="Chat-GPT-Image-27-2569-09-52-04-3-1" border="0"></a>]', bg: '#2E7D32' },
  { src: '[<a href="https://ibb.co/Cykn9yb"><img src="https://i.ibb.co/3bD0Fbp/Delivery-drone-with-cargo-box-202607271003.jpg" alt="Delivery-drone-with-cargo-box-202607271003" border="0"></a>]', bg: '#6A1B9A' },
];
// Use PNG with transparent background, portrait ratio
// Preload all 4 images on mount via new Image()


**State & Logic:**
- activeIndex (0–3), isAnimating boolean lock, isMobile (window.innerWidth < 640, updated on resize)
- navigate('next' | 'prev'): ignore if animating; set isAnimating=true; bump activeIndex (prev+1)%4 or (prev+3)%4; release lock after 650ms
- Roles derived: center=activeIndex, left=(activeIndex+3)%4, right=(activeIndex+1)%4, back=(activeIndex+2)%4


**Layout (layers by z-index):**


1. BACKGROUND — backgroundColor from ITEMS[activeIndex].bg
   transition: background-color 650ms cubic-bezier(0.4,0,0.2,1)


2. GRAIN OVERLAY — z-index: 50, pointer-events: none
   SVG fractalNoise, baseFrequency=0.9, numOctaves=4
   opacity 0.08 (SVG) + container opacity 0.4
   backgroundSize: 200px 200px, repeat


3. GHOST TEXT "[Low Fly to Love
]" — z-index: 2, top: 18%
   font: Anton, fontSize: clamp(72px, 22vw, 300px)
   color: white, opacity: 1, letterSpacing: -0.02em
   centered, pointer-events: none, select-none


4. BRAND LABEL "[Low Fly to Love
]" — z-index: 60, top-left
   text-xs, uppercase, white, letterSpacing: 0.18em


5. CAROUSEL — z-index: 3
   Each item: position absolute, aspectRatio: 0.6/1
   img: objectFit contain, objectPosition bottom center
Per-role:
   center → scale(1.68), blur: none, opacity: 1, z:20, left:50%, height:92%, bottom:0
   left   → scale(1), blur:2px, opacity:0.85, z:10, left:30%, height:28%, bottom:12%
   right  → scale(1), blur:2px, opacity:0.85, z:10, left:70%, height:28%, bottom:12%
   back   → scale(1), blur:4px, opacity:1,    z:5,  left:50%, height:22%, bottom:12%


   Mobile: center scale(1.25)/height:60%/bottom:22%
           side left:20%|80%/height:16%/bottom:32%
           back height:13%/bottom:32%


   transition all properties: 650ms cubic-bezier(0.4,0,0.2,1)
   willChange: transform, filter, opacity


6. BOTTOM-LEFT UI — z-index: 60
   - Heading "วิวาห์เดลิเวอรี่ 11" — Anton bold, uppercase, white, text-[22px]
   - Body "AI CREATOR 10X" — hidden on mobile, text-sm, white opacity 0.85, lineHeight 1.6, mb-5
   - ArrowLeft + ArrowRight: w-16 h-16, border 2px white, rounded-full
     hover: scale(1.08) + bg rgba(255,255,255,0.12), transition 150ms


7. BOTTOM-RIGHT CTA "วิวาห์เดลิเวอรี่ 11 " — z-index: 60
   font: Anton, fontSize: clamp(16px, 3vw, 44px)
   white, uppercase, letterSpacing: -0.02em
   + ArrowRight icon at the end, hover opacity 1


**Behavior:**
Clicking arrows rotates roles; background color, scale, blur, and opacity all crossfade simultaneously over 650ms.
Center character is largest and sits in front, overlapping the ghost text behind it.