Design Mode

Build and style your layout in KinoViz Design Mode — add elements, edit properties, use Boolean operations, image filters, and layer/backdrop blur before animating.

Overview

Design Mode is the static editing environment in KinoViz. Use it to build layouts, style elements, and position everything on the canvas before switching to Animation Mode to add motion.

Toggle between modes using the Design / Animate switch in the top bar.

Design Mode — canvas with a title, subtitle, circle, rectangle and star. Left LAYER panel, right Camera Position & Background panels, bottom element insertion toolbar.

Canvas Workspace

The canvas is the central editing area. It represents the final output frame.

Pan — Hold Space and drag, or use middle-mouse drag.
Zoom — Scroll the mouse wheel, or use Ctrl/Cmd + + / Ctrl/Cmd + -.
Fit to screen — Press Ctrl/Cmd + 0 to fit the canvas to your window.
Actual size — Press Ctrl/Cmd + 1 to view at 100%.

The grey area surrounding the canvas is the pasteboard — elements placed here are not exported.

Element Types

KinoViz has 8 primary element types you can add from the toolbar (left side) or via the Add menu.

Element	Description
Shape	Rectangle, ellipse, polygon, star, line, and more. Fill, stroke, gradient, corner radius.
Text	Editable text with font, size, weight, color, spacing controls. Supports text-on-path.
Bubble	Pre-styled speech and thought bubbles with tail positioning.
Image	PNG, JPG, SVG, WebP. Supports image filters and layer effects.
Path	Freeform vector paths drawn with the Pen tool. Also output of Boolean operations.
3D Model	GLB/GLTF files. Full 3D scene with lighting, camera, and material controls.
Video	MP4, WebM, WebP, GIF. Once/loop/ping-pong playback modes.
Text FX	Text with a built-in animation preset (40+ presets).

In addition, Group and Component are organizational types created from selections, and GLSL Effect is a special shader effects layer.

Properties Panel

Select any element to open its properties in the right panel. Properties are organized into collapsible sections.

Common Properties (all elements)

Property	Description
X / Y	Position in canvas percentage coordinates (0–100)
Width / Height	Dimensions in pixels
Rotation	Angle in degrees (−180 to 180)
Opacity	0–100%, affects the entire element
Blend mode	Normal, Multiply, Screen, Overlay, and more
Lock	Prevent accidental edits
Visibility	Show or hide on canvas and in export

Text Properties

Font family, size, weight, style (italic, underline)
Line height, letter spacing, paragraph spacing
Alignment (left, center, right, justify)
Fill color, stroke color and width
Text path (attach text to a curve)

Shape Properties

Fill type: solid, linear gradient, radial gradient, none
Stroke color, width, dash pattern, cap, join
Corner radius (rectangle only)

Image Properties

Fit mode: fill, fit, stretch, crop
Image filters: brightness, contrast, saturation, hue, blur, grayscale, noise (see Image Filters)

Video Properties

Play mode: once, loop, ping-pong
File size: follows your plan's per-import limit (Free 10 MB / Pro 100 MB / Studio 1 GB)
Playback controls (Play, Pause, Stop) — these are hidden in Design Mode and shown in Animation Mode
Border controls (radius, color, width)

Layer Panel

The Layer Panel (left side of the editor) shows a hierarchical list of all elements on the canvas.

Layer Actions

Action	How
Select	Click a layer name
Multi-select	Ctrl/Cmd+click or Shift+click layer names
Reorder	Drag layers up or down
Rename	Double-click the layer name
Delete	Select + press Delete key
Group	Select multiple + Ctrl/Cmd+G
Ungroup	Select group + Ctrl/Cmd+Shift+G

Layers at the top of the panel appear in front on the canvas (higher z-order).

Note: Visibility (eye) and lock icons are available on individual element layers. Visibility toggle on group headers is currently not supported.

Grid, Snap, and Alignment

Grid

Toggle the grid with View → Show Grid or Ctrl/Cmd+'. Set grid size in View → Grid Settings.

Snap

Elements snap to:

