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