Landing
视差分层 Hero
多个图片/文字层以不同滚动速度移动的 hero 区域。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a hero section with parallax depth layers. Use a dark background with 3-4 abstract shape layers (gradients, blurred circles, or simple geometric forms) at different depths. As the user scrolls, the layers should move at different speeds—foreground faster, background slower. Place a bold headline and CTA in the center that stays relatively stable. Use CSS transform and scroll-driven animation or a lightweight JS scroll listener. Use Tailwind CSS. No real images; use CSS-generated shapes.
中文提示词
创建一个带视差深度层的 hero 区域。使用深色背景和 3-4 个抽象形状层(渐变、模糊圆形或简单几何形状)位于不同深度。用户滚动时,各层以不同速度移动——前景更快、背景更慢。在中央放置相对稳定的粗体标题和 CTA。使用 CSS transform 和滚动驱动动画或轻量 JS 滚动监听。使用 Tailwind CSS。不使用真实图片,使用 CSS 生成的形状。

Overview
通过视差创造空间深度的分层 hero。常见于高端作品集和产品发布页。
Features
- 3-4 个深度层
- 每层不同滚动速度
- CSS 生成抽象形状
- 居中稳定标题
- 深色背景
- 滚动驱动动效
Usage
适用于创意作品集、AI 产品发布或沉浸式落地页。
Customization
修改 prompt 以:
- 添加鼠标移动视差偏移
- 使用渐变网格替代形状
- 添加微妙颗粒纹理叠加
- 让文字也轻微视差移动