Landing
打字机 Hero
极简 hero,标题逐字打出并伴随闪烁光标。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a minimal hero section with a typewriter effect. The headline should type out character-by-character on load, followed by a blinking cursor. Use a monospace or bold sans-serif font in white on a dark background. Add a short static subheadline below and a simple outline CTA. Use JavaScript to control the typing timing and Tailwind CSS for styling. Keep it clean and cinematic.
中文提示词
创建一个带打字机效果的极简 hero 区域。标题应在加载时逐字打出,后面跟随闪烁光标。使用深色背景上的等宽或粗体无衬线白色字体。下方添加简短静态副标题和简单轮廓 CTA。使用 JavaScript 控制打字时间,Tailwind CSS 设置样式。保持干净和电影感。

Overview
安静、电影感的 hero,使用打字动效建立期待。适合开发工具、安全产品或 AI 界面。
Features
- 逐字符打字
- 文字后闪烁光标
- 等宽/粗体无衬线
- 深色背景
- 静态副标题 + 轮廓 CTA
- JavaScript 驱动时间
Usage
适用于需要让信息显得深思熟虑和精确的 hero 区域。
Customization
修改 prompt 以:
- 连续打出多行
- 添加退格/重写循环
- 将光标颜色改为强调色
- 添加声音反馈(可选)