Cinematic animated hero sequences: masked line reveals, character stagger, kinetic typography on scroll, load choreography, and ambient background motion for luxury-grade landing pages.
Design a cinematic hero sequence for my landing page: masked line reveals on load, character-stagger animation for the headline, kinetic typography that reacts to scroll, and subtle ambient background motion — in a luxury fragrance brand style.
你能得到
- A complete cinematic hero-sequence animation system: masked line reveals, character-stagger text entrances, kinetic typography that reacts to scroll, orchestrated load choreography, and ambient background motion — plus 2 luxury fragrance landing page demos you can preview and remix.
适合场景
- Landing pages that need a luxury, film-like first impression — product launches, brand sites, portfolios, and premium campaigns where the hero section must feel cinematic and choreographed rather than static.
不适合
- Projects that need fast, minimal, or text-heavy interfaces; pages where heavy motion hurts performance or accessibility; anyone looking for a generic component library instead of a focused cinematic hero system.
- 名称
- Hero Sequence UI
- 下载数
- 0
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: Initial release: cinematic hero sequence animation system with 2 luxury fragrance landing demos
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip hero-sequence-ui-v1.0.0.zip -d ~/.claude/skills/hero-sequence-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 33 个独家 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
Micro Interaction UI
Micro Interaction UI
A micro-interaction motion pattern library for AI agents: 16 production-ready web animation patterns — magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more — with copy-paste code and live demos.
Claude Code · Codex · Cursor · Copilot +3