Landing
遮罩视频 Hero
视频被裁剪进超大字体中,通过字母展示动态。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a hero section where a video or animated gradient is clipped inside oversized text. Use a single word or short phrase in a massive bold font that fills most of the viewport. The background inside the letters should show motion (use a placeholder looping gradient animation if no video asset is available). Use CSS background-clip: text with a transparent text fill, or clip-path/mask techniques. Place a small subtitle and CTA below the masked word. Use Tailwind CSS. Keep the surrounding background dark.
中文提示词
创建一个 hero 区域,视频或动画渐变被裁剪进超大字体中。使用一个占据大部分视口的巨大粗体单词或短句。字母内部背景应显示动态(如无视频资源,使用循环渐变动画占位)。使用 CSS background-clip: text 配合透明文字填充,或 clip-path/mask 技术。在遮罩文字下方放置小副标题和 CTA。使用 Tailwind CSS。周围背景保持深色。

Overview
以字体为先的 hero,使用视频遮罩将文字变成运动窗口。视觉冲击力强且令人难忘。
Features
- 超大遮罩字体
- 字母内部视频或动画渐变
- CSS background-clip 或 mask
- 小副标题 + CTA
- 深色周围背景
Usage
适用于品牌发布、时尚/编辑网站或创意机构。
Customization
修改 prompt 以:
- 使用多个单词作为独立遮罩
- 添加文字描边
- 将渐变替换为真实 video 元素
- 添加滚动驱动的文字缩放