KinoViz
  • Features
  • Pricing
  • Showcase
  • Templates
  • Blog
  • Docs
Sign inOpen Studio
KinoViz

The browser-based animation studio for vector & 3D motion design.

Product

FeaturesPricingShowcasesUpdates

Resources

DocsBlogTemplatesGlossaryCompare toolsAlternatives

Tools

iPhone Duo MockupMusic FitClean UpBackground RemoverFilm EmulatorAll tools

Company

AboutContact
© 2024 KinoViz, All rights reserved
Privacy PolicyTerms of ServiceRefund Policy
Blog
Getting Started with KinoViz — Your First Animation in 5 Minutes

Getting Started with KinoViz — Your First Animation in 5 Minutes

KinoViz TeamKinoViz Team· Product & Engineering, KinoVizFeb 1, 20262 min read
Getting Started with KinoViz — Your First Animation in 5 Minutes

Table of Contents

Step 1: Create Your AccountStep 2: Create a New ProjectStep 3: Add ElementsStep 4: Animate with KeyframesStep 5: Preview and ExportWhat's Next?

Welcome to KinoViz! This guide walks you through creating your first animation from scratch — no prior experience needed.

Step 1: Create Your Account

Head to kinoviz.com/sign-up and create a free account. No credit card required. The free tier includes 3 projects, 720p export, and 5 AI generation credits.

Step 2: Create a New Project

After signing in, click New Project on your dashboard. Choose a canvas preset:

  • 1:1 — Instagram posts, profile pictures
  • 16:9 — YouTube videos, presentations
  • 9:16 — TikTok, Instagram Stories, Reels
  • Custom — Any size you need

Step 3: Add Elements

KinoViz supports 6 element types:

Element What It Does
Text Titles, subtitles, captions with rich formatting
Shape Rectangles, circles, stars with fill and stroke
Bubble Speech and thought bubbles with tails
Image Import PNG, JPG, SVG images
Path Custom vector curves with the Pen Tool
3D Model Import GLB/GLTF for 3D animation (Pro+)

Click the Add button in the toolbar and choose an element type. Each element appears on the canvas and in the timeline.

Step 4: Animate with Keyframes

Select an element, move the playhead on the timeline, and change a property (position, scale, rotation, opacity). KinoViz automatically creates a keyframe. Move the playhead again, change another property — that's your animation!

Pro tip: Use the easing dropdown to switch between linear, ease-in, ease-out, and bounce curves for more natural motion.

Step 5: Preview and Export

Hit the Play button to preview your animation in real-time. When you're happy:

  1. Click Export in the top-right
  2. Choose format: WebM (best quality), GIF (universal), or PNG (single frame)
  3. Select resolution (Free: 720p, Creator: 1080p, Pro: 4K)
  4. Click Export and download your file

What's Next?

  • Try AI Generation: Describe an animation idea and let AI build it for you
  • Import 3D Models: Drag a GLB file onto the canvas (Pro plan)
  • Add Music: Enable auto-generated soundtracks that sync with your animation
  • Explore Templates: Check the showcase gallery for inspiration

Happy animating!

From the docs

  • Getting StartedCreate your first browser-based animation in KinoViz — sign up, set up a project, learn the editor, animate, and export in a few steps.
  • Editor BasicsLearn the KinoViz editor — its Design/Animate workflow, the 11 element types, the keyframe timeline, easing curves, and essential keyboard shortcuts.
  • DashboardA guide to the KinoViz Dashboard — browsing and organizing projects, canvas presets, project actions, folders, project settings, and storage limits by plan.

About the author

KinoViz Team
KinoViz Team

Product & Engineering, KinoViz

The KinoViz team builds and maintains KinoViz, a browser-based animation studio for vector and 3D motion design. The people writing these posts are the same ones working on the editor, the animation engine, the export pipeline and the AI generation tools, so everything published here is checked against what the product actually does today. Posts are updated when the product changes rather than left to drift, and any limitation that affects a workflow is stated plainly instead of being written around.

Keep reading

Adding a Prism Lens Effect in KinoViz: A 3-Step Tutorial

Adding a Prism Lens Effect in KinoViz: A 3-Step Tutorial

Learn how to apply a subtle, stylish prism lens (chromatic aberration) effect to your motion designs in KinoViz. This tutorial covers why the effect works, ideal use cases, and a simple 3-step process for implementation.

Sep 22, 2026
3D Animation in the Browser: A Beginner's Guide

3D Animation in the Browser: A Beginner's Guide

Learn how to create 3D animations in the browser without coding. A beginner's guide to WebGL animation, GLB models, and browser-based 3D tools.

Apr 13, 2026
How to Write Better Prompts for AI Animation Generation

How to Write Better Prompts for AI Animation Generation

Learn prompt engineering techniques for AI animation generation. Write better prompts to get faster, higher-quality animated outputs from AI tools.

Apr 13, 2026