Make your first video

Choose a creation path

1. Introduction

Fiivo is a fully local, in-browser video editor built on WebCodecs, Canvas 2D and the Web Audio API. No uploads, no servers, no watermarks. Fiivo is currently in alpha — APIs and UI may change. Browser autosave, recovery snapshots, and downloaded project files are separate safeguards, and storage failures are surfaced in the editor.

• Video, image, audio, text and procedural code layers on an unlimited-layer timeline.
• Keyframes, easing curves, intro/outro animations and fully scriptable custom effects.
• Hardware-accelerated MP4 export with offline audio mixing.

2. Quick Start

On an empty editor, choose Use an example to load the complete 18-second Product Announcement Starter. Its right-side Starter Controls replace the headline, screen recording, logo, primary/accent colors and closing text without opening JavaScript.

• Choose a start: use the example, import media, or open an existing .fivo project.
• Add media: drag MP4/MP3/images directly onto the Asset panel, or click Upload.
• Add to timeline: click the + button on any asset.
• Preview: press Space to play/pause. Drag the ruler to scrub.
• Edit: select a clip to open its properties. Drag directly on the canvas to move; drag corners to scale.
• Export: click Export Video — an MP4 is rendered locally via WebCodecs.

Current limits: the tested export profile is 1920x1080 or 1080x1920 at 15/24/30 fps. Exports over two minutes and 60 fps exports are allowed after stability warnings because they have received less testing. Export requires WebCodecs support and relinked media. Preview performance depends on the device, codec, layer count, and custom code. Mobile editing remains alpha.

3. Editor Overview

Mobile editing is in alpha. Compact mode keeps the preview visible above the active panel and provides persistent Play, Undo, Split, Duplicate, Delete and Download .fivo actions. Project saving remains available even when the device cannot export video.

Pip appears only in helpful empty states, the first-project guide, and a brief successful-export notice. Turn off Show Pip guidance in Preferences to hide character guidance. Fiivo also disables Pip's floating animation when your device requests reduced motion.

4. Timeline & Clips

5. Keyframes

With a clip selected, open the Keyframes section in the Properties panel. Each keyframe stores a time offset (seconds from clip start) plus X, Y, scale and opacity. Fiivo interpolates between keyframes using the easing curve you pick per keyframe. Click Target to Editto drag that keyframe's state directly on the canvas.

For screen recordings and images, Animated focus region creates a four-keyframe zoom-in, hold, and zoom-out at the playhead. Enter the project X/Y point to emphasize, zoom amount, transition time, and hold duration. The generated keyframes remain fully editable.

6. Intro / Outro Animations

Presets applied automatically at clip boundaries, with adjustable duration (0.1–3s):

• Intro: Smooth Fade, Slide Up, Pop/Scale — each with its own easing curve.
• Outro: Fade Out, Slide Down, Shrink & Pop.

7. Custom Code Graphics

A code layer is a live Canvas 2D script driven by the playhead. Create one via Asset Bin → Code. The Code Graphic Studio combines a highlighted editor, live preview, attached project media, reusable parameters and local drafts. Attached media remain iterable through media and are also available through their stable alias, such as media.logo.

Your code runs as:

function (ctx, time, progress, media, params, width, height) { ... }

Each item in media:

Example — orbiting an attached logo with a parameterized title:

if (media.logo?.ready) {
  media.logo.draw({
    x: Math.sin(time * 1.5) * 180,
    y: Math.cos(time * 1.5) * 90,
    scale: 0.45 + Math.sin(time * 2) * 0.05,
    rotation: Math.sin(time) * 8,
    opacity: 0.9
  });
}

ctx.fillStyle = '#38bdf8';
ctx.font = 'bold 42px Arial';
ctx.textAlign = 'center';
ctx.shadowColor = '#38bdf8';
ctx.shadowBlur = 20 * Math.abs(Math.sin(time * 2));
ctx.fillText(params.title || 'Built with Fiivo', 0, -160);

Because the layer position/scale/opacity are applied before your code runs, keyframes, intro/outro animations and custom effects all work on code layers too.

8. Custom Effects & Transitions

Custom effects are per-clip snippets that run inside a time window (relative to clip start). They receive progress (0→1 within the window) and a mutable state object — mutate it to transform the clip.

