Skip to content

THREE-JS-LANDING-PAGE-DESIGN.md

Latest commit

 

History

History
354 lines (287 loc) · 10.4 KB

THREE-JS-LANDING-PAGE-DESIGN.md

File metadata and controls

354 lines (287 loc) · 10.4 KB

Director's Palette - Three.js Landing Page Design Strategy

🎨 LANDING PAGE VISION

Goal: Create an immersive, scroll-driven experience that showcases Director's Palette's unique creative workflow using Three.js animations combined with your 16:9 and 9:16 video content.

User Journey: Visitor scrolls down and experiences each feature through interactive 3D demonstrations that make them want to keep exploring.

🛠️ TECHNICAL ARCHITECTURE

Recommended Stack:

// Core Technologies
- Next.js 15 (your current setup)
- React Three Fiber (@react-three/fiber)
- React Three Drei (@react-three/drei) 
- GSAP ScrollTrigger (scroll animations)
- Lenis (smooth scrolling)
- Framer Motion (UI animations)

// Performance
- React.Suspense for 3D scene loading
- Lazy loading for video content
- Progressive enhancement for mobile

File Structure:

/app/landing/
├── page.tsx (main landing page)
├── components/
│   ├── Hero3D.tsx (Three.js hero scene)
│   ├── StoryDemo3D.tsx (story generation demo)
│   ├── CharacterConsistency3D.tsx (character showcase)
│   ├── PricingCalculator3D.tsx (interactive pricing)
│   └── VideoIntegration.tsx (video + 3D hybrid)
├── animations/
│   ├── scroll-triggers.ts (GSAP configurations)
│   ├── three-scenes.ts (3D scene configs)
│   └── video-controls.ts (video playback logic)
└── assets/
    ├── models/ (3D models if needed)
    └── videos/ (your 16:9 and 9:16 content)

🎬 SECTION-BY-SECTION DESIGN

Section 1: Hero - "Create Stories That Move"

Three.js Scene:
- Floating particles forming text: "Director's", "Palette"
- 3D geometric shapes representing creativity (cubes, spheres)
- Subtle rotation and movement suggesting creative energy

Scroll Animation:
- Particles reassemble into interface mockup
- Camera zooms into the interface
- Text animates: "From Story to Screen in Minutes"

Video Integration:
- Your 16:9 demo video plays in 3D "screen" within the scene
- Screen tilts and scales as user scrolls

Mobile: 
- Simplified particle animation
- Your 9:16 mobile demo in device mockup

Section 2: Story Generation - "Intelligent Story Breakdown"

Three.js Scene:
- 3D book opening with animated pages
- Text flying from pages into character cards
- @character_name tags floating and connecting

Scroll Animation:
- Book opens revealing story content
- Characters emerge as 3D silhouettes
- Camera pans showing character consistency

Video Integration:
- Your story generation demo plays on book pages
- Real-time demonstration of character extraction
- Show @character_name system in action

Interactive Elements:
- Hover over characters to see descriptions
- Click to play character consistency examples

Section 3: Multi-Format Showcase - "One Story, Every Medium"

Three.js Scene:
- Central story sphere morphing into different formats
- Orbiting elements representing each format
- Dynamic transitions between Story → Music Video → Commercial → Children's Book

Scroll Animation:
- Story sphere transforms into music visualization
- Music notes flow into commercial concepts  
- Commercial elements form children's book illustrations
- Full 360° rotation showing versatility

Video Integration:
- Each format shows your relevant demo content
- 16:9 videos for desktop showcase
- 9:16 videos for mobile format examples
- Seamless transitions between formats

Section 4: AI Model Advantage - "Choose Your Intelligence"

Three.js Scene:
- Floating model cards with context indicators
- 🟢 1M+, 🟡 100K+, 🟠 <100K visual badges
- FREE model cards with special glow effects
- Cost particles flowing between models

Scroll Animation:
- Model cards fly in from different directions
- FREE models highlighted with golden particles
- Context indicators pulse showing capabilities
- Cost comparison animations

Interactive Elements:
- Hover models to see real-time cost calculations
- Click to see example generations
- Cost calculator with live updates

Section 5: Pricing Calculator - "Power Without the Price"

Three.js Scene:
- 3D pricing cards floating in space
- Credit meters filling up based on selection
- Competitor comparison with cost flying away
- Value demonstration through particle effects

Scroll Animation:
- Pricing cards assemble from components
- Credits flow into usage demonstrations
- Competitor prices explode/dissolve showing savings
- User's potential savings accumulate visually

Interactive Elements:
- Real-time credit calculator
- Usage slider affecting 3D visualizations
- Model selection changing cost particles
- "See Savings" button with explosion effect

Section 6: Mobile Excellence - "Create Anywhere"

Three.js Scene:
- 3D devices (iPhone, iPad) showing responsive design
- Touch interactions visualized as ripples
- One-handed operation demonstrations

Video Integration:
- Your 9:16 mobile content playing on device screens
- Touch interaction examples
- Mobile workflow demonstrations

Mobile Optimization:
- Simplified 3D scenes for mobile performance
- Touch-triggered animations instead of hover
- Progressive enhancement approach

