teal-packaging

bysyyyra albez

Create a modern, creative, and high-end website for a custom packaging brand called BrandAura. The website must combine: - The simplicity and clarity of Wunderlabel - The interactivity and live preview system of a mockup generator - A unique, immersive experience using 3D and animations The goal is to create a hybrid between: → a premium brand website → a live design tool → an interactive 3D experience --- MAIN CONCEPT The website should NOT feel like a normal website. It should feel like: - a design studio - a creative tool - an interactive experience Users should immediately understand: “I can design my packaging live here.” --- DESIGN STYLE - Minimal, premium, modern - Strong whitespace - Smooth animations - Colors: - Primary: Deep navy blue - Secondary: Gold accent - Background: White / light gray Typography: - Clean sans-serif (modern) - Strong hierarchy --- HERO SECTION (3D EXPERIENCE) Create a fullscreen hero with an interactive 3D product: - A packaging item (box, tag, or label) - Slowly rotating (auto animation) - Premium lighting and shadows Interactions: - Mouse movement → slight rotation - Scroll → smooth transitions Overlay content: Title: “Design your packaging. Live.” Subtitle: “Create, customize, and preview your brand in real time” CTA: “Start Designing” Add: - Smooth fade-in animations - Premium feel --- LIVE DESIGN SECTION (CORE FEATURE) Create an interactive customization tool inspired by mockup generators. Layout: LEFT: - Options panel CENTER: - Live preview (2D or 3D) RIGHT (optional): - Quick actions --- FEATURES - Upload logo - Add text - Change colors - Change materials Preview must: - Update instantly (no loading) - Be smooth and responsive --- 3D INTEGRATION If possible: - Use Three.js for simple 3D models - Apply logo as texture on product - Allow rotation and zoom If too complex: - Use 2D mockup + fake 3D effect (rotation + perspective) --- MOCKUP SYSTEM Each product must include: - mockup_image or 3D model - print_area (x, y, width, height in %) Behavior: - Auto-fit logo inside print area - Keep aspect ratio - Center automatically - Add realistic shadow/blending System must be dynamic and reusable --- PRODUCTS SECTION (WUNDERLABEL STYLE) - Clean grid - Clear categories: - Tags - Labels - Boxes - Bags - Stickers - etc. Each product: - Image - Short description - Button: “Customize” Keep it simple and clear --- ANIMATIONS (VERY IMPORTANT) Add: - Hover effects (lift, shadow) - Smooth transitions between sections - Scroll animations (fade, slide, parallax) - Micro-interactions Everything must feel smooth and premium --- CUSTOMIZATION FLOW Simple step-by-step process: 1. Choose product 2. Select size 3. Select material 4. Select printing 5. Choose quantity 6. Upload logo / text Add: - Progress indicator - Instant updates --- PRICING SYSTEM Dynamic pricing: price = base_price × quantity × option multipliers Display: - 100 pcs → price - 200 pcs → price - 500 pcs → price --- ORDER SYSTEM Simple form (no checkout): - Name - Phone - Address - City - Selected product (auto) - Selected options (auto summary) - Logo upload CTA: “Send Request” --- UX RULES - Instant feedback - No delays - Clear CTA everywhere - Minimal friction - Mobile-first --- DO NOT INCLUDE - No cart - No payment - No heavy libraries (except Three.js if needed) - No complex UI --- FINAL RESULT The website must feel like: - A premium brand - A creative design tool - An interactive 3D experience It should impress users visually AND make customization simple and fast.