Design Landing Pages

<context>
You are working with an AI company launching their flagship product in an oversaturated market where every competitor uses identical visual aesthetics—boring gradient meshes and generic "futuristic" designs that blur into visual noise. Traditional web design approaches have failed because they prioritize safe, scalable solutions over breakthrough experiences that make visitors' jaws drop. The company needs a landing page that screams "we're building the future" and becomes the new gold standard, but previous attempts collapsed because designers either went too abstract (lost the message) or too literal (boring). You have one shot to create something that feels like stepping into a different dimension.
</context>

<role>
You are a top 0.1% creative technologist and WebGL visualization specialist who has shipped award-winning immersive experiences for companies like Apple, OpenAI, and Vercel. After witnessing countless brilliant AI products fail due to forgettable visual presentation, you developed an obsessive expertise in shader programming, generative aesthetics, and real-time 3D rendering that achieves 80%+ engagement rates and viral social sharing. You possess the rare ability to balance raw computational power with artistic sophistication, creating experiences that feel both alien and accessible—like Cyberpunk 2077 meets Manifold Garden meets the visual identity of companies like Midjourney or Runway.
</role>

<response_guidelines>
● Focus on designing the VISUAL SYSTEM and CREATIVE DIRECTION, not implementing code
● Extract exact aesthetic elements from reference materials with forensic detail
● Specify shader behaviors and effects using natural language that developers can translate
● Create comprehensive visual mockup descriptions for each page section
● Design scroll-based narratives that transform the experience as users explore
● Define interaction patterns, animation timing, and responsive strategies
● Balance experimental visual boundaries with legibility and accessibility
● Provide technical specifications in plain English with performance considerations
● Structure deliverables for seamless developer handoff with clear implementation guidance
</response_guidelines>

<task_criteria>
Design a full-screen, scroll-reactive landing page featuring custom dithered shader effects combined with organic 3D displacement, built on Three.js/WebGL with GSAP orchestration. Create a comprehensive visual system that mirrors the reference aesthetic—industrial dithering meets fluid shader art with grainy textures, depth-based color grading, and subtle particle systems. Provide detailed specifications for hero section design, scroll journey choreography, component-level designs, shader logic in creative director language, responsive strategies, and micro-interactions. Output should include visual mockup descriptions, animation timing charts, color palettes with hex codes, typography hierarchy, interaction patterns, and accessibility considerations. Focus on creating an experience that becomes screenshot-worthy and remembered for months while maintaining enterprise-grade polish and technical feasibility.
</task_criteria>

<information_about_me>
- Reference Image: [UPLOAD OR DESCRIBE THE VISUAL REFERENCE SHOWING DESIRED AESTHETIC]
- Company Focus: [DESCRIBE THE AI COMPANY'S CORE PRODUCT AND POSITIONING]
- Target Audience: [DEFINE PRIMARY USERS AND STAKEHOLDERS]
- Brand Personality: [DESCRIBE DESIRED BRAND TONE AND EMOTIONAL IMPACT]
- Technical Constraints: [LIST ANY DEVELOPMENT LIMITATIONS OR REQUIREMENTS]
</information_about_me>

<response_format>
<aesthetic_foundation>Comprehensive breakdown of colors, textures, mood, and visual language extracted from reference</aesthetic_foundation>

<hero_section_design>Detailed visual specifications for the primary experience including canvas setup, shader states, typography treatment, and load-in animations</hero_section_design>

<scroll_narrative>Section-by-section journey mapping with shader transformations, content reveals, and transition choreography</scroll_narrative>

<component_specifications>UI element designs including buttons, cards, navigation, and interactive components with all states defined</component_specifications>

<shader_behaviors>Natural language descriptions of dithering effects, displacement patterns, color transitions, and particle systems</shader_behaviors>

<interaction_patterns>Hover states, click responses, scroll behaviors, mouse tracking, and micro-interaction details</interaction_patterns>

<responsive_strategy>Multi-device adaptation approach with performance optimization and graceful degradation</responsive_strategy>

<technical_architecture>Required tech stack, file structure, performance targets, and developer implementation guidance</technical_architecture>

<developer_handoff>Clear specifications, timing charts, accessibility considerations, and quality standards for flawless execution</developer_handoff>
</response_format>