Design Atlas
Type
design workspace
Verdict
Useful
Licence
Conditional licence, open source copyleftopen-source-copyleftThe editor is free at review. The source and project materials are AGPL-3.0; site terms reserve third-party images, brand assets and user content to their respective owners.
Agent channels
none
Pricing
free
Reviewed

← Atlas · Topics: assets, motion, inspiration

Tokokino ​

Type
design workspace
Verdict
Useful
Licence
Conditional licence, open source copyleftopen-source-copyleftThe editor is free at review. The source and project materials are AGPL-3.0; site terms reserve third-party images, brand assets and user content to their respective owners.
Agent channels
none
Pricing
free
Reviewed

What it is ​

Tokokino is an open-source browser editor for framing product captures, composing launch graphics and animating short product demos. Its public template collection gives concrete starting points for device and browser mockups, layered compositions and motion.

When to open it ​

  • When a raw app screenshot needs a device frame, controlled backdrop, shadow and annotations for a launch post or product page.
  • When a short interaction should become a sequence of frames with deliberate zoom, tilt or reveal.

Most useful ​

  • Template collection: the public showcase includes Browser Dark, ASCII Glass, iPhone Spotlight, UI Closeup Showcase, Galaxy Sand Stage and animated reveals. Open a template to inspect the full composition.
  • Device and browser frames: compare screen crops and perspective across phone, tablet, desktop and browser chrome mockups.
  • Multi-shot layouts: Side by Side, Depth Duo and Fan Out arrange several captures on a single canvas, useful for feature comparisons and responsive previews.
  • Motion examples: templates such as Product Reveal and Zoom In Reveal provide a clear way to study pacing and transition between interface states.

Using it with agents ​

The editor has no published MCP, CLI or registry for agent use at review time. The project is AGPL-3.0, so an agent can inspect or self-host its source from the GitHub repository linked on the site; no dedicated agent integration is listed.

Watch out for ​

  • These are promotional mockup and demo compositions, not production UI layouts. Keep device framing and glow effects subordinate to the interface being explained.
  • The public terms distinguish the AGPL project materials from user uploads and third-party assets. Reuse of a template's imagery or brand assets is not granted by the source licence.
  • The hosted editor can share public links; check the share state before using a composition containing private product material.

Reusable ideas ​

  • Sample a backdrop from the screenshot itself to keep foreground and background colors related.
  • Use a consistent device frame and margin system across an entire feature set, then vary the crop to guide attention.
  • Add annotations only where they explain a state change; preserve the screenshot as the visual anchor.

Screan, ui.camera, Craftwork, before.click