Welcome to JC-Preditor

JC-Preditor (V1.0) is a professional, high-performance web-based video compositor. Designed to bypass the bloat of traditional desktop software, it leverages the modern WebCodecs API to deliver lag-free, frame-perfect offline rendering directly in your browser.

Project Management

JC-Preditor uses a custom .jcp (John Couto Project) file format. This format securely bundles your timeline data, settings, and all raw media files into a single, portable zip archive.

• New Project: Click 📄 New to clear the canvas and reset the engine. Note: Unsaved changes will be lost.
• Save Project: Click 💾 Save Project to compile your media and timeline into a .jcp file on your hard drive.
• Open Project: Click 📂 Open Project and select a .jcp file to restore your entire workspace instantly.

The Workspace

The interface is divided into three main zones to maximize your creative flow.

1. The Canvas (Center)

This is your true-HD live preview window. JC-Preditor features an anti-squash engine that allows you to instantly switch aspect ratios without clipping your background elements.

• 16:9 - Standard Widescreen (YouTube, Desktop)
• 9:16 - Vertical (TikTok, Shorts, Reels)
• 4:5 - Portrait (Instagram Feed)
• 1:1 - Square (Facebook, LinkedIn)

Changing the Canvas Size Dynamically

One of the most powerful features of JC-Preditor is the ability to change your project's aspect ratio at any time—even after you have fully populated your timeline with media, text, and shapes.

1. Locate the Canvas Size Panel: Navigate to the top left of your workspace under the Canvas Size section.
2. Select a New Format: Click on your desired aspect ratio (for example, switching from a 16:9 Widescreen layout to a 9:16 Vertical layout).
3. Automatic Recalculation: The built-in Anti-Squash Engine will instantly trigger. It mathematically recalculates the X/Y coordinates and scaling percentages for every individual clip currently on your timeline.

2. The Inspector (Right)

Selecting any clip on the canvas or timeline populates this panel with deep property controls. This is where you adjust scale, rotation, chroma-key settings, and effects based on the the type of object (video, image, shape, text, sound) selected in the timeline.

3. The Media Pool (Left)

Drag and drop local files here to instantly add them to your currently targeted timeline track. You can also generate Text and Vector Shapes from this panel.

Working with Media

JC-Preditor supports a wide range of media types. When you add media, it is placed on the currently selected track at the playhead's position.

Supported Formats

• Video: MP4, WebM, MOV
• Audio: MP3, WAV, AAC, M4A, OGG
• Images: PNG (with transparency), JPEG, WebP

Generated Elements

Use the Elements panel to create text and shapes dynamically without needing external image files.

• Text: Multi-line text with custom fonts, alignment, background boxes, and colored strokes.
• Shapes: Generate Rectangles, Circles, Triangles, and 5-Point Stars with adjustable fill and stroke opacities.

Timeline & Editing

The timeline is the heart of the engine. It handles multi-track layering, where tracks at the top of the list render visually *above* tracks at the bottom.

Track Management

• Add Track: Click ➕ Track on the player bar to create a new layer.
• Reorder Tracks: Click and drag the track header (e.g., "Track 1") up or down to change layer priority.
• Delete Track: Click the red × on a track header to remove it and all contained clips.

Clip Editing Tools

• Trimming: Hover over the left or right edge of a clip on the timeline and drag to adjust its start time or duration.
• Splitting: Position the playhead over a clip, select it, and click ✂ Split (or press S) to cut it in two.
• Duplicating: Select a clip and click 📋 Duplicate (or press D) to instantly clone it to a new track above.
• Snapshot: Click 📸 Snap to capture a high-res PNG of the currently selected track at the playhead position and add it to the timeline.

Properties & Effects

Select a clip and look to the right-hand Inspector panel to manipulate it.

Transform & Alignment

You can drag clips directly on the canvas, or use the Inspector sliders for precise percentage-based X/Y coordinates, scale width/height, rotation, and X/Y skewing. Use the alignment buttons under the canvas to instantly snap elements to edges or dead-center.

Filters & Chroma Key

Apply real-time effects to videos and images:

• Grayscale / Sepia / VHS: Instant aesthetic filters.
• Chroma Key (Green Screen): Remove a specific color background. Use the eyedropper to select the exact background color, and adjust the Tolerance slider to clean up the edges.

Automated Animations

Add dynamic motion without manual keyframing using the Animation dropdown. Options include Ken Burns effects (Pan Left/Right, Zoom In/Out) and dynamic loops (Pulse, Bounce, Shake, Spin).

Publishing (Exporting)

When your edit is complete, enter a name in the top right text box and click the primary Publish button.

Note: Because this is an offline render, the preview canvas will freeze and render at maximum speed. A progress percentage will display on the Publish button until the final file downloads to your machine.

Keyboard Shortcuts

Master these to drastically speed up your workflow.

Keyframes

How to use keyframes

Use keyframing if you want to add dynamic motion to shapes, text, videos, or images.

Project Templates

If you are facing "blank canvas syndrome" or need to quickly generate a complex motion graphics sequence, JC-Preditor includes a built-in library of downloadable project templates. These pre-built .jcp files come fully set up with tracks, transitions, and placeholder media ready for you to customize.

How to Load a Template

1. Open the Browser: Click the 🎨 Templates button located in the top navigation header to open the template library modal.
2. Select a Design: Browse the available templates (such as the 3x3 FilmStrip Showcase or the Social Review Reel). Each card displays a thumbnail and a brief description of the layout.
3. Load the Project: Click on the template card of your choice to import it into your workspace.

Customizing Your Template

Once the template loads into your timeline, it will completely replace your current workspace (be sure to save your current project first if needed!). To customize the template:

• Swap Media: Select any placeholder image or video on the timeline, navigate to the Properties Inspector on the right, and use the Change Media button to swap it with your own file.
• Edit Text: Select any text clip to quickly update the copy, font, and colors while keeping the pre-programmed animations intact.