Landing
极光 Hero 区域
带有动画极光/网格渐变色块、玻璃覆盖层和编辑感排版的深色 Hero 区域。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a dark-mode hero section with an animated aurora/mesh gradient background. Use three slowly drifting blurred radial blobs in deep indigo, magenta, and teal with heavy blur and low opacity. Overlay a frosted-glass panel containing a large display headline in a high-contrast serif/sans pairing, a short subheadline in muted gray, and a single glowing CTA button. Apply a subtle film grain or noise texture overlay at 3-5% opacity. Typography should be bold and editorial, with generous letter-spacing on the eyebrow text. Use Tailwind CSS with arbitrary values and CSS keyframes for the blob animation. No stock illustrations.
中文提示词
创建一个深色模式的 hero 区域,背景为动画极光/网格渐变。使用三个缓慢漂移的模糊径向色块:深靛蓝、洋红和青色,带有高模糊和低透明度。在磨砂玻璃面板上放置大号展示标题(高对比度的衬线/无衬线字体组合)、柔和的灰色副标题和一个发光 CTA 按钮。叠加 3-5% 透明度的微妙胶片颗粒或噪点纹理。排版应大胆且具有编辑感,眉标文字使用宽松的字母间距。使用 Tailwind CSS 的任意值和 CSS keyframes 实现色块动画。不要使用库存插画。

Overview
受高端设计工作室和 Awwwards 获奖作品启发的电影感 hero 区域。极光渐变在不依赖图片的情况下创造深度。
Features
- 动画网格/极光渐变色块
- 磨砂玻璃内容面板
- 编辑感衬线 + 无衬线字体组合
- 微妙胶片颗粒纹理
- 发光主按钮
- 深色优先配色
Usage
用作作品集、产品发布或创意机构的顶部首屏。替换标题文案以匹配品牌调性。
Customization
修改 prompt 以:
- 更改色块配色(暖橙/红色、单色等)
- 为文字添加滚动驱动的淡入效果
- 将玻璃面板替换为带边框的透明框架
- 为标题引入自定义可变字体