Landing
渐变文字显现
标题的文字填充通过滚动渐变遮罩逐渐显现。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
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.
中文提示词
创建一个带滚动驱动渐变文字显现的大标题。文字应从暗淡或透明开始,随用户滚动逐渐完全可见,一道渐变"光"扫过字母。使用 background-clip: text、长动画渐变背景,并将 background-position 与滚动进度绑定(CSS 滚动驱动动画或 JS)。使用深色背景和粗体无衬线字体。使用 Tailwind CSS。

Overview
滚动关联的标题显现,将阅读变成缓慢揭示。适合编辑和故事驱动页面。
Features
- 滚动驱动文字可见度
- 移动的渐变光
- background-clip: text
- 深色背景
- 粗体无衬线
- CSS 或 JS 滚动绑定
Usage
适用于长篇幅落地页、宣言或故事区域。
Customization
修改 prompt 以:
- 按词而非渐变扫过显现
- 显现时添加微妙模糊
- 使用衬线字体营造编辑氛围
- 反转方向(滚动时变暗)