function (progress, state) { ... }

Built-in templates (Properties → Custom Effects → Add Template):

// Bounce
state.y += Math.abs(Math.sin(progress * Math.PI * 4)) * -100;

// 3D Barrel Roll
state.rotateY += progress * 360;

// Heartbeat Pulse
state.scale += Math.sin(progress * Math.PI * 4) * 0.2;

// Glitch Shake
state.x += (Math.random() - 0.5) * 20;

Effects and transitions are separate preset types. Effects modify one clip's state. A transition belongs to the incoming clip at an adjacent edit point and receives safe outgoing/incoming drawing handles.

A.draw({ x: -progress * width * 0.25, opacity: 1 - progress });
B.draw({ x: (1 - progress) * width * 0.25, opacity: progress });

Open the Transition Studio from the Effects & Graphics store. Select either clip beside an edit point, adjust duration and easing, then apply the transition. Personal presets remain in this browser.

9. Studios & Preset Library

The Effects & Graphics window separates immutable Fiivo presets from your personal library. Store cards include animated previews, preset type, code and asset indicators, aspect compatibility and the available add, preview, duplicate, edit and delete actions.

A transition requires two linked visual clips on the same timeline layer. The outgoing clip must end exactly where the incoming clip begins. Images, videos and procedural code graphics can all be used as A/B inputs.

All user code runs in disposable, time-limited Web Workers. Network, browser storage and DOM capabilities are unavailable. Graphic code receives a restricted Canvas 2D environment; transition code can only submit validated operations through A.draw() and B.draw().

10. Crop & Color Filters

Use the Full, Proxy and Draft controls above the preview canvas to trade interactive resolution for smoother playback. This never changes project or export resolution.

Select an image or video clip and open Color Workspace for exposure, temperature, tint, hue, contrast, saturation and brightness. The live RGB histogram measures the graded frame; hold Original or the B key for source comparison. Built-in looks are editable starting points, and Apply creates one undoable edit.

• Crop: images & videos — Properties → Open Crop Editor. Drag the sky-blue handles; cropping is baked into transforms and export.
• Filters: brightness, contrast, saturation (0–200%) and hue-rotate (0–360°), applied live and in export.
• Presentation frames: wrap an image or video in a browser-window or mobile-device frame, with a configurable frame color. Frames render in both preview and export.

11. Audio Editing

12. Captions & Subtitles

• Use Captions in the timeline toolbar to import SRT or WebVTT files.
• Each cue becomes an editable timed caption block. Edit its text, timing, font, color, placement, background, width and outline in Properties.
• Caption rendering is shared by preview and export, so subtitles are burned into the exported video exactly as shown.
• In .fivo projects, captions use type: "caption", with text in properties.text and visual options in properties.captionStyle.

13. Exporting Video

Tested export profile: 1920x1080 or 1080x1920 at 15/24/30 fps, with the strongest coverage on projects up to 2 minutes. Longer projects and experimental 60 fps exports are allowed after warnings. Width and height must be even. Fiivo checks codec support, linked media, encoded frame count, timestamps and final MP4 size before reporting success.

• Engine: WebCodecs VideoEncoder (H.264, 8 Mbps) + Opus audio via mp4-muxer.
• Every frame is decoded offline via MP4Box + VideoDecoder — export is frame-accurate, not a screen recording.
• Supports the File System Access save dialog where available; otherwise downloads automatically.
• Best experience: Chrome / Edge. Source videos should be MP4 (H.264).

14. Saving & .fivo Files

• Browser autosave: the current editing state is kept automatically in this browser so the editor can resume after closing the tab. It is not a portable file or a backup of your footage.
• Recovery snapshots: after changes settle for six seconds, Fiivo records a separate browser-local recovery point. History is grouped by stable project ID and retains up to 20 snapshots per project.
• Download .fivo: creates a portable JSON description containing edits, graphics code and asset names. A .fivo file does not contain original video, image or audio bytes.
• Open .fivo: validates the project and preserves a recovery snapshot before replacing the timeline. Missing media appears immediately in Assets; use Batch relink to select the original files together.
• Storage errors: if browser autosave or recovery history cannot be written, Fiivo displays a warning. Download a .fivo copy before closing or replacing the project.

