Editor Basics

Editor Overview

The KinoViz editor is a browser-based animation studio with a two-mode workflow: Design Mode for layout and styling, and Animation Mode for keyframing and motion. Toggle between them using the Design / Animate switch in the top bar.

Element Types

KinoViz has 8 primary creatable element types, plus organizational types (Group, Component) and an effects layer (GLSL Effect).

Shape

Rectangles, circles, polygons, stars, lines, and more. Supports fill, stroke, gradient, corner radius.

Animatable properties: position, scale, rotation, opacity, fill color, stroke color, border radius

Text

Editable text with font, size, weight, color, alignment, line height, letter spacing. Supports text-on-path.

Animatable properties: position, scale, rotation, opacity, color

Image

PNG, JPG, SVG, WebP. Supports image filters (brightness, contrast, saturation, hue, blur, grayscale, noise, and more).

Animatable properties: position, scale, rotation, opacity, all filter values

Video

MP4, WebM, WebP, GIF. Inline playback with once/loop/ping-pong modes. File size follows your plan's per-import limit (Free 10 MB / Pro 100 MB / Studio 1 GB). Playback controls are shown in Animation Mode and hidden in Design Mode.

Animatable properties: position, scale, rotation, opacity, playback state (play/pause/stop)

Path

Freeform vector paths drawn with the Pen tool. Also the output type for Boolean operations.

Animatable properties: position, scale, rotation, opacity, stroke color

Bubble

Pre-styled speech and thought bubbles with configurable tail direction, background color, and text.

Animatable properties: position, scale, rotation, opacity

3D Model

Import GLB/GLTF files (with Draco support). Full 3D scene with lighting, camera orbit, and material controls. Basic 3D editing is available on all plans; SVG→3D extrude, advanced materials and environments require Pro+.

Animatable properties: camera orbit (horizontal/vertical), zoom, focal length, GLTF clip animations

Text FX

Text elements with built-in animation presets (40+ presets across 5 categories). Apply a multi-keyframe animation in a single click. See Physics & Effects for the full preset list.

Organizational types

• Group — Container for multiple elements (plain, mask, or effector). Created via Ctrl/Cmd+G.
• Component — Reusable symbol with master/instance model. Edits to the master propagate to all instances.
• GLSL Effect — Shader-based effects layer (advanced presets require Pro+).

Timeline

The timeline is visible in Animation Mode (bottom of the editor).

• Playhead — Drag to scrub through time
• Keyframes — Diamond markers that define property values at specific times
• Clip bars — Each element's visible range; drag edges to set in/out points
• Duration — Default 10 seconds, user-configurable per project

Working with Keyframes

1. Select an element on the canvas.
2. Move the playhead to the desired time.
3. Change a property in the Properties Panel.
4. A keyframe is automatically created.
5. KinoViz interpolates smoothly between keyframes.

Press K to manually add a keyframe at the current playhead position.

Easing

Each keyframe transition supports an easing curve. KinoViz provides 40+ preset curves — linear, ease in/out variations, bounce, elastic, back, step, and more. A visual SVG preview is shown for each preset in the right-click easing menu. You can also enter a custom cubic Bezier for precise control.

Canvas Controls

• Zoom: Scroll wheel, or pinch gesture on a trackpad
• Pan: Hold Space + drag, or middle mouse button
• Select: Click an element; drag to box-select multiple
• Move: Drag selected elements
• Fit to screen: Ctrl/Cmd+0
• Actual size: Ctrl/Cmd+1

Keyboard Shortcuts