🎬 Use cinematicRenderer2D in Your Project

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();

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

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

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 */ };
}