VibeUI Logo
VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

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

Back to Explore

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

Interactive Preview

Build software that
feels inevitable.

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

Start BuildingExplore
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%, rgba(139, 92, 246, 0.08) 0%, transparent 70%). The glow is barely visible but creates an unmistakable sense of depth.
2. Headline: Two lines. The first line is rgba(255, 255, 255, 0.50) — 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: rgba(255, 255, 255, 0.45), 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: rgba(255, 255, 255, 0.50) 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.