# TYPO VIDEO

> Free, browser-based animated typography studio with one-click WebM 4K/8K export.

TYPO VIDEO is a single-page web application by Zigmoon that turns text into kinetic motion graphics directly in the browser, without any account, upload or installation. It targets motion designers, social media creators, video editors and front-end developers who need quick, high-resolution typographic loops.

## Core capabilities
- 11 live animation modes: scroll, pulse, glitch, marquee, type, stack, kinetic, rain, edges, frame, 3D (faux-extruded depth with rotation, rim highlight and floor reflection).
- Live FX sliders: speed, glitch, blur, hue rotation, motion trail, jitter and animated film grain (dual-pass overlay + soft-light noise tile, regenerated for true motion).
- Hue modes: off, cycle, strobe and per-channel RGB split.
- 12 curated Google Fonts loaded on demand via `document.fonts.load()` so the canvas always renders the chosen face (Bebas Neue, Inter, Oswald, Anton, Archivo Black, Space Grotesk, Major Mono Display, Unbounded, DM Serif Display, Syne, Rubik Mono One, Press Start 2P).
- Mouse-wheel zoom on the stage to resize the text live; Ctrl/Shift + wheel adjusts letter-spacing.
- Live REC button: records the on-screen canvas at 60 fps via `captureStream()` + `MediaRecorder` (VP9 / VP8 / AV1 fallback chain, 16 Mbps).
- Offscreen export modal: WebM up to 4K (3840×2160) and 8K (7680×4320), aspect ratios 16:9, 9:16, 1:1, 4:5, frame-accurate via `track.requestFrame()` per rendered frame.
- Auto-save to `localStorage` (debounced 250 ms).
- Installable PWA (`manifest.webmanifest`, `display: standalone`) with a versioned service worker doing precache + network-first navigations + stale-while-revalidate for Google Fonts.
- 100% client-side, no account, no upload, no telemetry.

## URL
- Production: https://app.zigmoon.com/TYPOVIDEO/

## Resources
- [Index page (this app)](https://app.zigmoon.com/TYPOVIDEO/index.html): full UI.
- [Manifest](https://app.zigmoon.com/TYPOVIDEO/manifest.webmanifest): PWA descriptor.
- [Service Worker](https://app.zigmoon.com/TYPOVIDEO/sw.js): offline strategy.
- [Sitemap](https://app.zigmoon.com/TYPOVIDEO/sitemap.xml)
- [Robots](https://app.zigmoon.com/TYPOVIDEO/robots.txt)

## Related Zigmoon apps
- [SUPERPRINT](https://app.zigmoon.com/SUPERPRINT/) — browser DTP with CMYK PDF export.
- [CUTTHEFLOW](https://app.zigmoon.com/CUTTHEFLOW/) — in-browser 4K video editor.
- [HOT MOTOR MOTION](https://app.zigmoon.com/MOTION/) — JS motion design timeline.
- [VIZION](https://app.zigmoon.com/VIZION/) — creative board.

## License & contact
- Author: Zigmoon — https://zigmoon.com/
- Free of charge for personal and commercial use.