Boltwick's Brilliant Build-Up

🎯 Loyihaning maqsadi Interaktiv, premium ko‘rinishdagi landing page yaratish: “Exploded view” (detallar havoda ajralgan) animatsiyasi Smooth scroll asosida sahifa hikoyasi Realistik metall va yog‘och material hissi WebGL/Three.js orqali 3D tajriba Antigravity (floating parts) efekti 🧱 Umumiy konsepsiya Vizual g‘oya Qurol markazda “havoda suzib turadi” Scroll qilganda detallar: ajraladi aylanadi qayta yig‘iladi Minimalistik qorong‘i fon Premium military-tech estetika 🖥️ Texnologik stack Frontend Three.js — 3D render GSAP + ScrollTrigger — animatsiya React / Next.js — struktura Tailwind CSS — styling 3D format GLB/GLTF model PBR materiallar 🎬 Landing page struktura 1️⃣ Hero Section (Above the fold) Maqsad: kuchli birinchi taassurot Vizual AK-47 to‘liq yig‘ilgan holda markazda Sekin “float” animatsiya Subtle camera drift Animatsiya Idle floating (antigravity) Light reflection harakati Parallax fon Matn overlay Sarlavha qisqa tagline CTA tugma 2️⃣ Exploded View Section (Scroll bilan) Maqsad: detallarni ko‘rsatish Trigger Scroll pastga Animatsiya ketma-ketligi Bosqich 1: Ajralish Detallar quyidagicha ajraladi: barrel → oldinga stock → orqaga magazine → pastga bolt carrier → yuqoriga springs → cho‘zilib chiqadi Easing: power3.out Duration: 1.2–1.8s Bosqich 2: Antigravity float Har bir detal: sekin tebranadi mikro-rotatsiya qiladi depth bo‘yicha suzadi Parametrlar: float amplitude: 2–6px rotation: ±3° loop: infinite easing: sine.inOut Bosqich 3: Hover interaktivligi User detal ustiga olib borsa: detal yengil kattalashadi glow paydo bo‘ladi info tooltip chiqadi 3️⃣ Detail Focus Section Maqsad: har bir qismni alohida ko‘rsatish Mexanika Scroll davomida: kamera yaqinlashadi bitta detal highlight bo‘ladi boshqalari blur bo‘ladi Har bir detal uchun Ko‘rsatish: nomi qisqa tavsif texnik xususiyat 4️⃣ Reassembly Section Maqsad: dramatik qayta yig‘ilish Animatsiya Scroll oxirida: Detallar vibratsiya qiladi Tezlashib markazga uchadi Snap bilan yig‘iladi Kamera zoom out Easing: expo.inOut Impact sound (optional) 5️⃣ Final CTA Section To‘liq yig‘ilgan model Slow cinematic rotation CTA tugma Minimal UI 🎨 Dizayn talablari Rang palitrasi Background: #0B0B0D Secondary dark: #121217 Accent: #C19A6B (yog‘och ohangi) Metal highlight: #9AA0A6 Yoritish (Three.js) Light setup HDRI environment Rim light (orqa tomondan) Soft key light Subtle bloom Materiallar Metall High roughness variation Micro scratches normal map Metallic: 0.9–1 Yog‘och PBR wood texture Clear coat effect Subsurface feel ⚡ Performance talablari FPS Desktop: 60 FPS Mobile: 30+ FPS Optimizatsiya Draco compression Texture ≤ 2K Lazy loading LOD levels Suspense fallback 📱 Responsivlik Desktop Full 3D interaktiv Tablet Reduced particles Simplified lighting Mobile Static fallback yoki lite 3D Touch rotation 🎮 Qo‘shimcha interaktivlar (ixtiyoriy) 🔊 subtle mechanical sound 🖱️ mouse parallax ✨ particle dust 🎯 hotspot markers 🌫️ depth fog 📦 Deliverables GLB model (optimizatsiya qilingan) HDRI Texture pack React komponent Animatsiya timeline Performance test