@codivion/canvas-preview-react

# @codivion/canvas-preview-react A React component library for rendering canvas-based video project previews. This package provides a read-only canvas viewer that can display multimedia elements with animations, filters, and transformations. ## Installation ```bash npm install @codivion/canvas-preview-react ``` ## Usage ### Basic Usage ```jsx import React from 'react'; import { Canvas } from '@codivion/canvas-preview-react'; const projectData = { settings: { width: 1920, height: 1080, framerate: 30, duration: 10 }, scenes: [ { id: 'scene1', name: 'Scene 1', settings: { start: 0, duration: 10 }, elements: [ { id: 'element1', type: 'text', name: 'Title', properties: { content: 'Hello World', position: { x: 50, y: 50 }, size: { width: 20, height: 10 }, fontSize: 48, color: '#ffffff', start: 0, duration: 5 } } ] } ] }; function App() { return ( <div style={{ width: '100%', height: '600px' }}> <Canvas projectData={projectData} currentTime={2} readOnly={true} onElementSelect={(elementId) => console.log('Selected:', elementId)} /> </div> ); } ``` ## Props ### Canvas Component | Prop | Type | Default | Description | |------|------|---------|-------------| | projectData | `ProjectData` | required | The project data containing scenes, elements, and settings | | currentTime | `number` | `0` | Current playback time in seconds | | readOnly | `boolean` | `true` | Whether the canvas is in read-only mode | | onElementSelect | `(elementId: string \| null) => void` | - | Callback when an element is selected | | className | `string` | `''` | Additional CSS classes for the canvas container | ## Project Data Structure ```typescript interface ProjectData { settings?: { width?: number; // Canvas width (default: 1920) height?: number; // Canvas height (default: 1080) framerate?: number; // Frames per second duration?: number; // Total duration in seconds }; scenes?: Scene[]; globalElements?: Element[]; } interface Scene { id: string; name: string; settings: { start: number; // Scene start time in seconds duration: number; // Scene duration in seconds }; elements: Element[]; } interface Element { id: string; type: 'image' | 'video' | 'text'; name: string; properties: { // Position & Transform position?: { x: number; y: number }; // Percentage values (0-100) size?: { width: number; height: number }; // Percentage values rotation?: number; // Degrees opacity?: number; // 0-1 // Timing start: number; // Element start time relative to scene duration: number; // Element duration // Type-specific properties content?: string; // For text elements src?: string; // For image/video elements fontSize?: number; fontFamily?: string; color?: string; // Effects blur?: number; brightness?: number; contrast?: number; // ... and more filter properties // Animations animations?: { animationsIn?: { type: string; // e.g., "basic.fadeIn", "bounce.bounceIn" start: number; // Animation start time duration: number; // Animation duration fade?: number; // Fade multiplier (0-1) distance?: number; // Distance multiplier scale?: number; // Scale multiplier rotate?: number; // Rotation multiplier transformOrigin?: string; // Transform origin }; animationsOut?: { // Same structure as animationsIn }; }; }; } ``` ## Features - **Responsive Canvas**: Automatically scales to fit container while maintaining aspect ratio - **Element Types**: Support for image, video, and text elements - **Transformations**: Position, size, rotation, opacity, and flip transforms - **Filters**: Comprehensive CSS filter support (blur, brightness, contrast, etc.) - **Timing**: Time-based visibility for scenes and elements - **Selection**: Optional element selection with visual feedback - **Animations**: Built-in animation system with IN/OUT animations - Fade, slide, zoom, bounce, rotate, and flip animations - Customizable timing, duration, and multipliers - Hardware-accelerated motion using Framer Motion ## Available Animations All animations can be used with the `animations.animationsIn.type` or `animations.animationsOut.type` properties: ### Basic - `basic.fadeIn` / `basic.fadeOut` - `basic.slideInLeft` / `basic.slideOutLeft` - `basic.slideInRight` / `basic.slideOutRight` - `basic.slideInTop` / `basic.slideOutTop` - `basic.slideInBottom` / `basic.slideOutBottom` ### Attention Seekers - `attentionSeekers.bounce` - `attentionSeekers.flash` - `attentionSeekers.pulse` - `attentionSeekers.rubberBand` - `attentionSeekers.shakeX` / `attentionSeekers.shakeY` - `attentionSeekers.headShake` - `attentionSeekers.swing` - `attentionSeekers.tada` - `attentionSeekers.wobble` - `attentionSeekers.jello` - `attentionSeekers.heartBeat` ### Back Entrances - `backEntrances.backInDown` - `backEntrances.backInLeft` - `backEntrances.backInRight` - `backEntrances.backInUp` ### Back Exits - `backExits.backOutDown` - `backExits.backOutLeft` - `backExits.backOutRight` - `backExits.backOutUp` ### Bouncing Entrances - `bouncingEntrances.bounceIn` - `bouncingEntrances.bounceInDown` - `bouncingEntrances.bounceInLeft` - `bouncingEntrances.bounceInRight` - `bouncingEntrances.bounceInUp` ### Bouncing Exits - `bouncingExits.bounceOut` - `bouncingExits.bounceOutDown` - `bouncingExits.bounceOutLeft` - `bouncingExits.bounceOutRight` - `bouncingExits.bounceOutUp` ### Light Speed - `lightSpeed.lightSpeedInRight` - `lightSpeed.lightSpeedInLeft` - `lightSpeed.lightSpeedOutRight` - `lightSpeed.lightSpeedOutLeft` ### Zoom - `zoom.zoomIn` / `zoom.zoomOut` ### Rotate - `rotate.rotateIn` / `rotate.rotateOut` ### Flip - `flip.flipX` / `flip.flipY` ### Special Effects - `specials.hinge` - `specials.jackInTheBox` - `specials.rollIn` / `specials.rollOut` ## Development ```bash # Install dependencies npm install # Build the package npm run build # Run in development mode npm run dev ``` ## License MIT