Website 3D V2
Prompt
High-Level Description Create an award-winning one-page portfolio website for a 3D Designer named John Doe. The website must exist entirely inside one HTML file with embedded CSS and JavaScript. The experience should combine: * Awwwards Site of the Day. * Apple product pages. * Active Theory. * Resn. * Bruno Simon. * Monograph. * Modern designer portfolios. The website should feel luxurious, experimental, and highly interactive. FIRST RULE — 3D OBJECTS ARE THE MAIN DESIGN LANGUAGE This rule has absolute priority. The website must contain many 3D objects. Never leave large empty areas. Fill the composition with: * Floating spheres. * Glass spheres. * Metallic spheres. * Cubes. * Capsules. * Cards. * Rounded rectangles. * Abstract geometry. * Rings. * Floating panels. * Morphing blobs. * Layered objects. * Particle clusters. Objects should exist in multiple depth layers. The page should feel like a 3D ecosystem rather than a flat website. Cursor Interaction EVERY major object must react to the cursor. Objects should: * Rotate. * Tilt. * Follow the cursor. * Repel from the cursor. * Attract to the cursor. * Change scale. * Shift depth. * Move in parallax. * Morph shape. * Cast changing shadows. The cursor should influence the entire scene. Nothing should remain static. Cursor interaction is mandatory. Hero Section Large cinematic hero. Name: John Doe Title: 3D Designer Large headline. Short introduction. Decorative floating objects everywhere. Layered compositions. Animated cards. Multiple depth levels. The hero should resemble a premium 3D product launch. Projects Section Large cards. Cards should: * Expand. * Fold. * Rotate in 3D. * Become fullscreen. * Morph into galleries. * Rearrange themselves. Cards should never simply open modals. Everything transforms. Background System The background must remain alive. Include: * Gradient meshes. * Floating particles. * Morphing shapes. * Noise textures. * Light diffusion. * Reactive glow fields. * Ambient movement. * Layered depth. Background effects should react subtly to mouse movement. Animation Rules Animation quality is one of the highest priorities. Implement: * Spring physics. * Elastic interactions. * Shared element transitions. * Parallax systems. * Perspective transforms. * Motion blur. * Inertia. * Scroll storytelling. * Text reveals. * Morphing shapes. * Multi-stage loading sequences. * Dynamic navigation. * Floating interface layers. * Sticky scenes. Nothing should appear or disappear abruptly. Everything should transform. Visual Style Modern editorial design. Swiss-inspired typography. Architectural layouts. Generous whitespace. Premium materials. Soft frosted textures. Subtle neumorphism. Layered depth. Delicate shadows. Balanced asymmetry. Avoid: * Cyberpunk. * Neon colors. * Heavy glassmorphism. * Generic portfolio templates. * Flat layouts. * Empty sections. Color Palette Background: #F5F5F7 Primary text: #141414 Secondary text: #707070 Accent: #4A63FF Soft shadows: rgba(0,0,0,0.05) Frosted materials: rgba(255,255,255,0.45) Technical Requirements Single HTML file. Embedded CSS and JavaScript. Responsive. Semantic HTML. Smooth 60 FPS animations. Organized code. High performance. FINAL RULE The website should immediately make visitors think: “How is this even built?” 3D objects should be as important as typography itself. The page should feel like a living sculpture made of floating geometry, interactive cards, and depth layers rather than a traditional website.
A system prompt was added to support web rendering
