// How it works

From a raw capture to something worth shipping.

One editor for product visuals. Import a screenshot, recording, URL, or social post, frame and style it, animate it on a timeline, then export a still or a video — all in your browser.

// Step one

Capture

Product work rarely starts
with a tidy image file

Screenshots, recordings, live pages, and social posts all come in the same door. Whatever you bring becomes the same kind of canvas, so everything after this behaves identically.

PNG · JPEG · WebP

Screenshot file

Drag and drop, paste from the clipboard, or pick a file.

Full page

Live website

Paste a URL and Tokokino captures the page at a device viewport.

MP4 · WebM · GIF

Video and GIF

Drop a recording. Imported GIFs are re-encoded to run as video.

X · Bluesky

Social post

Paste a post link and it renders as a themeable card mockup.

// Step two

Compose

Framing decides what it is
styling decides how it lands

Every treatment here is non-destructive — the original capture is kept behind each crop, frame, and filter, so nothing you try is a one-way door. Save a finished look as a preset and re-apply it across a whole set.

Mockups

Device frames

iPhone, iPad, Pixel, Galaxy, MacBook, plus Safari, Chrome, and Arc chrome.

Aspect · Radius

Canvas shape

Aspect ratio, padding, corner radius, border, tilt, and scale.

Palettes

Backgrounds

Gradients, image packs, Unsplash, or a palette sampled from your capture.

6 shadows · 7 modes

Depth and light

Shadow types, portrait depth-of-field, backdrop patterns, 3D tilt.

Rather not start from nothing? The template picker carries ready-made compositions, several of them already animated.

Showcase
// Step three

Context

A screenshot says here it is
context says here is what matters

Labels, marks, and extra shots are what turn a picture of a screen into an explanation. Each one lives on its own layer, so you can rearrange the argument without re-cropping the evidence.

100+ fonts

Text layers

Stroke, shadow, blend modes, and opacity on every floating label.

106 shapes

Images and shapes

Logos, SVGs, and 3D shapes with their own z-index and filters.

Arrows · Strokes

Annotations

Point at what matters on a layer that never touches the capture.

3 slots · 8 layouts

Multi-shot slots

Side by Side, Depth Duo, Fan Out, Scatter, Perspective, and more.

// Optional

Animate

Motion built by describing states
not by scrubbing keyframes

Each canvas carries its own timeline. The editor eases from the committed values into whatever a clip changed, so you write the destination and it works out the path.

Timeline

Clips, not keyframes

Add a clip, change properties while it is selected, and it owns them.

Custom bezier

Easing you can drag

Linear, cubic, in, out, in-out, out-circ, or a curve you pull by hand.

Per-slot

Aim at one slot

Point a clip at a single capture slot instead of the whole canvas.

Trim · Mute

Video on the same track

Imported footage trims and mutes alongside the motion you built.

// Step four

Export

The end of the same pipeline
not a separate render service

Stills are rasterised from the canvas you have been looking at, and video is encoded on your own machine. The file appears without a queue, a watermark negotiation, or an upload.

HD · 4K · 8K

Stills

PNG, JPEG, or WebP at 1920, 3840, or 7680px wide.

WebM · MP4 · GIF

Video

Encoded on your device with WebCodecs — no queue, no upload.

1080px PNG

Clipboard

Copy straight out of the editor without touching the filesystem.

View tracking

Share link

Publish a composition to a public page and watch the views land.

// End to end

screenshot.png

Dropped on the canvas · 2560 × 1440

Tokokino

  • Capture — Screenshot, URL, recording, or post
  • Compose — Device frame, background, depth
  • Context — Text, marks, and extra shots
  • Animate — Timeline clips and easing curves
  • Export — Stills, video, or a public link

launch-demo.webm

Encoded on your device · 4K · 2.4 MB

You drop in a capture.
Tokokino frames, styles, and animates it.
You export the file.

The steps stay the same whatever you are making. The jobs people point them at do not.

Use cases
// Local-first

Where the work happens

Opening a capture
does not upload it

Editing, rasterising, and video encoding all run in the browser, and your work in progress is stored on the device, so a reload or a dropped connection does not cost you the composition. The server side is deliberately small and always explicit: capturing a URL, fetching a social post, syncing a cloud draft, publishing a share link. In each case it is the request you made or the rendered output — never the source capture sitting on your canvas. The project is open source under AGPL-3.0, so the boundary can be read rather than trusted; see the about page or the privacy policy.

// FAQ

Questions

// Last call

Screenshots and demos
polish that ships.

Create professional screenshots, device mockups, and animated product demos with clean framing, timeline edits, and export-ready output.