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.
Use the marquee-number-ui skill to add a seamless testimonial ticker and an odometer-style price display to my hotel landing page.
你能得到
- SKILL.md with 10 motion modules (M1–M10: seamless marquee, multi-lane tickers, kinetic headline ticker, odometer digit wheels, eased count-up, scroll-linked numbers, animated meters, pause-on-hover, number formatting, perf + reduced-motion rules); references/design-tokens.md (full token table); references/components.md (10 components in page order); references/snippets.md (9 paste-ready vanilla JS/CSS snippets); 2 demo pages (landing-page.html + rates.html) for a fictional boutique hotel with 6 AI-generated photos.
适合场景
- Hotel/resort, real-estate, fintech or SaaS marketing pages where numbers are the selling point; any landing page that needs a memorable kinetic ticker or animated stats band.
不适合
- Text-heavy long reads, form-dense tools, or financial reports where numbers must stay static and precisely readable.
- 名称
- Marquee & Number UI
- 下载数
- 1
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: v1.0.0: initial release — 10 motion modules, full token/component/snippet references, 2 demo pages (Casa Brisa fictional boutique hotel landing + suites & rates with live odometer booking widgets), 6 AI placeholder photos.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip marquee-number-ui-v1.0.0.zip -d ~/.claude/skills/marquee-number-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 43 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
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
Scroll Narrative UI
Scroll Narrative UI
Scroll-driven storytelling UI: pinned chapters, multi-layer parallax, kinetic typography, scroll-scrubbed text, horizontal galleries and scroll-mapped stats — turn a landing page into a cinematic journey the user controls with the scrollbar.
Claude Code · Codex · Cursor · Copilot +3
Bento-Style UI Design
Bento-Style UI Design
Design bento-grid landing pages — modular unequal cards where tile size carries the editorial hierarchy, each card with its own mini-visualization, choreographed stagger/reveal/hover motion. Ships tokens, components, copy-paste snippets, and an animated Hexagrid demo.
Claude Code · Codex · Cursor · Copilot +3
Hero Sequence UI
Hero Sequence UI
Cinematic animated hero sequences: masked line reveals, character stagger, kinetic typography on scroll, load choreography, and ambient background motion for luxury-grade landing pages.
Claude Code · Codex · Cursor · Copilot +3