@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

npm install @codivion/canvas-preview-react

Usage

Basic Usage

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

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

# Install dependencies
npm install

# Build the package
npm run build

# Run in development mode
npm run dev

License

MIT