Projeto

O que sinto

Experiência web em 3D para apoiar a expressão de emoções de forma visual e acessível.

Next.jsReactReact Three FiberThree.jsTailwind CSS

Sobre o projeto

O que sinto é uma experiência interativa em 3D criada para ajudar pessoas a identificarem e comunicarem emoções de forma mais visual e intuitiva. A ideia nasceu da vontade de construir uma interface mais acolhedora para quem tem dificuldade de se expressar verbalmente, como pode acontecer com pessoas autistas, crianças ou qualquer pessoa em momentos de sobrecarga emocional.

Em vez de depender apenas de texto, o projeto usa um avatar 3D que reage a diferentes estados emocionais, aproximando tecnologia, empatia e acessibilidade em uma proposta mais humana. O foco foi transformar sentimentos em interações visuais simples, claras e fáceis de entender.

No meu portfólio, este projeto representa bem meu interesse por experiências digitais que unem propósito social e experimentação técnica. Além do cuidado com a interface, ele também foi uma oportunidade de explorar desenvolvimento 3D para web e criar uma solução com mais sensibilidade para um problema real.

O problema

Nem sempre é fácil colocar sentimentos em palavras. Em muitos contextos, principalmente para pessoas neurodivergentes, esse desafio pode tornar a comunicação emocional mais cansativa, frustrante ou limitada.

A solução

Desenvolver uma aplicação web em 3D em que o usuário possa visualizar e selecionar emoções a partir de um personagem interativo, com expressões faciais, animações e mudanças de enquadramento que ajudam a tornar cada sentimento mais perceptível.

Conceitos aplicados

  • renderização 3D na web com React Three Fiber e Three.js
  • uso de @react-three/drei para câmera, ambiente e sombras
  • controle de expressões faciais com morph targets
  • mapeamento de emoções para animações e estados visuais do avatar
  • pré-carregamento de modelos .glb para melhorar a experiência
  • tela de carregamento com feedback de progresso
  • gerenciamento de estado com Context API
  • organização da aplicação com separação entre components, hooks, context e constants
  • interface responsiva com Tailwind CSS
  • estrutura com Next.js e App Router

Aprendizados

Esse projeto foi especialmente importante para meu aprendizado em experiências 3D na web. Um dos maiores desafios foi entender melhor o espaço tridimensional, como posicionamento nos eixos X, Y e Z, além de integrar modelo, animações, expressões faciais e interação de câmera de forma coerente.

Também foi uma ótima oportunidade para praticar organização de estado, carregamento assíncrono de assets e construção de uma interface com um propósito mais humano.

Projeto em evolução

Este projeto ainda está em evolução. A base principal já foi construída, mas continuo trabalhando em novas funcionalidades, refinando a experiência de uso e explorando maneiras de deixar a comunicação das emoções ainda mais clara, acessível e interativa.

Voltar para projetos