Landing
Typewriter Hero
A minimal hero where the headline types itself out, followed by a blinking cursor.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
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.
Chinese Prompt
创建一个带打字机效果的极简 hero 区域。标题应在加载时逐字打出，后面跟随闪烁光标。使用深色背景上的等宽或粗体无衬线白色字体。下方添加简短静态副标题和简单轮廓 CTA。使用 JavaScript 控制打字时间，Tailwind CSS 设置样式。保持干净和电影感。
## Overview
A quiet, cinematic hero that uses typing motion to build anticipation. Great for developer tools, security products, or AI interfaces.
## Features
- Character-by-character typing
- Blinking cursor after text
- Monospace/bold sans-serif
- Dark background
- Static subheadline + outline CTA
- JavaScript-driven timing
## Usage
Use for hero sections where the message should feel deliberate and precise.
## Customization
Modify the prompt to:
- Type multiple lines in sequence
- Add a backspace/rewrite loop
- Change cursor color to accent
- Add sound feedback (optional)