Other element edges and centers
Canvas edges and center
Grid lines (when grid is visible)

Toggle snapping with View → Snap to Objects or the magnet icon in the toolbar.

Alignment Tools

Select two or more elements and use the alignment controls in the properties panel:

Align left, center, right, top, middle, bottom
Distribute horizontally or vertically with equal spacing

Boolean Operations

Boolean operations combine two or more path or shape elements into a new compound shape.

How to Use

Select two or more shapes or paths on the canvas (order matters for Subtract and Exclude).
Right-click → Boolean → choose an operation, or use the Boolean button in the toolbar.

Operations

Operation	Result
Union	Merge all shapes into one outline
Subtract	Remove the top shape's area from the bottom shape
Intersect	Keep only the overlapping area
Exclude	Keep non-overlapping areas (opposite of Intersect)

The result is a boolean group shown with a dashed border. To convert it to a single editable path, right-click → Flatten Boolean Group.

Double-click a flattened path to enter anchor editing mode and adjust individual bezier handles.

Image Filters

Select an image or video element and open the Filters section in the properties panel. All filter values are animatable in Animation Mode.

Standard Filters

Filter	Range	Effect
Brightness	−100 to +100	Lighten or darken
Contrast	−100 to +100	Increase or reduce tonal range
Saturation	−100 to +100	Boost or desaturate colors
Hue	−180 to +180	Rotate the color wheel
Blur	0 to 100	Gaussian blur
Grayscale	0 to 100	Convert to greyscale
Noise	0 to 100	Add film grain

Advanced Filters

Pixelate, vibrance, sharpen, invert.

Color Presets

One-click color grade toggles: sepia, vintage, kodachrome, polaroid, brownie.

Click Reset to restore all filter values to their defaults.

Layer Blur and Backdrop Blur

These blur effects are available for all element types and are found in the Effects section of the properties panel.

Layer Blur — Blurs the element itself (equivalent to filter: blur() in CSS).
Backdrop Blur — Blurs everything behind the element; visible only when the element has some transparency (equivalent to backdrop-filter: blur() in CSS).

Next Steps

Animation & Timeline — Add motion to your designs
3D System — Import and animate 3D models
Physics & Effects — Add physics and text effects
Export & Publishing — Export your finished work

Overview

Design Mode is the static editing environment in KinoViz. Use it to build layouts, style elements, and position everything on the canvas before switching to Animation Mode to add motion.

Toggle between modes using the Design / Animate switch in the top bar.

Design Mode — canvas with a title, subtitle, circle, rectangle and star. Left LAYER panel, right Camera Position & Background panels, bottom element insertion toolbar.

Canvas Workspace

The canvas is the central editing area. It represents the final output frame.

Pan — Hold Space and drag, or use middle-mouse drag.
Zoom — Scroll the mouse wheel, or use Ctrl/Cmd + + / Ctrl/Cmd + -.
Fit to screen — Press Ctrl/Cmd + 0 to fit the canvas to your window.
Actual size — Press Ctrl/Cmd + 1 to view at 100%.

The grey area surrounding the canvas is the pasteboard — elements placed here are not exported.

Element Types

KinoViz has 8 primary element types you can add from the toolbar (left side) or via the Add menu.

Element	Description
Shape	Rectangle, ellipse, polygon, star, line, and more. Fill, stroke, gradient, corner radius.
Text	Editable text with font, size, weight, color, spacing controls. Supports text-on-path.
Bubble	Pre-styled speech and thought bubbles with tail positioning.
Image	PNG, JPG, SVG, WebP. Supports image filters and layer effects.
Path	Freeform vector paths drawn with the Pen tool. Also output of Boolean operations.
3D Model	GLB/GLTF files. Full 3D scene with lighting, camera, and material controls.
Video	MP4, WebM, WebP, GIF. Once/loop/ping-pong playback modes.
Text FX	Text with a built-in animation preset (40+ presets).

In addition, Group and Component are organizational types created from selections, and GLSL Effect is a special shader effects layer.

Properties Panel

