# Transitions UI Generation

Make any UI, headline or image appear as if an AI agent is generating it.

- Repository: https://github.com/Jakubantalik/transitions.dev (6007 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -g -a claude-code -y`
Codex: `npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -g -a codex -y`
Cursor: `npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -g -a cursor -y`
Gemini CLI: `npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -g -a gemini-cli -y`

## Description

Make any UI, headline or image appear as if an AI agent is generating it. Five variants: ui (the default: a dotted wireframe drawn from the element's own structure, outline, boxes, text lines, icon paths, with guides, corner handles and size labels, then the real UI revealed behind a scan line), text (every glyph of a headline traced along its real outline in flowing dots, then fading in one by one), small text (a dotted line through each line of text), image (a frame, a sketch of the photo's tones, a halftone of its own pixels, colour dots, then the photo) and auto (text by size and images in one block). Two modes, skeleton and skeleton + generation texts (an agent log, the motion CSS being written, and a step line). One dependency-free runtime that works with any framework (vanilla, React, Next.js, Vue, Svelte). Use when the user asks for a "generation animation", "AI generating the UI", "agent building the component", "build-in animation", "wireframe to UI reveal", "skeleton generation", "dotted wireframe", "matrix dots", "make it look generated", "futuristic reveal", "generative UI loading", "headline generation animation", "letters drawn in dots", "glyph outline reveal", "image generation reveal", "halftone image reveal", or for an AI product that should show its output being built. Also the commands transitions generate, transitions generate texts and transitions generate preview.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Transitions UI generation

Plays an "agent is generating this" animation over any element on the page, then hands over to the real UI. Nothing is faked: the drawing is measured from the element itself, so the dotted outline, text lines and icons land exactly where the real ones appear. Headlines are traced along their real glyph outlines, and images are drawn from their own pixels.

## Variants

| Variant | What it generates | Use for | Reference |
| --- | --- | --- | --- |
| **`ui`** (default) | The component's dotted wireframe: dot field, guides, outline, every box, text line and icon, then the real UI behind a scan line. | Cards, panels, components an agent produced. | [01-skeleton.md](./01-skeleton.md) |
| **`text`** | Every glyph traced along its real outline in flowing dots, then fading in one by one (140ms after its outline, 90ms each, 90ms apart on a gentle in-out curve), with dots flying in to each glyph. | Headlines, titles, pull quotes, slide titles. | [03-text.md](./03-text.md) |
| **`small-text`** | A dotted line through each line of text; the characters fade in as it passes. | Eyebrows, subtitles, captions, labels. | [04-small-text.md](./04-small-text.md) |
| **`image`** | A dotted frame, a sketch of the photo's tones, a fine halftone of its pixels, a dot matrix in its colours, then the photo. | Hero images, image cards, covers. | [05-image.md](./05-image.md) |
| **`auto`** | Text and images in one block: text at `display` (32px) or larger as `text`, smaller as `small-text`, every image as `image`. | A hero or editorial block mixing a headline, copy and a photo. | |

`text`, `small-text`, `image` and `auto` are drawn by [`text-image-generation.js`](./text-image-generation.js), which ships with this skill; `generate(el, { variant })` from `ui-generation.js` hands them over. Those variants generate only their own content; the rest of the element shows as it is.

The rest: https://github.com/Jakubantalik/transitions.dev/blob/HEAD/skills/transitions-ui-generation/SKILL.md