KiraNeiro

Help

KiraNeiro is a free web app that lets you create lightweight, animated content from music, illustrations, text, and voice — without video editing software. Just use your browser. This page covers what you can make, how to use it, how it works, and common pitfalls.

About KiraNeiro

A tool for creators to turn music, art, text, and voice into animated content without learning video editing software.

The Problem It Solves

Creators who have music, illustrations, text, or narration they want to share often can't afford the time, cost, or learning curve of mastering full-featured video editing software just to animate them. Existing video tools are built around video files and are too cumbersome for everyday creative work. KiraNeiro removes that barrier — you can start creating with nothing but a browser.

Types of Content You Can Make

TypeDescriptionMain Users
Music Video (MV)Animate illustrations and lyrics to musicSinger-songwriters, vocaloid producers, illustrators
Explainer VideoSync narration with diagrams and textEducators, explainer creators
Short StoryCombine text, narration, and illustrations into a short narrativeWriters, narration creators
Reading VideoSync read-aloud audio with on-screen textAuthors, audiobook creators
Picture BookCombine multiple pages of art, text, and optional narration into one piecePicture book authors, comic creators
Voice + PhotoMinimal format: one photo plus one audio trackMemory sharing, casual creators

Design Philosophy (How It Differs from Other Video Editors)

Server-Free Design (Respecting Copyright & Privacy)

KiraNeiro only provides the playback engine. The app never sends or stores media files you load into your browser on our servers — everything happens client-side in your browser. Your projects live in your own local storage or on cloud storage you control (like GitHub). That means you own and manage your content's copyright and sharing rights.

Price

Completely free with no feature limits (donation-based). When export finishes, you can optionally donate or share on social media — but none of that is mandatory, and there are no interruptions during creation.

Browser Support

Editor (creation interface)

  • Windows / Edge Supported (primary target environment)
  • Android / Chrome Supported (primary target environment; touch-optimized UI)
  • iPad / Safari Supported (primary target environment; touch-optimized UI)
  • All other combinations (Windows/Mac/ChromeOS Chrome, Mac Edge, iPhone Safari, macOS Safari, Firefox, etc.) Works but unverified

We verify the editor's functionality on three primary target environments: Windows + Edge, Android + Chrome, and iPad + Safari. For other browser and OS combinations, the code isn't designed to block them (there are no explicit restrictions), but we haven't performed formal verification testing. This means they work, but we haven't done comprehensive testing to confirm all features function correctly. It's "not formally verified" rather than "confirmed not supported."

When adding video assets (MP4/WebM), be aware that WebM (VP9) cannot be played on iOS Safari due to OS-level restrictions. If you're using video assets on iOS, please use MP4 (H.264) for reliable playback.

Viewer (playback only)

The viewer page for playing published content works on all major browsers (Chrome, Edge, Firefox, Safari) on desktop and mobile. Playback doesn't require the special APIs that creation does, so viewers can use any modern browser.

Getting Started (Project Creation)

Start from the homepage by clicking "Open Editor," which takes you to the project creation screen. Choose the type of content you want to make.

Project Types You Can Create

TypeWizard Flow
Lyrics MVAdd audio (music) → add character/background art → enter lyrics and set timing per line
Picture BookSet page count → add narration audio (optional), which auto-distributes page display times based on audio length → add background art and text to each page
Voice + PhotoAdd one photo (as full-canvas background) → add one audio track (upload or record) → audio length becomes your total playback time — simplest workflow

Each wizard shows step-by-step guidance so you can reach a complete project without video editing knowledge. After finishing the wizard, you move to the full timeline editor and can keep editing freely. You can also skip the wizard and start from a blank project if you prefer.

Canvas Size for Your Platform

When creating a project (or anytime after), just pick your target platform and the canvas aspect ratio is set automatically.

PlatformSizeAspect Ratio
YouTube / Niconico / Bilibili1920×108016:9 (landscape)
TikTok1080×19209:16 (portrait)
YouTube Shorts1080×19209:16 (portrait)
Instagram Reels / Stories1080×19209:16 (portrait)
Spotify Canvas1080×19209:16 (portrait)
X1080×10801:1 (square)
Instagram Feed (1:1)1080×10801:1 (square)
Instagram Feed (4:5)1080×13504:5 (portrait)
CustomAny sizeAny size you specify

Adding Assets

You combine seven types of assets on the timeline: images, audio, video, text, emoji/kaomoji, handwriting, and effects. Register frequently used objects as favorites so you can reuse them across other projects too.

Supported Formats

Favorites

