Quick Start

Project type assessment:

• Product showcase + CMS: Webflow + Spline
• Interactive brand experience: Dora
• Component-rich app: Framer
• Custom/complex interactions: Three.js

Input: Client needs product gallery with 3D models, blog, and CMS
Output: Webflow + Spline (CMS strength, easy client updates)

Workflow

Progress:

• Define interaction complexity (simple rotation vs. physics)
• Assess content management needs
• Check device/performance requirements
• Evaluate client technical comfort level

Dora: Full 3D sites with physics

• Setup: Import models → Add physics behaviors → Connect interactions
• Best for: Immersive brand experiences, portfolios, event sites
• Handoff: Share edit link, provide interaction guide
• Performance: 60fps desktop, 30fps mobile, 5-15MB initial load

Framer: React-based component integration

• Setup: Design in Framer → Add 3D components → Connect to data
• Best for: SaaS products, apps with 3D elements, design systems
• Handoff: Export React code or share Framer project
• Performance: 60fps desktop/mobile, 2-8MB load, excellent optimization

Webflow + Spline: CMS-driven marketing sites

• Setup: Create Spline scene → Export as embed → Insert in Webflow → Connect CMS
• Best for: Product sites, marketing pages, content-heavy sites
• Handoff: Transfer Webflow account, provide Spline source files
• Performance: 30-60fps depending on complexity, 3-12MB load

Three.js: Custom coded solutions

• Setup: Initialize Three.js → Create scene → Add models → Build interactions
• Best for: Unique interactions, high performance needs, complex data viz
• Handoff: Deploy + documentation, requires developer maintenance
• Performance: 60fps+ possible, optimized loading, full control

For each platform:

1. Create proof of concept with placeholder content
2. Test performance on target devices
3. Build full experience
4. Optimize and test loading times
5. Document handoff requirements

Examples

Example 1: Fashion Brand Product Launch Input: Need immersive product showcase, no CMS, desktop-focused Output: Dora - Full 3D environment, physics-based interactions, dramatic lighting

Example 2: SaaS Dashboard with 3D Charts Input: Data visualization components within existing app Output: Framer - Component-based approach, easy React integration

Example 3: Architecture Firm Portfolio Input: Project gallery, blog, client updates, mobile-friendly Output: Webflow + Spline - CMS flexibility, embedded 3D models per project

Example 4: Interactive Data Installation Input: Real-time data, complex particle systems, exhibition display Output: Three.js - Custom shaders, WebGL optimization, real-time connections

Best Practices

Dora:

• Keep physics simple for mobile compatibility
• Use LOD (level of detail) for complex models
• Preload critical interactions

Framer:

• Design mobile-first for 3D components
• Use Framer's built-in performance monitoring
• Test component isolation

Webflow + Spline:

• Optimize Spline exports (max 5MB per scene)
• Use lazy loading for below-fold 3D content
• Test CMS field integration early

Three.js:

• Implement proper asset loading strategies
• Use compression (Draco, KTX2)
• Profile performance across devices

• Test on actual devices, not just browser dev tools
• Plan for graceful degradation on low-end devices
• Document interaction patterns for client training

Common Pitfalls

Platform Mismatches:

• Using Dora for CMS-heavy sites (limited content management)
• Choosing Framer for physics-heavy experiences (performance issues)
• Webflow + Spline for real-time data (integration complexity)

Performance Issues:

• Ignoring mobile performance during desktop development
• Not testing with slow network conditions
• Overcomplicating initial load with large 3D assets

Client Handoff Problems:

• Not providing source files (especially Spline scenes)
• Insufficient documentation for content updates
• Not training clients on platform limitations

Technical Debt:

• Mixing platforms unnecessarily (adds complexity)
• Not planning for future scalability
• Choosing code solutions when no-code would suffice

1. Content strategy first: CMS needs → Webflow path
2. Interaction complexity: Physics/immersion → Dora or Three.js
3. Integration requirements: Existing React app → Framer
4. Performance criticality: High requirements → Three.js or Framer
5. Client technical level: Low → Avoid Three.js
6. Budget/timeline: Tight → No-code solutions first