Landing
Lamp Hero Section
A dark hero section with a centered lamp light cone illuminating the headline and CTA.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a dark hero section with a lamp/light-source effect. A narrow cone of light should descend from the top center, widening as it reaches the headline, with soft edges and a radial gradient fade. The headline and subheadline sit inside the illuminated area in off-white text, while the surrounding background stays near-black. Add a small glowing CTA pill below the text. Use CSS gradients, masks, and opacity layers. Use Tailwind CSS. No images, no illustrations—only light, shadow, and type.
Chinese Prompt
创建一个深色 hero 区域,带有灯具/光源效果。一道狭窄的光锥从顶部中心向下延伸,到达标题时逐渐变宽,边缘柔和并径向渐变淡出。标题和副标题位于照亮区域内,使用米白色文字,周围背景保持近黑色。文字下方添加一个发光 CTA 胶囊按钮。使用 CSS 渐变、遮罩和透明度层。使用 Tailwind CSS。无图片、无插图——只有光、影和字体。

Overview
A dramatic hero section that uses a single light cone to draw attention to the message. Inspired by Aceternity UI's Lamp Effect and dark premium landing pages.
Features
- Descending light cone from top center
- Soft radial gradient edges
- Illuminated headline and subheadline
- Near-black surrounding background
- Glowing CTA pill
- Pure CSS light and shadow
Usage
Use for product launches, developer tools, or creative portfolios where a cinematic reveal is desired.
Customization
Modify the prompt to:
- Animate the light cone on load
- Add floating dust particles inside the beam
- Change the cone color to amber or cyan
- Add a scroll-driven dimming effect