🎬 Use cinematicRenderer2D in Your Project

📦 Installation

Install cinematicRenderer2D using your preferred package manager:

🚀 Quick Start

Vanilla JavaScript / TypeScript

import { CinematicRenderer2D } from 'cinematic-renderer2d';

const renderer = new CinematicRenderer2D({
  container: document.getElementById('container'),
  spec: {
    schemaVersion: '1.0.0',
    engine: { targetFps: 60, quality: 'auto' },
    events: [{
      id: 'intro',
      name: 'Introduction',
      scenes: ['welcome']
    }],
    scenes: [{
      id: 'welcome',
      name: 'Welcome Scene',
      duration: 3000,
      layers: [{
        id: 'background',
        type: 'gradient',
        zIndex: 1,
        config: {
          colors: ['#667eea', '#764ba2'],
          direction: 'diagonal'
        }
      }]
    }]
  }
});

// Mount and play
await renderer.mount();
renderer.play();

React

import { CinematicPlayer } from 'cinematic-renderer2d/react';

function App() {
  return (
    <CinematicPlayer
      spec={yourSpec}
      autoplay={true}
      onPlay={() => console.log('Playing')}
      onEnd={() => console.log('Finished')}
    />
  );
}

Angular

import { CinematicPlayerComponent } from 'cinematic-renderer2d/angular';

@Component({
  selector: 'app-root',
  template: `
    <cinematic-player
      [spec]="spec"
      [autoplay]="true"
      (play)="onPlay()"
      (end)="onEnd()">
    </cinematic-player>
  `
})
export class AppComponent {
  spec = { /* your spec */ };
}

✨ Key Features

📚 Next Steps

• Check out the playground/examples/ directory for 12 complete working examples
• Read the README.md for comprehensive API documentation
• Explore docs/API.md for detailed interface documentation
• See docs/TUTORIALS.md for 10 step-by-step tutorials
• Review docs/SCENE_COOKBOOK.md for 15+ scene recipes
• See docs/REACT_INTEGRATION.md for React-specific guides
• See docs/ANGULAR_INTEGRATION.md for Angular-specific guides
• Review docs/PERFORMANCE.md for optimization tips

💡 Example Specifications

The playground includes several example specifications you can use as starting points:

• 🎬 Cinematic Masterpiece - Complete day-to-night journey showcasing all features
• ⭐ Enhanced Story - 5-act hero's journey with advanced effects
• 💡 Light Effects Demo - Comprehensive lighting system showcase
• 🔄 Transition Types - All 6 transition types demonstrated
• ✨ Animation Features - Loop, yoyo, keyframe, and stagger animations
• 🔊 Audio Showcase - Multi-track audio with crossfade effects
• 🎨 Scene Templates - Pre-built templates for quick scene creation
• Simple Demo - Basic gradient and text animations
• Story Narration - Multi-scene storytelling with transitions
• Day & Night Story - Complex environmental effects
• Night Sky Demo - Beautiful starfield and atmospheric rendering

Load these examples in the playground to see how they work, then customize them for your needs!

🆘 Need Help?

• 🐛 Report issues on GitHub
• 💬 Join discussions
• 📧 Email: support@cinematicrenderer2d.com