15. AI Project Templates

Because .fivo files are plain JSON, you can describe a whole video to any AI assistant and have it generate a complete Fiivo project for you. Just copy the system prompt below into your favorite LLM, describe your video idea, and import the resulting .fivoJSON file into Fiivo. The built-in assistant in section 17 uses this same contract internally — including music & sound-effect sourcing, script/subtitle attachments, and 3D (Three.js) tracks.

{
  "version": "1.0",
  "name": "AI Product Intro",
  "settings": {
    "width": 1920,
    "height": 1080,
    "backgroundColor": "#09090b",
    "previewQuality": 0.5, "fps": 30
  },
  "duration": 10,
  "assets": [
    { "id": "asset_shot_a", "name": "shot-a.mp4", "type": "video", "url": "" },
    { "id": "asset_shot_b", "name": "shot-b.mp4", "type": "video", "url": "" },
    {
      "id": "asset_grid",
      "name": "Animated Grid",
      "type": "code",
      "url": "",
      "duration": 10,
      "graphicsCode": "ctx.fillStyle = '#081018'; ctx.fillRect(-width/2,-height/2,width,height); ctx.strokeStyle = 'rgba(56,189,248,.2)'; for(let x=-width/2;x<width/2;x+=80){ctx.beginPath();ctx.moveTo(x,-height/2);ctx.lineTo(x,height/2);ctx.stroke();}",
      "mediaLayers": [],
      "parameters": []
    }
  ],
  "tracks": [
    {
      "id": "track_grid",
      "name": "Animated Grid",
      "type": "code",
      "startFrame": 0,
      "endFrame": 10,
      "layer": 0,
      "properties": {
        "position": { "x": 960, "y": 540 },
        "scale": 1, "opacity": 1,
        "assetId": "asset_grid",
        "graphicsCode": "ctx.fillStyle = '#081018'; ctx.fillRect(-width/2,-height/2,width,height); ctx.strokeStyle = 'rgba(56,189,248,.2)'; for(let x=-width/2;x<width/2;x+=80){ctx.beginPath();ctx.moveTo(x,-height/2);ctx.lineTo(x,height/2);ctx.stroke();}",
        "mediaLayers": [],
        "codeParameters": {}
      }
    },
    {
      "id": "track_shot_a",
      "name": "Opening Shot",
      "type": "video",
      "startFrame": 0,
      "endFrame": 5,
      "layer": 1,
      "properties": {
        "position": { "x": 960, "y": 540 },
        "scale": 1, "opacity": 1,
        "assetId": "asset_shot_a", "src": "", "trimStart": 0,
        "volume": 1, "muted": false,
        "z": 0, "rotateX": 0, "rotateY": 0, "rotation": 0,
        "filters": { "brightness": 100, "contrast": 100, "saturation": 100, "hue": 0 },
        "crop": { "top": 0, "bottom": 0, "left": 0, "right": 0 },
        "customEffects": [
          { "id": "effect_drift", "startTime": 0, "endTime": 5, "code": "state.x += Math.sin(progress * Math.PI * 4) * 8;" }
        ]
      }
    },
    {
      "id": "track_shot_b",
      "name": "Feature Shot",
      "type": "video",
      "startFrame": 5,
      "endFrame": 10,
      "layer": 1,
      "properties": {
        "position": { "x": 960, "y": 540 },
        "scale": 1, "opacity": 1,
        "assetId": "asset_shot_b", "src": "", "trimStart": 0,
        "volume": 1, "muted": false,
        "filters": { "brightness": 100, "contrast": 100, "saturation": 100, "hue": 0 },
        "crop": { "top": 0, "bottom": 0, "left": 0, "right": 0 },
        "transition": {
          "id": "transition_cross_slide",
          "name": "Cross Slide",
          "duration": 0.65,
          "easing": "easeInOutCubic",
          "code": "A.draw({ x: -progress * width * 0.35, opacity: 1 - progress }); B.draw({ x: (1 - progress) * width * 0.35, opacity: progress });"
        }
      }
    },
    {
      "id": "track_title",
      "name": "Product Title",
      "type": "text",
      "startFrame": 0.4,
      "endFrame": 4.5,
      "layer": 2,
      "properties": {
        "position": { "x": 960, "y": 180 },
        "scale": 1, "opacity": 1,
        "text": "Build faster",
        "fontFamily": "system-ui",
        "fontSize": 60,
        "textAlign": "center",
        "lineHeight": 1.2,
        "color": "#ffffff",
        "animation": { "type": "slideUp", "duration": 0.7, "easing": "easeOutExpo" },
        "outroAnimation": { "type": "fade", "duration": 0.5 }
      }
    }
  ]
}