Right-click (or long-press) an object on the canvas and choose "Other ▶ Add to Favorites" to register it under a group name. Registered objects can be re-placed from the "Favorites" tab in the "Adding Assets" panel, filterable by group. The placement position is recalculated based on the canvas center and current playhead position, so you don't need to worry about the original position or timing. Favorited images, lyric blocks, and prose blocks have their asset data saved along with them in the browser, so they can be used across different projects too. Favorites are not saved in the project file — they are saved in your browser (device).

Adding Video Material (Silent Looping Video)

Add a video file (MP4 or WebM) from the "Video" tab to place it on the timeline as a silent, short looping clip — like a moving illustration. This is useful when you want to use footage with subtle motion instead of a static photo or artwork. Videos are limited to a maximum of 10 seconds; longer videos are automatically trimmed to the first 10 seconds. The audio track is automatically removed during import, so if you need sound as well, use "Extracting Audio from Video Files" below or add audio separately via the "Audio" tab. Note: iOS Safari does not support WebM (VP9), so if you need reliable playback on iOS, use MP4 (H.264) only.

Extracting Audio from Video Files

Add a video file (MP4 like an Android screen recording, or MOV like an iOS screen recording) via the "Audio" tab, and the app will discard the video part and extract only the audio track, importing it as a normal audio asset. You don't need to split it out in a video editor first. On your PC, you can drag and drop the file directly; on smartphones, use the file picker (file selection dialog) to select the file. If you want to use the video itself as a visual element rather than just its audio, see "Adding Video Material" above.

Recording Audio with Your Microphone

While your background audio is playing, you can record vocals or narration directly in your browser using your microphone. The browser automatically checks whether recording is supported, and if not, the recording button won't appear at all. Chrome, Edge, and Firefox all support this, as do Safari on iOS and macOS in MP4 format. Recorded audio is treated the same as other added audio assets for timing and layering. Like all assets in KiraNeiro, your recorded audio never touches our servers — it stays in your project.

About microphone connections

For recording, please use your computer's built-in microphone or a wired microphone instead of a Bluetooth (wireless) microphone. Bluetooth connections can be unstable, which may cause parts of the recorded audio to be dropped, resulting in a recording that is shorter than the actual time you recorded.

Adding Effect Assets (rain, snow, petals, confetti, and other particle effects)

From the "Effects" tab, just pick a preset — rain, snow, petals/falling leaves, or confetti — to add a particle effect to the timeline. There's no file to choose; it's placed immediately with default settings. After adding it, use the Properties panel on the right to adjust color, opacity, density (amount of particles), speed, size, jitter, and preset-specific details (such as the rain's angle or the snow's wind strength). Effects can be used as either a background or a foreground layer — there's no dedicated checkbox for this; instead, use the same layer-order controls as other objects (the right-click menu's "Bring to front" / "Send to back"). For example, you can layer falling snow in front of a character, or rain filling the whole background.

Handwriting Stroke Settings

When you add handwriting, you can choose between two drawing methods. "With animation" records in sync with main audio playback and reproduces the original stroke order and speed during playback. "Without animation" isn't synced to audio playback — it places the drawn line as a static image instead (this can't be switched after creation). Color, thickness, and line cap (round / square / butt) can be adjusted from the same settings dialog, whether as default settings before recording starts or as after-the-fact changes to already-recorded strokes. The dialog's "Randomize" feature can also suggest random combinations of color, thickness, and line cap.

Handwriting Stroke Animation Settings