📱 MOBILE OPTIMIZATION STRATEGY

Progressive Enhancement:

// Detect device capabilities
const isMobile = window.innerWidth < 768;
const isLowPower = navigator.hardwareConcurrency < 4;

if (isMobile || isLowPower) {
  // Simplified 3D scenes
  // More video content, less 3D processing
  // Touch-optimized interactions
} else {
  // Full Three.js experience
  // Complex particle systems
  // Advanced lighting effects
}

Performance Considerations:

  • Lazy loading: Load 3D scenes as user scrolls
  • LOD (Level of Detail): Reduce 3D complexity on mobile
  • Intersection Observer: Only animate visible sections
  • Video optimization: Adaptive bitrate for mobile

🎯 IMPLEMENTATION PHASES

Phase 1: Core Structure (1-2 weeks)

✅ Set up Next.js + React Three Fiber
✅ Basic scroll triggers with GSAP
✅ Hero section with particle animation
✅ Mobile-responsive foundation

Phase 2: Interactive Demos (2-3 weeks)

✅ Story generation 3D demonstration
✅ Character consistency showcase
✅ Video content integration
✅ Mobile device mockups

Phase 3: Advanced Features (2-3 weeks)

✅ Interactive pricing calculator
✅ Model comparison visualizations
✅ Advanced particle effects
✅ Performance optimization

Phase 4: Polish & Deploy (1 week)

✅ Cross-browser testing
✅ Performance optimization
✅ SEO implementation
✅ Analytics integration

💡 CREATIVE CONCEPTS

Unique Animation Ideas:

1. "Story DNA" Visualization:

  • Text input creates DNA-like helixes
  • Helixes transform into character/location/prop elements
  • Shows how stories break down into reusable components

2. "Model Intelligence" Particles:

  • Different colored particles for each AI model
  • FREE models glow with special effects
  • Particles flow showing cost-effectiveness

3. "Creative Pipeline" Conveyor:

  • 3D conveyor belt showing workflow
  • Story → Characters → Shots → Videos
  • Interactive stops where users can explore

4. "Character Consistency" Morphing:

  • 3D character models that transform
  • @character_name tags maintaining identity
  • Shows consistency across different scenes

🎬 VIDEO + THREE.JS INTEGRATION

Hybrid Approach Benefits:

Three.js Provides:

  • Immersive backgrounds for your video content
  • Interactive elements that respond to scroll
  • Smooth transitions between sections
  • Performance optimization (only animate visible areas)

Your Videos Provide:

  • Real product demonstrations (actual functionality)
  • Authentic examples (real generations, not mockups)
  • Mobile showcases (9:16 format perfect for device mockups)
  • Proof of concept (show it actually working)

Integration Examples:

// Video playing within 3D scene
<Canvas>
  <VideoTexture src="/demo-16-9.mp4" />
  <Plane geometry={[16, 9]} material={videoMaterial} />
  <ScrollTrigger>
    {/* Play video when section is visible */}
  </ScrollTrigger>
</Canvas>

// Device mockup with your 9:16 content
<iPhone3D>
  <VideoScreen src="/mobile-demo-9-16.mp4" />
  <TouchRippleEffect />
</iPhone3D>

💰 PRICING PAGE STRATEGY

Interactive Credit Calculator:

// Real-time cost calculation based on usage
const calculateMonthlyCost = (usage) => {
  const textGenerations = usage.stories * 10; // FREE models
  const imageGenerations = usage.images * 50; // 50 credits each
  const videoGenerations = usage.videos * 200; // 200 credits each
  
  return {
    credits: textGenerations + imageGenerations + videoGenerations,
    cost: (imageGenerations + videoGenerations) * 0.01 // Our cost
  };
};

// 3D visualization of credit usage
<CreditMeter value={usage.credits} max={tierLimit} />
<SavingsParticles amount={competitorPrice - ourPrice} />

Competitive Advantage Visualization:

Show competitor pricing exploding away while ours stays affordable:
- Midjourney $60 → ⚡💥 (particles disperse)
- RunwayML $95 → ⚡💥 (particles disperse)  
- LTX Studio $125 → ⚡💥 (particles disperse)
- Director's Palette $25 → ✨ (golden glow)

🎯 FINAL RECOMMENDATIONS

Landing Page Priority:

  1. Create Three.js landing page with scroll animations
  2. Integrate your 16:9 and 9:16 demos within 3D environments
  3. Interactive pricing calculator showing real-time costs
  4. Mobile-optimized experience with progressive enhancement

Pricing Strategy:

  1. Increase to $25/month (from $20) for Creator Pro
  2. Implement video rate limiting (5 videos/month at $25 tier)
  3. Focus marketing on FREE models (unique advantage)
  4. Credit system with clear value (1,000 credits = tangible value)

Key Selling Points:

  • 6 FREE Models (no competitor has this)
  • Complete creative workflow (story to screen)
  • Character consistency (@character_name system)
  • Multiple formats (story, music video, commercial, children's books)
  • Affordable pricing (vs $60-125 competitors)

The combination of Three.js animations showcasing your actual video content will create an irresistible landing page that demonstrates real value while justifying the $25/month price point!