Landing
Gradient Text Reveal
A headline whose text fill is revealed gradually through a scrolling gradient mask.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a large headline with a scroll-driven gradient text reveal. The text should start dim or transparent and become fully visible as the user scrolls, with a gradient "light" moving across the letters. Use background-clip: text, a long animated gradient background, and tie the background-position to scroll progress (CSS scroll-driven animation or JS). Use a dark background and a bold sans-serif font. Use Tailwind CSS.
Chinese Prompt
创建一个带滚动驱动渐变文字显现的大标题。文字应从暗淡或透明开始,随用户滚动逐渐完全可见,一道渐变"光"扫过字母。使用 background-clip: text、长动画渐变背景,并将 background-position 与滚动进度绑定(CSS 滚动驱动动画或 JS)。使用深色背景和粗体无衬线字体。使用 Tailwind CSS。

Overview
A scroll-linked headline reveal that turns reading into a slow unveiling. Great for editorial and story-driven pages.
Features
- Scroll-driven text visibility
- Moving gradient light
- background-clip: text
- Dark background
- Bold sans-serif
- CSS or JS scroll binding
Usage
Use for long-form landing pages, manifestos, or story sections.
Customization
Modify the prompt to:
- Reveal word-by-word instead of gradient sweep
- Add a subtle blur during the reveal
- Use a serif font for editorial mood
- Reverse direction (dim on scroll)