Landing
翻转词汇 Hero
标题中有一个旋转翻转词槽，通过 3D 旋转循环展示不同描述词。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
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.
中文提示词
创建一个带翻转词动画的 hero 标题。句子其余部分保持静态，只有一个词垂直 3D 旋转，循环 3-4 个替代词（例如 "Build fast. Build bold. Build beautiful."）。使用深色背景、白色大号粗体无衬线字体，翻转词使用高亮色。翻转动画应流畅，使用 perspective/rotateX 变换。使用 Tailwind CSS 和 CSS keyframes。无装饰图片。
## Overview
通过翻转单个描述词让页面保持活力的动态标题。适合在一行中传达多个价值主张。
## Features
- 静态句子 + 一个动画词
- 垂直 3D 翻转旋转
- 3-4 个循环替代词
- 深色背景 + 白色粗体字体
- 高亮翻转词
- perspective/rotateX 变换
## Usage
适用于 SaaS hero、机构标语或单个形容词不足以描述的产品页。
## Customization
修改 prompt 以：
- 翻转时添加模糊淡出
- 翻转词使用斜体衬线字体
- 最后一个词后添加打字光标
- 滚动进入视口时触发翻转