verdant-theme

bynubl rahman

Create a modern, premium, interactive Formula 1 showcase website featuring three teams: Mercedes-AMG Petronas Formula One Team, Scuderia Ferrari, and Oracle Red Bull Racing. Design Requirements Dark futuristic theme with racing-inspired aesthetics. Full-screen hero section with animated F1 background. Smooth scrolling and premium animations. Glassmorphism cards and glowing accents matching each team color: Mercedes → Silver/Cyan Ferrari → Red Red Bull → Dark Blue/Red Sections Hero Section Large headline: "The Evolution of Formula 1 Engineering" Animated racing track background. CTA button: "Explore Cars" Team Showcase Display 3 highly detailed 3D-style F1 cars. Mercedes W-series car. Ferrari SF-series car. Red Bull RB-series car. Hover Animation (Main Feature) When a user hovers over any car: The car should smoothly explode into its individual components: Front Wing Rear Wing Nose Cone Front Suspension Rear Suspension Halo Floor Sidepods Engine Cover Wheels & Tires Diffuser Each component should move outward in a realistic engineering-style exploded view. Components should rotate slightly and glow. Labels should appear pointing to each part. A short description of the component should fade in. When the mouse leaves: All parts should smoothly reassemble into the complete car. Use spring physics and easing animations. No abrupt transitions. Technical Requirements Use HTML, CSS, JavaScript. Implement animations with GSAP and Three.js. Create realistic shadows, reflections, and depth. 60 FPS performance. Responsive on desktop, tablet, and mobile. Add parallax effects while scrolling. Include loading animation resembling F1 pit-stop wheel changes. Extra Effects Team-specific ambient lighting. Smoke particles near rear tires. Racing sound effect on hover (optional toggle). Dynamic camera movement around the car. Interactive specification panel showing: Top Speed Horsepower Weight Engine Championship Wins Premium Feel The final website should feel like an official Formula 1 engineering showcase, similar in quality to websites from luxury automotive brands and Formula 1 teams, with cinematic animations, ultra-smooth interactions, and high-end visual effects. For the best result, add: "Use Three.js GLTF 3D models instead of static images and create a true exploded-view animation for each car."