Motion System + Signature Details
Animação autoral, não decorativa. Cada movimento carrega intenção. Cursor híbrido, transição dark→light, hero vivo, entries, hover choreography, selection, loading e reduced motion — fechando o DS.
Cursor · anel cream (híbrido)
Cursor nativo permanece visível (precisão pra clicar). Um anel cream 16px acompanha o mouse com leve atraso (lerp 0.2). Ao entrar em link/botão, expande pra 56px com fundo cream translúcido. Sobre cards de case, vira disco 72px com mix-blend-mode: difference. Desliga automaticamente em touch (pointer: coarse) e em prefers-reduced-motion.
Anel cream 16px segue o mouse com lerp 0.2. Visível em toda a página.
Expande pra 56px com cream translúcido. Timing 320ms / ease-fast.
Cards de case: disco cream 72px com mix-blend-mode: difference.
JS leve: mousemove + requestAnimationFrame com lerp 0.2. Auto-detecta a, button, [data-cursor]. Anel em position: fixed com z-index: 9999.
Cursor nativo nunca some. Touch e reduced-motion: anel fica display: none, fluxo nativo intacto. Focus-visible sempre aparece.
Dark → Light · círculo cinematográfico
A mecânica-assinatura. A section light revela via clip-path: circle() crescendo do centro-bottom em 1200ms com cubic-bezier(0.83, 0, 0.17, 1). Uma única animação, zero sobreposição de textos. Usado em transições conceitualmente pesadas.
A autoridade se constrói em silêncio.
Método ALTA — o cérebro estratégico por trás de toda marca que queremos ver consolidada no mundo.
AURA.ONE — mentoria premium.
Para CEOs e empresários que querem construir presença digital própria, não terceirizada. 6 sentidos, 12 semanas, transformação real.
clip-path: circle(0% at 50% 100%) → circle(150% at 50% 100%). Uma única property animada, sem fade duplicado, sem transform pesado.
Scroll-linked: círculo cresce conforme usuário rola a section. IntersectionObserver + scroll-progress. Opcional: autoplay ao entrar em viewport.
Só 2-3 vezes por page inteira. Se usar em toda transição, perde impacto. Reserva pra pontos narrativos.
Hero video · smoke/cloud
Replicação da mecânica Portfolite. Fundo animado com duas camadas de radial gradient + blur 40-60px + drift lento (20-28s por loop). Simula fumaça/nuvem sem vídeo real — mais leve, mais performático, mesmo impacto visual.
Authenticity leads
to authority.
Construímos presença digital para empresas que operam com ambição — com IA aplicada em cada camada.
2 camadas de radial-gradient cream com filter: blur(40-60px) + transform: translate + scale em loop alternado 20/28s. 0 requests, 0 vídeo, render em GPU.
Para pages de case específicas: video autoplay muted loop playsinline + WebM com fallback MP4. ~1-2MB. Usar só quando o projeto pede visual único.
Entry animations
Duas técnicas principais: mask reveal para headings (texto aparece de baixo pra cima atrás de máscara — fino, editorial) e stagger para grids (cards entram em sequência, 80ms entre cada).
Scroll-linked reveals
O que acontece quando cada elemento entra no viewport. Cada padrão tem timing e trigger específicos — tudo via IntersectionObserver + CSS. Parallax leve em imagens grandes.
stagger 120ms
delay 200ms
stagger 80ms
scroll-linked
100% em 1 viewport
Hover choreography
Três padrões por contexto. Scale-down (0.97) para cards portrait. Lift (-6px) para cards editoriais. Glow para CTAs premium. Passa o mouse nos demos.
Card "recua" ao hover. Sensação editorial, peso. Border-color sobe subtilmente.
Card sobe. Translate Y + border mais forte. Suaviza visualmente as listas longas.
Shadow cream 20px blur aparece. Uso restrito: hero CTA, AURA.ONE card, destaques.
Text selection & focus visible
Detalhes que revelam cuidado. ::selection customizado vira cream sobre ink-900 — assinatura sutil. :focus-visible com outline cream offset 4px — acessível e intencional.
Loading states
Dois padrões. Skeleton para conteúdo assíncrono (cards, grids carregando da API). Page curtain para transição entre pages — cortina dark sobe revelando page nova.
Ecossistema AUTH.ONE
Do posicionamento à performance — com IA aplicada em cada camada do trabalho.
Reduced motion · acessibilidade
Motion é estético — pode desligar sem perda de uso. Toda animação respeita @media (prefers-reduced-motion: reduce): durações vão a 0, scroll-linked fica estático, círculo-transição vira fade direto, parallax desativa.
Motion completo · padrão
Smoke drift 20-28s loop · círculo cinematic 1200ms · mask reveal com clip-path · stagger 80ms · parallax 0.3× · skeleton shimmer infinito.
@media not (prefers-reduced-motion)
Reduced motion
Smoke estático (primeiro frame) · círculo vira cross-fade 200ms · mask reveal vira opacity only · stagger delay 0 · parallax off · skeleton continua (loading é informação).
@media (prefers-reduced-motion: reduce)
O movimento amplifica a narrativa, não a sustenta. Um site AUTH.ONE com todas as animações desligadas continua comunicando tudo — hierarquia, estrutura, autoridade. Motion é camada de cinema, não de sentido.
FIM · Design System AUTH.ONE Noir Editorial v0.1 · 5 blocos · 25 regras · pronto para implementação