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 以： - 按词而非渐变扫过显现 - 显现时添加微妙模糊 - 使用衬线字体营造编辑氛围 - 反转方向（滚动时变暗）