{
  "version": "1.0", "name": "SaaS Demo", "duration": 10,
  "settings": { "width": 1920, "height": 1080, "backgroundColor": "#020617", "previewQuality": 0.5, "fps": 30 },
  "assets": [ { "id": "img1", "name": "ui.png", "type": "image", "url": "" } ],
  "tracks": [
    {
      "id": "t1", "name": "UI Reveal", "type": "image", "startFrame": 0, "endFrame": 10, "layer": 1,
      "properties": {
        "position": { "x": 960, "y": 540 }, "scale": 1, "opacity": 1, "assetId": "img1",
        "animation": { "type": "scaleIn", "duration": 1.2, "easing": "easeOutExpo" },
        "outroAnimation": { "type": "fade", "duration": 0.8 },
        "customEffects": [
          { "id": "fx1", "startTime": 0, "endTime": 10, "code": "state.y += Math.sin(progress * Math.PI * 4) * 20;" }
        ]
      }
    }
  ]
}

Workflow:Give this prompt to an AI, ask it to "Create a 15-second cyberpunk intro trailer", save its JSON output as my_trailer.fivo, and click Open in the Fiivo editor. Relink your local video/image assets, and the entire timeline, keyframes, and code layers will be ready to render!

16. AI Code Generation Prompts

Because Fiivo's graphicsCode and customEffects are sandboxed JavaScript, you can use AI to write complex SaaS trailers, particle systems, and glitch transitions. Copy these system prompts into your favorite LLM.

System Role: You are a Creative Coder specializing in HTML5 Canvas 2D API and motion graphics.
Task: Write a JavaScript function body for a video editor's procedural layer.
Variables available: 
- ctx (CanvasRenderingContext2D, origin 0,0 is center of layer)
- time (seconds since layer start)
- progress (0.0 to 1.0)
- media (attached images/videos with a .draw({x, y, scale, opacity, rotation}) method)
- params (read-only user-defined values)
- width and height (canvas dimensions)

Rules:
1. Use standard Canvas API (ctx.fillStyle, ctx.beginPath, ctx.arc, etc.).
2. If using media, check .ready and call its validated draw method.
3. Do not access DOM, network, storage, timers, modules, window, document or globalThis.
4. Keep loops bounded and do not wrap the result in a function declaration.

System Role: You are a Math & Animation Expert.
Task: Write a JavaScript snippet that mutates a video clip's transform state.
Variables available:
- progress (0.0 to 1.0 across the effect window)
- state (Mutable object: { x, y, scale, opacity, rotateX, rotateY, rotation, z })

Rules:
1. Mutate the state object directly (e.g., state.rotateY += progress * 360;).
2. Prefer deterministic Math.sin and Math.cos motion; avoid Math.random because it flickers between frames.
3. Keep it under 8 lines of code for performance.

System Role: You design concise two-clip video transitions.
Task: Write a raw Fiivo transition code body.
Variables: A, B, progress (0..1), width, height.

Rules:
1. Call A.draw(options) and B.draw(options) exactly once each.
2. Options may contain only x, y, scale, opacity and rotation.
3. Both clips should fully cover the frame at the midpoint unless a deliberate dip is requested.
4. Do not use DOM, Canvas APIs, network, storage, timers or unbounded loops.
5. Return code only, without a function wrapper or Markdown fence.

System Role: You are a Three.js motion-graphics expert writing code for a sandboxed video-editor layer.
Task: Write a raw JavaScript statement body that builds and animates a 3D scene.
Variables available:
- THREE (the full three.js namespace: geometries, materials, lights, Vector3, Color, Group...)
- scene (persistent THREE.Scene shared across frames; guard one-time setup with if (!scene.userData.ready) { ...build lights/meshes...; scene.userData.ready = true; } and stash handles on scene.userData)
- camera (PerspectiveCamera managed by the host — move it freely, never replace it)
- time (seconds since clip start), progress (0..1), width, height, params
- loadTexture(alias) / loadModel(alias): async loaders for attached image (.png/.jpg) and .glb/.gltf assets only
- media: object keyed by attached asset alias with .load()