Select any element to open its properties in the right panel. Properties are organized into collapsible sections.

Common Properties (all elements)

Property	Description
X / Y	Position in canvas percentage coordinates (0–100)
Width / Height	Dimensions in pixels
Rotation	Angle in degrees (−180 to 180)
Opacity	0–100%, affects the entire element
Blend mode	Normal, Multiply, Screen, Overlay, and more
Lock	Prevent accidental edits
Visibility	Show or hide on canvas and in export

Text Properties

Font family, size, weight, style (italic, underline)
Line height, letter spacing, paragraph spacing
Alignment (left, center, right, justify)
Fill color, stroke color and width
Text path (attach text to a curve)

Shape Properties

Fill type: solid, linear gradient, radial gradient, none
Stroke color, width, dash pattern, cap, join
Corner radius (rectangle only)

Image Properties

Fit mode: fill, fit, stretch, crop
Image filters: brightness, contrast, saturation, hue, blur, grayscale, noise (see Image Filters)

Video Properties

Play mode: once, loop, ping-pong
File size: follows your plan's per-import limit (Free 10 MB / Pro 100 MB / Studio 1 GB)
Playback controls (Play, Pause, Stop) — these are hidden in Design Mode and shown in Animation Mode
Border controls (radius, color, width)

Layer Panel

The Layer Panel (left side of the editor) shows a hierarchical list of all elements on the canvas.

Layer Actions

Action	How
Select	Click a layer name
Multi-select	Ctrl/Cmd+click or Shift+click layer names
Reorder	Drag layers up or down
Rename	Double-click the layer name
Delete	Select + press Delete key
Group	Select multiple + Ctrl/Cmd+G
Ungroup	Select group + Ctrl/Cmd+Shift+G

Layers at the top of the panel appear in front on the canvas (higher z-order).

Note: Visibility (eye) and lock icons are available on individual element layers. Visibility toggle on group headers is currently not supported.

Grid, Snap, and Alignment

Grid

Toggle the grid with View → Show Grid or Ctrl/Cmd+'. Set grid size in View → Grid Settings.

Snap

Elements snap to:

Other element edges and centers
Canvas edges and center
Grid lines (when grid is visible)

Toggle snapping with View → Snap to Objects or the magnet icon in the toolbar.

Alignment Tools

Select two or more elements and use the alignment controls in the properties panel:

Align left, center, right, top, middle, bottom
Distribute horizontally or vertically with equal spacing

Boolean Operations

Boolean operations combine two or more path or shape elements into a new compound shape.

How to Use

Select two or more shapes or paths on the canvas (order matters for Subtract and Exclude).
Right-click → Boolean → choose an operation, or use the Boolean button in the toolbar.

Operations

Operation	Result
Union	Merge all shapes into one outline
Subtract	Remove the top shape's area from the bottom shape
Intersect	Keep only the overlapping area
Exclude	Keep non-overlapping areas (opposite of Intersect)

The result is a boolean group shown with a dashed border. To convert it to a single editable path, right-click → Flatten Boolean Group.

Double-click a flattened path to enter anchor editing mode and adjust individual bezier handles.

Image Filters

Select an image or video element and open the Filters section in the properties panel. All filter values are animatable in Animation Mode.

Standard Filters

Filter	Range	Effect
Brightness	−100 to +100	Lighten or darken
Contrast	−100 to +100	Increase or reduce tonal range
Saturation	−100 to +100	Boost or desaturate colors
Hue	−180 to +180	Rotate the color wheel
Blur	0 to 100	Gaussian blur
Grayscale	0 to 100	Convert to greyscale
Noise	0 to 100	Add film grain

Layer Blur — Blurs the element itself (equivalent to filter: blur() in CSS).
Backdrop Blur — Blurs everything behind the element; visible only when the element has some transparency (equivalent to backdrop-filter: blur() in CSS).

Next Steps

Animation & Timeline — Add motion to your designs
3D System — Import and animate 3D models
Physics & Effects — Add physics and text effects
Export & Publishing — Export your finished work

Design Mode

On this page

Design Mode

On this page