Landing
Aurora Hero Section
A dark hero section with animated aurora/mesh gradient blobs, glass overlays, and editorial typography.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
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.
Chinese Prompt
创建一个深色模式的 hero 区域,背景为动画极光/网格渐变。使用三个缓慢漂移的模糊径向色块:深靛蓝、洋红和青色,带有高模糊和低透明度。在磨砂玻璃面板上放置大号展示标题(高对比度的衬线/无衬线字体组合)、柔和的灰色副标题和一个发光 CTA 按钮。叠加 3-5% 透明度的微妙胶片颗粒或噪点纹理。排版应大胆且具有编辑感,眉标文字使用宽松的字母间距。使用 Tailwind CSS 的任意值和 CSS keyframes 实现色块动画。不要使用库存插画。

## Overview
A cinematic hero section inspired by premium design studios and Awwwards winners. The aurora gradient creates depth without relying on imagery.
## Features
- Animated mesh/aurora gradient blobs
- Frosted-glass content panel
- Editorial serif + sans typography pairing
- Subtle film-grain texture
- Glowing primary CTA
- Dark-mode first palette
## Usage
Use as the top-of-fold hero for portfolios, product launches, or creative agencies. Replace the headline copy to match the brand voice.
## Customization
Modify the prompt to:
- Change the blob color palette (warm oranges/reds, monochrome, etc.)
- Add a scroll-driven fade-in for text
- Replace the glass panel with a bordered, transparent frame
- Introduce a custom variable font for the headline