mira-animated-typing

Generates a self-contained HTML scene simulating terminal command typing in zoomed monospace text.

Updated Sep 2, 2026
One-click install
npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-animated-typing-mayconspirlandelli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mira-animated-typing
Source: https://github.com/mayconspirlandelli/slides-podcast-ia-home-office/tree/main/.agents/skills/mira-animated-typing
Command: npx skills add https://github.com/mayconspirlandelli/slides-podcast-ia-home-office --skill mira-animated-typing-mayconspirlandelli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating a realistic "command being typed" animation for presentations or demos usually requires video editing or animation libraries. This Skill generates a single dependency-free HTML file that simulates a person typing an agent harness command (Claude Code, Codex) in giant terminal monospace font on a dark background, with a blinking Windows-style cursor and sliding camera when text overflows the screen. ## Core Features & Use Cases - Typing simulation with human cadence: random 100-230ms per-character intervals, blinking cursor that stays lit while typing, and a sliding window that keeps the cursor anchored 100px from the right edge. - Rich text markup: per-segment colors via color=#HEX tags, line breaks via /n, and micro pauses via /p<ms>; input can also be transcribed from a screenshot of the text. - Wait-for-Enter mode: optionally waits for a real Enter keypress before typing once (no loop), with a second Enter triggering a zoom-out reveal of the full text. - Use Case: A presenter wants an opening slide showing "/mira-vertical crie uma versão vertical do deck" being typed live in fullscreen; the Skill outputs decks/<slug>/index.html that runs from file:// with zero dependencies. ## Quick Start Ask the AI to run /mira-animated-typing with the command text you want typed, optionally marking colored segments and line breaks, to generate the standalone index.html scene.

Frequently Asked Questions about mira-animated-typing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a typing animation of a terminal command in HTML?▼

Provide the command text to the Skill, which generates a single index.html simulating per-character typing at random 100-230ms intervals with a blinking cursor. The file uses pure JavaScript and CSS, so it runs from file:// with no dependencies.

How do I add colors and line breaks to the typed text?▼

Wrap segments in color=#HEX tags to render them in that color, and insert /n where a line break should occur. Micro pauses use /p followed by milliseconds, such as /p400 for a 400ms freeze.

Can the typing animation start only after pressing Enter?▼

Yes, the wait-for-Enter mode sets WAIT_FOR_ENTER to true so the cursor blinks indefinitely until Enter is pressed, then types once without looping. A second Enter triggers a zoom-out reveal of the full text.

Does the typing animation require external libraries like GSAP?▼

No, the scene is built with vanilla JavaScript and CSS only, explicitly forbidding CDNs, GSAP, or D3. All motion uses CSS transforms and requestAnimationFrame-free timers.

Can I use a screenshot of text as input for the typing scene?▼

Yes, the Skill transcribes the image literally, maps each visual line to a /n break, and converts colored words to the nearest hex color tags. Ambiguous characters or colors are confirmed with the user before generation.