Daniela

Experiência web autoral

Uma homenagem transformada em estudo público de narrativa, movimento e direção de arte.

Explorar

Conceito visual

A paleta combina preto, roxo e vermelho profundo com tipografia editorial e luz cinematográfica.

Narrativa

Rolagem horizontal, microinterações e revelações progressivas dão ritmo sem depender de conteúdo privado.

Implementação

GSAP coordena a experiência, com alternativa para movimento reduzido, navegação por teclado e estrutura semântica.

Versão pública

Fotos, desenhos, datas, músicas e mensagens íntimas foram removidos desta demonstração de portfólio.

Sistema visual

Um carrossel para apresentar a linguagem do projeto.

A versão pública usa apenas ilustrações e ornamentos sem dados pessoais.

01

Sistema de ornamentos

Elementos vetoriais criam unidade visual sem expor arquivos pessoais.

02

Contraste dramático

Rosas e tons profundos equilibram delicadeza, textura e legibilidade.

03

Interação como detalhe

O selo encerra a sequência e apresenta a camada interativa da narrativa.

Camadas da experiência

Cada faixa representa uma decisão de produto.

  1. Abertura cinematográfica

    Imagem, granulação, partículas e tipografia apresentam a atmosfera antes da primeira interação.

  2. Capítulos horizontais

    No desktop, o avanço da página se converte em uma narrativa lateral com progresso visível.

  3. Galeria responsiva

    Cartões magnéticos e rolagem natural reorganizam a mesma coleção em diferentes larguras.

  4. Revelações progressivas

    ScrollTrigger controla entrada, profundidade e ritmo sem bloquear a leitura do conteúdo.

  5. Interações acessíveis

    Envelopes e selo mantêm foco, rótulos e operação por teclado.

  6. Movimento reduzido

    A experiência detecta a preferência do sistema e entrega uma versão direta, sem animação excessiva.

Biblioteca visual

Peças gráficas que sustentam a identidade da página.

01

Lua e constelação

Ícones orbitais conectam a abertura aos capítulos da página.

02

Rosa ornamental

O motivo floral reaparece como assinatura entre blocos de conteúdo.

03

Selo interativo

Uma ação simples transforma a conclusão em uma pequena descoberta.

04

Divisor editorial

A separação visual mantém o ritmo entre experiências de rolagem distintas.

Pilares da experiência

Identidade forte, interação cuidadosa e privacidade por padrão.

Movimento intencional

Transições orientam a leitura e reforçam a hierarquia sem competir com o conteúdo.

Direção de arte

Texturas, brilho e contraste constroem uma estética própria em toda a experiência.

Componentes reutilizáveis

Cartões, capítulos e revelações compartilham padrões visuais e comportamentais consistentes.

Experiência responsiva

A composição se adapta do desktop ao mobile preservando contraste, ritmo e legibilidade.

Decisões do projeto

Três envelopes, três camadas da implementação.

Cada envelope guarda uma nota técnica. Clique para abrir ou pressione Enter quando estiver em foco.

Narrativa

Clique para abrir

Acessibilidade

Clique para abrir

Privacidade

Clique para abrir

Presente para Daniela — demonstração pública sanitizada para portfólio.

Next.js, TypeScript e GSAP.