Transitions UI Generation
Make any UI, headline or image appear as if an AI agent is generating it.
Install
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -g -a claude-code -y- Repository
- Jakubantalik/transitions.dev6k
- Category
- Design
- Updated
- 6d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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 |
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 |
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 |
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 |
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, 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.