Rules:
1. Add AmbientLight + DirectionalLight when using MeshStandardMaterial.
2. Never import modules, create your own WebGLRenderer or canvas, touch DOM/network/URLs, or use timers.
3. Prefer deterministic motion driven by time/progress; avoid Math.random per frame.
4. Keep the scene graph small; dispose nothing — the host resets between projects.
5. Return statements only, no function wrapper, no Markdown fence.

17. The Built-in AI Assistant

The Generate with AI panel (sparkle button in the editor toolbar, or the right-hand drawer) is a chat assistant wired directly into the timeline. Unlike the copy-paste templates above, it applies its work itself — every generation arrives as real, editable tracks you can tweak by hand afterwards. Bring your own key (Google, Groq, xAI, Agnes, or any OpenAI-compatible endpoint) in Settings.

• Generate and revise: describe the video ("a 20-second vertical launch teaser with a dark grid background") and the assistant writes settings, graphics code, keyframes, transitions and text onto the timeline. Follow-up messages edit the same project conversationally.
• Royalty-free music sourcing (🎵 toggle): the assistant can suggest licensed-for-use background tracks matched to the mood of each scene. Suggestions appear in a review card — nothing is imported until you approve each pick.
• Sound-effects sourcing (🎧 toggle): whooshes on transitions, clicks on UI beats, risers, impacts, ambience under scenes. Approved effects land at the exact frames the assistant requested, with fade envelopes already applied. You can add your own searches to the same card.
• Image requests: when real photography genuinely helps, the assistant proposes stock-image searches instead of URLs; you approve before anything is fetched.
• Attach a script (📎 → Script / document): drop in a .txt or .md file. The assistant treats it as authoritative source material — following your scene order, narration lines, and terminology when building titles and pacing.
• Attach subtitles (📎 → Subtitles): drop in a .srt or .vtt file and bind it to one of your linked clips. The assistant reads cue timestamps to understand what happens when, so it cuts at sentence boundaries, times captions to speech, and places effects at described moments.
• Per-layer AI tweaks: select any clip and ask the assistant to rewrite just that graphic, effect, transition, or 3D scene — generated against the matching sandbox contract.

Privacy: attachments are parsed locally and sent as plain text inside your prompt; media bytes are never uploaded. Music, SFX and image imports always require your explicit approval.

18. 3D Graphics (Three.js)

Beyond Canvas 2D, Fiivo ships a second rendering engine: a sandboxed WebGL / Three.js runtime. A 3D graphic behaves like any other code layer — it sits on the timeline, takes parameters, renders in preview and export through the same offline path.

• Create one: click New 3D graphic in the Assets bin (or ask the built-in assistant for a "3D scene", "rotating cube", or "WebGL background" — it marks the track with "engine": "3d" automatically).
• Two authoring modes: the studio has a Nodes view — a visual scene graph where you place models, primitives (box, sphere, torus, torusKnot…), materials, lights, and cameras as connected nodes — and a Code view with the raw Three.js. The graph compiles to code, and you can open any generated scene in the Code Studio to hand-edit it; the graph stays saved on the asset for round-tripping.
• Keyframe channels: node transforms (position / rotation / scale) accept Fiivo-style keyframe windows with the same easings as the timeline, so camera moves and object choreography follow clip timing.
• Assets: attach .glb/.gltf models and image textures inside the studio. In code they arrive via loadModel(alias) and loadTexture(alias) — external URLs are not allowed.
• Sandbox variables: THREE, persistent scene (guard setup with scene.userData.ready), host-managed camera, time, progress, params, width, height, media.
• Limitations: no module imports, no custom renderers, no DOM or network access; heavy scenes cost preview FPS (lower preview quality in Settings); the Three.js chunk loads lazily only when a 3D layer actually renders.

Need a starting point? Use Prompt 4 above with any coding assistant, paste the result into the Code view, and press Apply.