VibeUI Logo
VibeUI
ExploreExtractMixerStyle PacksFavorites
Get Started
VibeUI Logo
VibeUI

Design ingredients for AI coding. Built for Cursor, Windsurf, and beyond.

Back to Explore
Hero Section
4 export formats

Linear Dark Narrative

Text emerges from the void like a signal from deep space. The headline fades from dim to bright across its lines, a radial glow pulses beneath the content, and the dark background says: the problems we solve are serious, and so are we. This isn't a hero section — it's an entrance.

futuristicboldcoolsaastech

Export Snippets

Switch formats without compressing the preview layout.

AI Prompt

Natural-language design direction for AI coding tools.

Build a Linear-style dark narrative hero section.

Design philosophy — emergence from the void:
1. Background: #0A0A0F — not pure black (feels dead), with a very faint radial gradient glow in the center: radial-gradient(ellipse at 50% 50%, #8B5CF614 0%, transparent 70%). The glow is barely visible but creates an unmistakable sense of depth.
2. Headline: Two lines. The first line is #F5F3FF80 — dim, like it's still emerging. The second line is pure white — it has arrived. This gradient-across-lines technique creates a reading direction and a sense of revelation. Font: 56-72px, -0.04em tracking, 700 weight.
3. Subtitle: #F5F3FF73, 18px, max-width 480px, 400 weight, line-height 1.7. Deliberately muted — the headline carries the weight.
4. CTA group: Primary button in #8B5CF6 (violet), rounded-full, 15px text. Secondary: #F5F3FF80 text link with right arrow. No border on secondary.
5. Spacing: min-height 90vh. Content centered both ways. More vertical padding than horizontal — the emptiness above and below is part of the drama.
6. Optional: A very subtle noise texture overlay (opacity 0.02) on the background for tactile depth.

The hero should feel like opening a movie, not a website.
Hero Section

Linear Dark Narrative

Text emerges from the void like a signal from deep space. The headline fades from dim to bright across its lines, a radial glow pulses beneath the content, and the dark background says: the problems we solve are serious, and so are we. This isn't a hero section — it's an entrance.

futuristicboldcoolsaastech

Export Snippets

Copy or download the current format while keeping the preview in view.

AI Prompt

Natural-language design direction for AI coding tools.

Build a Linear-style dark narrative hero section.

Design philosophy — emergence from the void:
1. Background: #0A0A0F — not pure black (feels dead), with a very faint radial gradient glow in the center: radial-gradient(ellipse at 50% 50%, #8B5CF614 0%, transparent 70%). The glow is barely visible but creates an unmistakable sense of depth.
2. Headline: Two lines. The first line is #F5F3FF80 — dim, like it's still emerging. The second line is pure white — it has arrived. This gradient-across-lines technique creates a reading direction and a sense of revelation. Font: 56-72px, -0.04em tracking, 700 weight.
3. Subtitle: #F5F3FF73, 18px, max-width 480px, 400 weight, line-height 1.7. Deliberately muted — the headline carries the weight.
4. CTA group: Primary button in #8B5CF6 (violet), rounded-full, 15px text. Secondary: #F5F3FF80 text link with right arrow. No border on secondary.
5. Spacing: min-height 90vh. Content centered both ways. More vertical padding than horizontal — the emptiness above and below is part of the drama.
6. Optional: A very subtle noise texture overlay (opacity 0.02) on the background for tactile depth.

The hero should feel like opening a movie, not a website.

Interactive Preview

Build software that
feels inevitable.

Streamline issues, projects, and roadmaps with purpose-built tools.

Start BuildingExplore

Interactive Preview

Build software that
feels inevitable.

Streamline issues, projects, and roadmaps with purpose-built tools.

Start BuildingExplore