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.
你能得到
- 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).
适合场景
- 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.
不适合
- Body-heavy reading pages, docs, or data dashboards — kinetic type belongs in display type, not paragraphs.
- 名称
- Kinetic Type UI
- 下载数
- 1
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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).
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip kinetic-type-ui-v1.0.0.zip -d ~/.claude/skills/kinetic-type-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 91 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
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