Synapse Dark Hero
Pure black SaaS hero with HLS video at 100% opacity no overlay, positioned at height 80vh and absolute bottom-[35vh]. Ideal for saas de inovação, plataformas de ai, ferramentas enterprise, startups de tecnologia. AI-ready template.
Use case: SaaS de inovação, Plataformas de AI, Ferramentas enterprise, Startups de tecnologia
Historical Context
The dark hero pattern didn't emerge from aesthetic preference — it emerged from necessity. Early neural network visualization tools in the 2010s needed pure black backgrounds because researchers were staring at node graphs for hours. The contrast wasn't a style choice; it was ergonomic. When DeepMind and OpenAI started publishing papers with dark-themed diagrams, the visual language of 'intelligence' became inseparable from darkness. Synapse Dark Hero takes that lineage seriously. The pure black (#000) isn't the lazy dark mode gray that every SaaS slaps on — it's the void that makes glass badges and neural pathway animations actually register as luminous. The glassmorphism here isn't decorative. It references the layered transparency of network architecture diagrams, where you need to see through one layer to understand the connections beneath. The futuristic tech aesthetic has been done to death, but this pattern earns it. The neural motifs aren't ornamental — they're structural, guiding the eye along the same pathways that data flows through the product itself.
When to Use
Deploy this when your product literally involves neural networks, AI inference, or machine learning pipelines. It falls flat on a project management tool that just added a ChatGPT wrapper. The pure black foundation demands content that justifies the drama — think model dashboards, training visualizations, API playgrounds for LLMs. If your hero section needs to communicate 'this product thinks,' not just 'this product exists,' Synapse is your pattern. Also works for premium-tier SaaS where the price point justifies the visual weight.
Design Principles
- Pure black (#000000) as negative space, never dark gray — the void is the canvas, not a compromise
- Glass badges earn their blur: each translucent element must layer information, not just decoration
- Neural pathway motifs follow actual data flow hierarchy — ornament that lies about structure is noise
- Light sources are singular and motivated — every glow traces back to a logical origin point in the UI
- Typography runs high-contrast and tight: one weight for authority, one for data, nothing in between
Technical Specs
Colors
Primary
Secondary
Effects
VÍDEO: Stream HLS curto (~5s loop) com visual abstrato minimalista. Formas geométricas ou partículas sutis em movimento sobre fundo escuro. Aspect ratio ~16:9 (276x160px storyboard). Exibido em opacity 100% sem overlay, posicionado com height 80vh e absolute bottom-[35vh], flutuando atrás do conteúdo de texto. O vídeo cria profundidade visual sem competir com o conteúdo. | EFEITOS CSS: Fundo preto puro com vídeo HLS (opacity 100%, sem overlay) posicionado em height 80vh e bottom-[35vh] flutuando atrás do texto, navbar fixa com blur glassmorphism, 3 badges glassmorphism em row, headline massiva (~80px) com animação fade-in-up, botões sólido preto com borda branca e glass transparente, logo marquee estático grayscale opacity-40, animações staggered via Framer Motion
Light/Dark
✗ Not Recommended / ✓ Full
Related
Last synced: 4/1/2026