Minimalismo & Swiss 2020s Modern SaaS

Minimalist React Hero with Motion

Hero section minimalista high-end com React, Tailwind CSS v4 e Motion. Vídeo de fundo invertido, tipografia Geist + Instrument Serif e animações staggered.

minimalist high-end React Tailwind CSS v4 Motion library hero section editorial spacious video background staggered animation social proof

Uso: SaaS landing pages, Ferramentas de gestão remota, Startups premium, Produtos digitais high-end

Contexto Histórico

Inspirado no design editorial moderno de SaaS premium como Linear, Vercel e Raycast. Combina tipografia serifada com sans-serif, vídeo de fundo com gradiente e micro-animações para criar uma experiência de hero section sofisticada e conversível.

Especificações Técnicas

Cores

Primárias

#FFFFFF

#373a46

#fcfcfc

Secundárias

#1a1a1a

#2d2d2d

Efeitos

Vídeo de fundo invertido verticalmente (scaleY(-1)), gradiente branco sobreposto (from-[26.416%] to-[66.943%]), animações staggered fade-and-slide-up via Motion library, sombra multi-camada no botão CTA (inset shadows), input com sombra suave (0px 10px 40px 5px)

Light/Dark

✓ Full / ✗ No

DESIGN.md

Prompt para AI

Relacionados

Minimalismo & Swiss

Happy Art Tropical

Última sincronização: 01/04/2026