Landing
Masked Video Hero
A hero with video clipped inside oversized typography, revealing motion through letters.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
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.
Chinese Prompt
创建一个 hero 区域,视频或动画渐变被裁剪进超大字体中。使用一个占据大部分视口的巨大粗体单词或短句。字母内部背景应显示动态(如无视频资源,使用循环渐变动画占位)。使用 CSS background-clip: text 配合透明文字填充,或 clip-path/mask 技术。在遮罩文字下方放置小副标题和 CTA。使用 Tailwind CSS。周围背景保持深色。

Overview
A typography-first hero that uses video masking to turn text into a window of motion. High impact and visually memorable.
Features
- Oversized masked typography
- Video or animated gradient inside letters
- CSS background-clip or mask
- Small subtitle + CTA
- Dark surrounding background
Usage
Use for brand launches, fashion/editorial sites, or creative agencies.
Customization
Modify the prompt to:
- Use multiple words as separate masks
- Add a subtle stroke around the text
- Replace gradient with real video element
- Add scroll-driven text scale