Landing
Flip Words Hero
A headline with a rotating flip-word slot that cycles through descriptors with 3D rotation.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a hero headline with a flip-word animation. The sentence should be static except for one word that rotates vertically in 3D, cycling through 3-4 alternatives (e.g., "Build fast. Build bold. Build beautiful."). Use a dark background, a large bold sans-serif font in white, and a highlighted color for the flipping word. The flip animation should feel smooth and use perspective/rotateX transforms. Use Tailwind CSS and CSS keyframes. No decorative images.
Chinese Prompt
创建一个带翻转词动画的 hero 标题。句子其余部分保持静态，只有一个词垂直 3D 旋转，循环 3-4 个替代词（例如 "Build fast. Build bold. Build beautiful."）。使用深色背景、白色大号粗体无衬线字体，翻转词使用高亮色。翻转动画应流畅，使用 perspective/rotateX 变换。使用 Tailwind CSS 和 CSS keyframes。无装饰图片。
Overview
A kinetic headline that keeps the page alive by flipping a single descriptive word. Great for conveying multiple value propositions in one line.
Features
- Static sentence with one animated word
- Vertical 3D flip rotation
- 3-4 cycling word alternatives
- Dark background + bold white typography
- Highlighted flipping word
- Perspective/rotateX transforms
Usage
Use for SaaS heroes, agency taglines, or product pages where a single adjective isn't enough.
Customization
Modify the prompt to:
- Add a blur fade during the flip
- Use a serif italic font for the flipping word
- Add a typing cursor after the final word
- Make the flip trigger on scroll into view