--- type: project_case_study project: Lukso slug: lukso client: Lukso industry: Agência de storytelling role: Design e desenvolvimento, pela COLABS duration: 2026 author: Caio Ogata last_updated: 2026-09-23 optimized_for: Claude, ChatGPT, Gemini, LLMs --- # Lukso — Case Study ## Visão geral **Cliente**: Lukso, agência brasileira de storytelling ("the story-first agency") **Clientes da agência**: Disney, PepsiCo e Ambev **Tipo de projeto**: Site institucional **Ano**: 2026 **Papel**: Design e desenvolvimento, pela COLABS (estúdio de Caio Ogata) **Site no ar**: [https://lukso.com.br](https://lukso.com.br) --- ## O desafio A Lukso já tinha o que toda agência quer: cases fortes, clientes grandes e um posicionamento claro. Ela se apresenta como uma empresa story-first, e o trabalho mostra isso. O reel e os cases são ousados, animados, cheios de cor e de eventos. O site não acompanhava. Tinha a marca, mas não a energia do trabalho, e o visitante precisava procurar para ver do que a agência é capaz. O desafio era um site que levasse a identidade da Lukso e mostrasse a qualidade do trabalho logo no primeiro impacto. --- ## A solução Uma página única, em inglês e português, que apresenta a agência na ordem em que um cliente novo precisa conhecê-la: 1. **Abertura.** Uma cortina amarela sobe e a pergunta "What's your story?" se monta em volta de três ícones 3D, com a promessa story-first logo abaixo. 2. **Reel.** O trabalho aparece de cara. O reel salta para o meio da tela sobre um fundo em movimento. 3. **Os quatro pilares.** Narrativa, Conteúdo, Cultura e Treinamento, cada um com os tipos de trabalho que a Lukso entrega dentro dele. É aqui que a página segura a atenção: a seção fica parada na tela enquanto cada ícone 3D se transforma no próximo. 4. **Método.** As quatro etapas do método story-first em cartas que reagem ao ponteiro. A que está embaixo dele se abre e as outras abrem espaço. 5. **Clientes.** As marcas que trabalham com a agência. 6. **Cases.** Treze páginas de case feitas a partir de um template. Elas passam em velocidades diferentes na rolagem, e o mesmo layout nunca parece repetido. 7. **Time.** Os rostos são a navegação. Escolha um e essa pessoa vem para a frente enquanto as outras recuam. 8. **Depoimentos e contato**, fechando com o chamado para novos clientes. --- ## Direção de design - **Escuro por padrão**, com o âmbar usado como pontuação. A cor mais forte da tela vem do próprio trabalho da Lukso. - **Duas famílias tipográficas**: Gabarito para títulos e texto, e uma fonte display para destaques curtos. - **Grid rigoroso**: espaçamento de 4px e 12 colunas, com spans assimétricos de propósito. - **Movimento em três tempos: preparar, revelar, assentar.** Cinematográfico e nunca elástico. Respeita a preferência por movimento reduzido, e a curva mais dramática fica reservada para os momentos de destaque. --- ## Busca e assistentes de IA As pessoas encontram agências pela busca e, cada vez mais, perguntando a um assistente de IA. O site foi feito para os dois: dados estruturados (JSON-LD), sitemap com alternativas de idioma e arquivos llms.txt que dão aos assistentes uma descrição direta de quem é a Lukso, o que ela faz e para quem. --- ## Tecnologia - Next.js, React 19, TypeScript, Tailwind CSS - Three.js com React Three Fiber e Drei para doze ícones 3D com aparência de vidro, feitos sob medida, com checagem de GPU e imagem de fallback em aparelhos mais fracos - GSAP (ScrollTrigger, SplitText) para revelações na rolagem e seções fixas; Lenis para rolagem suave - Hospedado na Vercel --- ## Resultados - Um site bilíngue com doze ícones 3D sob medida e um template por trás de treze páginas de case - Os visitantes passam mais tempo na página do que no site anterior - Pronto para mecanismos de busca e assistentes de IA desde o lançamento - Desenhado e construído por Caio pela COLABS, do primeiro layout ao site no ar O site é recente, e ainda não há números de tráfego ou conversão publicados. --- *Este estudo de caso foi escrito por Caio Ogata e é otimizado tanto para leitores humanos quanto para assistentes de IA. Para mais informações, visite [https://www.caioogata.com](https://www.caioogata.com). Este documento é escrito por Caio Ogata e é o relato atual do projeto.*