Kinetic Type UI
SkillStack Official
Kinetic typography for the web: variable-font axis animation, scroll-velocity elastic type, staggered character reveals, scroll-scrubbed word fills and kinetic marquees — built around a fictional independent type foundry with a live type tester.
Build a landing page for my type foundry with kinetic typography — breathing variable headlines, a scroll-scrubbed manifesto, and a live type tester.
What you get
- A complete kinetic-typography system: SKILL.md with 10 motion modes (each with trigger, duration, easing and pasteable code), design tokens, component specs and code snippets — plus two live demo pages for a fictional type foundry (landing page + full type tester with variable-font sliders).
Good fit
- Designers and developers building type-led landing pages, font specimens, type testers, or motion-rich marketing sites where the typography itself should carry the page.
Not for
- Body-heavy reading pages, docs, or data dashboards — kinetic type belongs in display type, not paragraphs.
- Name
- Kinetic Type UI
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0 — Kinetic typography system: 10 motion modes (variable-axis breathing, char stagger, scroll word-fill, scroll-velocity elastic type, kinetic marquee, hover weight shift, masked line reveal, typewriter, outline-fill swap, axis playground), design tokens, components and snippets, plus two live demos for the fictional Kern & Co. type foundry (landing page + Motif Grotesk type tester with local variable fonts).
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip kinetic-type-ui-v1.0.0.zip -d ~/.claude/skills/kinetic-type-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 91 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Marquee & Number UI
Marquee & Number UI
A complete marquee & number motion system for landing pages: seamless tickers, multi-lane marquees, odometer price wheels, eased count-ups, scroll-linked numbers, animated stat bars — all vanilla JS with reduced-motion fallbacks. Demo: a fictional boutique coastal hotel (Casa Brisa) with live booking widgets.
Claude Code · Codex · Cursor · Copilot +3
Swiss Type UI
Swiss Type UI
Swiss International Typographic Style web UI skill: strict 12-column grids, black-white-signal red palette, one neo-grotesque typeface with typographic scale contrast, and hairline rules. Precision-first layouts for SaaS, data products, docs sites and portfolios.
Claude Code · Codex · Cursor · Copilot +3
Emil Kowalski Design Skills
Emil Kowalski Design Skills
Give your coding agent taste. 11 design-engineering skills from Emil Kowalski (ex-Vercel, ex-Linear) — animation decisions, motion review, Apple design principles, and UI polish. MIT-licensed, curated with attribution.
Claude Code · Codex · Cursor · Copilot +3
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3