Strokes recorded "with animation" can have their reveal motion changed afterwards. Right-click the object and choose "Motion ▶ Stroke Playback" to set two things: "Motion" (either "Draw" — the line is progressively drawn in — or "Erase" — the finished line is progressively erased away) and "Order" ("Original order" = exactly as recorded; "Reverse all" = it appears starting from the part drawn last; "Reverse stroke order" = each individual pen stroke is still drawn the way it was, but the pen strokes play in reverse sequence). The dialog has a live animated preview with a play button. Because long strokes take a while at normal speed, the preview speed can be set from 1x to 10x (this only affects the preview, not the finished work's playback speed). Strokes recorded "without animation" don't change over time, so this setting is not shown for them. To change the actual playback speed of the finished work, enter a "Playback Speed" value (default 1x, any value greater than 0 up to 10x, with up to 2 decimal places) either at the top of the "Stroke Playback" dialog or in the Properties panel on the right — both edit the same setting and actually affect playback, export, and the viewer (unlike the preview speed above). If you slow it down so much that the stroke wouldn't finish drawing before the object disappears, its display duration is extended automatically.

Timeline Editor Basics

The timeline at the bottom of the screen is where you arrange multiple tracks (images, text, audio) along a time axis.

Basic Operations

Automatic Keyframe Recording

You don't need to click an "Add Keyframe" button. Just drag an object on the canvas to move, scale, or rotate it, and a keyframe is automatically recorded at that timeline position. Motion between keyframes is interpolated with Bezier curves, and you can choose ease-in and ease-out. Each object can also loop (repeat a section) if you enable it.

Appearance Editing (Canvas Operations)

Change how objects look and move over time — manipulate them directly on the canvas in the center of the screen. Adjust opacity, scale, images, animations, and effects.

Selecting and Manipulating Objects

Click on an object in the canvas to select it. Drag it to move it, or use the handles around the selected object to resize or rotate. To select multiple objects simultaneously, hold Shift and click each object you want to select, then drag them together to move as a group or use the handles to scale them together.

Preset Animations

Objects have one-click entrance and exit animations (bounce in, rotate in, slide in, etc.). Applying one auto-generates multiple keyframes for position, scale, rotation, and opacity, which you can then tweak individually.

Swapping Images (Drawing Substitution)

Switch which image a character object displays at different times. This lets you do facial expressions, mouth movement, or costume changes using multiple image files within a single object.

Opacity & Scale Animation

Fade objects in and out, or scale them up and down over time. You can also set custom background colors and images for the canvas itself.

Image Effects

Apply visual effects to images — blur, sepia, black & white, color grading, etc. Pick a preset and parameters auto-populate; you can tweak them after. Heavy effects can be toggled on/off so they work smoothly even on low-end PCs like Chromebooks.

Text & Lyrics Editing

Lyrics, subtitles, and narration are organized as blocks (lines or paragraphs), and timing is adjusted per block.

Block-Level Timing

Each line of lyrics or paragraph of text gets its own timing slot. You adjust start and end times for each block individually. Use the preview to see how it syncs with the audio while you fine-tune. On the timeline, you can drag a text block to move it in time, but you can't resize it by dragging the edges — block width is determined by content and timing. If you add or remove lines, the timing slots change, so review the timing panel after editing.

Fonts & Styling

Customize font, text color, and size. Add fade-in/fade-out animation. Create decorative text styles with gradient fills, shadows, and outlines. There's also a "Random" button in the font dialog that suggests random styling combinations. Font choices are filtered by default to match the display language of the app (for example, if the display language is Japanese, only Japanese fonts plus Latin-alphabet fonts are shown). If you want to use fonts for other languages, add them from 'Display mode' inside the toolbar's '?' menu.

Text-to-Speech (Browser's Built-in Speech Synthesis)

Each text, lyrics, or paragraph block can have browser text-to-speech individually configured. This feature is only active during playback in the HTML viewer export and is never included in MP4 exports. Voice options are limited to local voices that don't send text to external servers. If local voices aren't available on your device, the text-to-speech feature itself won't work. Behavior varies by browser and OS combination, and iOS Safari support is not guaranteed (see the Browser Support section).

Audio Effects

Noise Reduction

Apply a filter to your main audio track to reduce environmental noise picked up during recording.

Sound Effects

Add reverb and other sound effects to your main audio track. The effect is consistent across preview, export, and live playback. Heavy processing can be toggled to ensure smooth playback on budget PCs.

Saving & Work Folder

Auto-save → Work Folder (Internal)

KiraNeiro continuously auto-saves your project to an internal work folder (Origin Private File System). You won't see it in Explorer or Finder — it's hidden.

Ctrl+S → .kneiro File

Press Ctrl+S (or go to File → Save As) to save your project as a .kneiro file to a location you choose. This is the portable, shareable project file. Auto-save does not update this file. If you want to keep a backup or continue on another device, save it this way.

Export Formats

Save As (.kneiro) — Project File

Saves the full project so you can re-edit it later in KiraNeiro.

Export Video (MP4)

Renders to MP4 using WebCodecs where available (up to 1920×1080, no export limits). Environments without WebCodecs support — including Firefox, some Safari versions, and iOS Safari — automatically fall back to the MediaRecorder API (MP4 or WebM), so MP4 export is available on iOS too via the fallback path. If neither WebCodecs nor MediaRecorder is available, export fails with an unsupported error. Export processing may take several minutes. This is the finished file for uploading to YouTube, TikTok, etc.

MP4 exports use the H.264 (AVC) video codec. In most cases — posting a video yourself, or distributing/using it commercially on typical websites — you don't need to handle any separate patent licensing.
*That said, certain commercial uses, such as large-scale distribution through paid video services or bulk sale as paid media, may require separate licensing.
In some environments, the browser may ask you to agree to additional AVC-related terms at startup — this relates to the browser's own terms of use and does not restrict how you can use the video you export.

Share HTML — External Mode

Small file size. The playback engine loads from kiraneiro.chronovis-software.com at runtime, so internet is required. Engine updates apply automatically. You can export from the export button on iOS too. However, iOS Safari has no way to open a local HTML file in an executable browser context, so when you open the exported file with the Files app, a playback guidance screen appears. Follow the link in the guidance to kiraneiro.chronovis-software.com/view, then select the same file again to play it (the same process works if you receive the file from a computer/PC and open it on iPhone/iPad).

Share HTML — Standalone Mode

Larger file (~256 KB + project data). The playback engine is fully embedded, so offline playback works. Not dependent on server status. Even if the playback engine is updated in the future, the content of files exported with this method will not change. You can export from the export button on iOS too. The procedure to open and play the file is the same as the external mode above.

Publishing & Sharing

KiraNeiro hosts only the playback engine. You store and manage your content yourself. Publishing means sharing your content — either by sharing a URL pointing to a file in your own storage, or by sending the exported file directly to others.

URL Sharing

Save your JSON + assets to your own cloud storage (like GitHub), then share a URL in the format https://kiraneiro.app/view?src={your-content-URL}. Paste that link on social media and it works as a playback page. We don't generate social media previews (Open Graph) — you add your own thumbnail and caption when you post.

Embedding (iframe)

Embed the playback engine on your own website using <iframe src="https://kiraneiro.app/embed?src={your-content-URL}">. The /embed path shows a minimal control bar.

File Sharing

Send the exported file (.kneiro project file or HTML share file) directly to someone via chat apps, email, or USB drive — no URL needed. The recipient just opens or selects the file in the KiraNeiro viewer to play it locally. This method shares privately with a specific person without publishing anywhere publicly.

CORS Constraints

The viewer fetches your content directly from the URL, so your cloud storage must allow CORS (cross-origin requests). GitHub (Pages and raw file links) works fine, but Google Drive and Dropbox shared links may be blocked by CORS.

PWA Installation

KiraNeiro can be installed as an app (PWA: Progressive Web App).

Motion Recording

How to Record Live Motion Points

Turn on the record button and press play. While playback is running, drag objects on the canvas to record their movement in real time. This is faster and more natural than placing keyframes one by one — your motion syncs with the music.

Display Duration Auto-Extends

While you're dragging to record motion, the recording continues even after the object's original end time passes. The object won't disappear mid-drag — you can keep dragging until you're done. When you confirm, the object's display duration automatically extends to match when you finished dragging, and this is reflected in exported videos and viewer playback. If you cancel the confirmation dialog or no motion was recorded, the original display duration is preserved.

Recording Confirmation Dialog — 3 Modes

When you stop recording, a dialog offers three options:

  • As-is — keeps your exact recorded motion
  • Linear — simplifies the path to straight line segments
  • Smooth — fits a smooth curve through your recorded points

Recording Display Timing for Lyrics / Prose

You can also use recording mode to adjust when each line of a lyrics or prose block appears. Turn on the record button, play the project, and click (or tap) the "Next" button at the exact moment you want each line to show. Timing is updated in real time. It feels like tapping along to a beat rather than typing in timecodes.

While recording, use the "Timing / Motion" toggle in the band to switch modes. In "Motion" mode the "Next" button is disabled, so the display timing stays exactly as it is and you record only position, size, and rotation motion.

Known Limitations & Troubleshooting

Why Won't My BGM Place?

KiraNeiro checks that an audio file's playback duration fits within its placement slot (from its start position to the next BGM item, or to the end of the timeline for the last one). If the file duration is longer than the slot, placement is rejected.

Solution: use a shorter audio file, or shift the BGM start position to widen the slot.

When Does "Update Playback Duration" Appear?

If every object in the project has an endpoint, and the furthest endpoint doesn't match the project's end time, the File menu shows an "Update Playback Duration" option. Click it to set the project end time to the furthest object endpoint. This often happens when you extend objects and forget to adjust the project length.

Unsupported Features (Intentionally Out of Scope)

  • Real-time collaborative editing
  • AI-generated animation (we prioritize animating your own art)
  • Voice synthesis and vocal AI generation (for creating audio content and generated vocals within the video itself; however, browser text-to-speech is supported in HTML viewer exports only, see Text & Lyrics Editing above)
  • Community features (comments, likes, galleries)
  • Direct upload integration with YouTube or other platforms
  • OCR or automatic lyrics/timing detection (manual timing is the standard)
  • Background removal for images

For information about supported browsers and environments, see the Browser Support section.