feral-ui

byYashasvi paheriya

Act as a senior frontend architect, AI SaaS designer, and motion UI expert. Create a premium, modern web application UI for an AI Object Detection platform called "VisionX". Take inspiration from a YOLO demo website (clean layout, model showcase, detection examples), but transform it into a futuristic, interactive AI product with smooth animations and better UX. --------------------------------------------- 🎯 CORE EXPERIENCE: The website should feel like: - A real AI product (not a static page) - Smooth, interactive, and modern - Similar flow to YOLO demo, but upgraded to a SaaS dashboard experience --------------------------------------------- 🧩 PAGE STRUCTURE: 1. HERO SECTION (Like video but premium) - Fullscreen dark background - Subtle animated gradient / particles - Title: "VisionX AI Object Detection" - Subtitle: "Detect, Analyze, and Understand Objects in Real-Time" - CTA: - Upload Image - Start Live Detection - Smooth fade-in + slide-up animation --------------------------------------------- 2. "WHAT IS VISIONX" SECTION (Inspired by YOLO info block) - Left: text explanation - Right: animated AI preview (image with fake detection boxes) - On scroll: - text fades in - image animates with bounding boxes appearing --------------------------------------------- 3. MODEL / USE CASE SECTION (Inspired by video cards) Create responsive cards: - Plane Detection - Warehouse Detection - License Plate Detection Each card should have: - Image preview - Overlay detection boxes (animated) - Hover effect: - zoom image - glow border - show label + confidence --------------------------------------------- 4. DETECTION WORKSPACE (MAIN FEATURE) A full interactive section: LEFT: - Drag & drop upload box - Smooth hover animation CENTER: - Detection Canvas: - shows uploaded image - bounding boxes animate in (fade + scale) - labels appear with delay RIGHT: - Result Sidebar: - object list - confidence bars (animated) --------------------------------------------- 5. SKELETON LOADING SYSTEM (IMPORTANT) When user uploads: - Show skeleton UI - Grey shimmer effect - Fake bounding boxes loading animation - Smooth transition into real results --------------------------------------------- 6. FAQ / INFO SECTION (like video but improved) - Accordion style - Smooth expand/collapse animation --------------------------------------------- 🎨 DESIGN SYSTEM: - Dark UI (#0f0f0f) - Neon accents (blue/purple) - Glassmorphism cards - Soft shadows - Rounded corners (2xl) - Clean spacing like SaaS products --------------------------------------------- ✨ ANIMATIONS (VERY IMPORTANT): - Use Framer Motion - Page load → fade + slide - Scroll animations → reveal sections - Hover → scale + glow - Detection boxes: - appear sequentially - smooth easing NO sudden changes. Everything must feel fluid. --------------------------------------------- 🧠 UX RULES: - Instant feedback on actions - Show preview immediately after upload - Clear focus on main feature (detection) - Minimal clutter --------------------------------------------- 🛠 TECH STACK: - React (Vite) - Tailwind CSS - Framer Motion - Three.js (background) - Axios (API calls) --------------------------------------------- 📁 FOLDER STRUCTURE (STRICT): frontend/ ├── src/ │ ├── components/ │ │ Navbar.jsx │ │ Hero.jsx │ │ UploadBox.jsx │ │ DetectionCanvas.jsx │ │ ResultSidebar.jsx │ │ SkeletonLoader.jsx │ │ ModelCard.jsx │ │ FAQ.jsx │ │ │ ├── sections/ │ │ HeroSection.jsx │ │ AboutSection.jsx │ │ ModelsSection.jsx │ │ DetectionSection.jsx │ │ │ ├── services/ │ │ api.js │ │ │ ├── hooks/ │ │ useDetection.js │ │ │ ├── pages/ │ │ Home.jsx │ │ │ ├── App.jsx │ ├── main.jsx --------------------------------------------- ⚡ EXTRA PREMIUM TOUCHES: - Smooth scrolling - Glass blur navbar - Animated gradients - Subtle sound feedback (optional) - Loading progress indicator --------------------------------------------- 🎯 OUTPUT REQUIREMENT: - Clean, modular React code - Production-ready UI - Smooth animations everywhere - Premium SaaS feel (like a startup product demo) --------------------------------------------- IMPORTANT: Do NOT create a basic UI. Do NOT copy YOLO layout. Upgrade it into a modern AI product experience called VisionX. Focus on smoothness, interaction, and visual quality. Act as a senior AI product designer and frontend engineer. Create a premium, production-ready web application UI for an AI object detection system called "VisionX". The UI should replicate the EXPERIENCE of a YOLO demo video: - Image appears instantly after upload - Detection happens smoothly - Bounding boxes animate onto the screen - Labels and confidence scores fade in progressively DO NOT copy any existing UI. Instead, recreate the same smooth experience with a modern, futuristic design. -------------------------------------------------- 🎯 CORE EXPERIENCE FLOW (VERY IMPORTANT): 1. User uploads image 2. Image instantly appears on screen (no delay) 3. Skeleton loader overlays the image (AI scanning effect) 4. After 1–2 seconds: - Bounding boxes animate in one by one - Labels fade in with slight delay - Confidence scores animate (count-up effect) This flow must feel smooth, cinematic, and satisfying. -------------------------------------------------- 🎨 UI STYLE: - Dark theme (#0f0f0f) - Neon glow accents (blue / purple) - Glassmorphism panels - Minimal, clean layout - Inspired by AI tools + n8n + Tesla UI -------------------------------------------------- 🧩 MAIN COMPONENTS: 1. Upload Area: - Drag & drop box - Smooth hover glow - Instant preview after upload 2. Detection Canvas (MOST IMPORTANT): - Displays uploaded image - Overlay bounding boxes: - Animate with scale + fade - Slight delay between each box - Smooth easing (easeOut) 3. Results Sidebar: - List detected objects - Animated confidence bars - Icons + labels -------------------------------------------------- 💀 SKELETON LOADER (MANDATORY): While detecting: - Show shimmer effect over image - Fake bounding boxes pulsing - Blurred overlay with "Analyzing..." text - Smooth transition into real results -------------------------------------------------- ✨ ANIMATION DETAILS (CRITICAL): - Use Framer Motion - No sudden jumps — everything must animate Bounding box animation: - opacity: 0 → 1 - scale: 0.8 → 1 - delay: staggered (0.1–0.2s) Label animation: - slide up + fade in Confidence: - animate number from 0 → value -------------------------------------------------- 🎥 LIVE DETECTION MODE: - Webcam feed - Real-time overlay boxes - Subtle scanning line animation -------------------------------------------------- 📁 FOLDER STRUCTURE: frontend/ ├── src/ │ ├── components/ │ │ UploadBox.jsx │ │ DetectionCanvas.jsx ← handles bounding boxes │ │ ResultSidebar.jsx │ │ SkeletonLoader.jsx │ │ Navbar.jsx │ │ ├── features/ │ │ detection/ │ │ liveDetection/ │ │ analytics/ │ │ ├── hooks/ │ │ useDetection.js │ │ ├── services/ │ │ api.js │ │ ├── pages/ │ │ Home.jsx │ │ ├── App.jsx │ ├── main.jsx -------------------------------------------------- 🛠 TECH STACK: - React (Vite) - Tailwind CSS - Framer Motion - Axios -------------------------------------------------- 🎯 OUTPUT: - Clean, modular React code - Beautiful animations - Realistic detection flow (like YOLO demo) - Premium SaaS-level UI -------------------------------------------------- IMPORTANT: Focus more on EXPERIENCE than layout. The UI should feel alive, smooth, and intelligent — not static.