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 实现色块动画。不要使用库存插画。
