Dark SaaS Hero with Liquid Glass
Hero SaaS dark com liquid glass, vídeo de fundo espacial, navbar pill, marquee social proof e CTA verde vibrante. Prompt pronto para IA generativa.
Uso: SaaS B2B, Ferramentas de IA, Plataformas de desenvolvedores, Landing pages tech, Startups, APIs e SDKs
Contexto Histórico
Evolução do glassmorphism para liquid glass em 2025-2026, combinando backdrop-filter com pseudo-elements de borda gradiente via mask-composite. O padrão dark SaaS hero com vídeo de fundo e social proof marquee tornou-se a assinatura visual de startups tech modernas, popularizado por ferramentas como Linear, Vercel e Stripe.
Quando Usar
Deploy this when your product needs to communicate cutting-edge credibility before the user reads a single word. AI platforms, enterprise security tools, developer infrastructure, fintech dashboards — anything where perceived technical sophistication directly correlates with trust. Skip it for consumer apps targeting non-technical audiences, anything requiring WCAG AAA compliance out of the box, or products where warmth and approachability matter more than authority. The video background demands fast CDN delivery and graceful fallbacks.
Princípios de Design
- Depth through refraction, not shadow — let the glass distort what's behind it rather than floating above it with artificial elevation
- Video as light source — the background isn't ambiance, it's the optical engine that makes glass materials readable and dynamic
- Contrast hierarchy is non-negotiable — dark interfaces fail when text competes with effects; lock your type at 7:1 minimum against the darkest glass state
- Motion earns attention, stillness earns trust — animate the glass subtly on scroll or hover, but keep CTAs and navigation rock-solid
- Performance is a design decision — if the glass effect drops below 60fps on mid-range hardware, simplify it; a janky premium effect is worse than no effect
Especificações Técnicas
Cores
Primárias
Efeitos
Liquid glass com backdrop-filter blur(4px) e pseudo-element gradient border via mask-composite, video background full-screen (Terra rotacionando do espaço) com autoPlay loop muted playsInline object-cover absolute inset-0, marquee horizontal infinito translateX(0%) a translateX(-50%) em 20s linear infinite, hover suave em botões e links (200ms transition)
Light/Dark
✗ None / ✓ Full
Relacionados
Última sincronização: 01/04/2026