Marquee & Number UI
SkillStack Official
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.
What you get
- 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.
Good fit
- 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.
Not for
- Text-heavy long reads, form-dense tools, or financial reports where numbers must stay static and precisely readable.
- Name
- Marquee & Number UI
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: 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.
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 marquee-number-ui-v1.0.0.zip -d ~/.claude/skills/marquee-number-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 43 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
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