New Era Automotive Hero
Design an automotive hero with full-viewport video (min 600px, max 965px). Ideal for concessionárias de carros, marketplaces automotivos, marcas de veículos, landing pages de lançamento. AI-ready template.
Use case: Concessionárias de carros, Marketplaces automotivos, Marcas de veículos, Landing pages de lançamento
Historical Context
The automotive hero section has always been about one thing: making metal feel alive. In the early web era, car brands relied on static photography with dramatic lighting — think BMW's early 2000s campaigns where a single hero shot carried the entire emotional weight. The shift to full-bleed video backgrounds around 2012-2014 changed everything. Suddenly you could communicate speed, engineering precision, and aspiration without a single word of copy. Tesla's website circa 2015 stripped the automotive hero down to its essence: cinematic video, minimal UI, one CTA. That restraint became the template. But what made it work wasn't the video itself — it was the confidence to let the product speak. Every EV startup since has tried to replicate this, most failing because they layer too much on top. The best automotive heroes today borrow from film direction: shallow depth of field, deliberate pacing, sound design that rewards unmuting. They treat the browser as a theater, not a billboard. The current generation pushes further with scroll-driven reveals and ambient motion that responds to cursor position, creating a sense of presence that static frames never achieved.
When to Use
When the vehicle IS the story. This pattern demands hero-tier footage — if you're working with B-roll or stock, walk away. Deploy for model launches, brand manifestos, and EV reveal pages where the first three seconds need to communicate engineering philosophy. Works best when the client has invested in proper film production and trusts you to let it breathe. Kill it if the brief requires dense information above the fold or if mobile bandwidth constraints mean your audience will see a frozen poster frame.
Design Principles
- Let the footage do the heavy lifting — if you need more than 8 words of overlay copy, your video isn't strong enough
- Design for the mute state first; sound is a reward, not a requirement
- Treat loading as choreography: poster frame selection matters as much as the video itself since that's what 60% of mobile users actually see
- Typography should whisper against cinematic backgrounds — ultra-light weights, generous tracking, high contrast placement in negative space
- Respect the scroll threshold: the hero is a moment, not a trap. Give clear visual cues that content exists below without breaking the theater
Technical Specs
Colors
Primary
Secondary
Effects
VÍDEO: Vídeo cinematográfico automotivo com cenas de carros em movimento, estradas ou detalhes de veículos em tons escuros e elegantes. Filmagem em câmera lenta com iluminação dramática, transmitindo luxo e performance. Gradient overlays no topo e base (260px, from black/30 to transparent) garantem legibilidade do texto decorativo gigante sobreposto. | EFEITOS CSS: Vídeo de fundo tela cheia (min 600px, max 965px) com gradient overlays no topo e base (260px, from black/30 to transparent), texto decorativo gigante centralizado (75% largura) com gradient fill vertical (branco 83% opacity para 12%), navbar com logo spinner e botão Cart arredondado, CTA inferior com parágrafo + botão esquerda e tagline Bebas Neue 64px direita
Light/Dark
✗ Not Recommended / ✓ Full
Related
Last synced: 4/1/2026