MyOpia

Inspiration

A ideia do MyOpia surgiu durante uma conversa descontraída entre os integrantes da equipe. Como todos usamos óculos, começamos a compartilhar histórias sobre graus de miopia, doenças oculares, consultas ao oftalmologista e as dificuldades do dia a dia de quem depende de correção visual.

Em meio às brincadeiras, surgiu uma pergunta simples: "E se fosse possível fazer qualquer pessoa experimentar isso?". A partir daí, a ideia evoluiu rapidamente. Em vez de criar uma solução para um problema real, decidimos criar um problema que ninguém tinha e transformá-lo em produto.

Foi assim que nasceu a Claude Brothers e a filosofia da User Unexperienced (UU): criar experiências digitais propositalmente inconvenientes. O MyOpia se tornou a representação perfeita dessa visão, transformando tarefas simples em desafios desnecessariamente complicados e memoráveis.

What it does

O MyOpia é o primeiro simulador de miopia extrema criado para proporcionar uma experiência autêntica, imersiva e desnecessariamente inconveniente.

A plataforma aplica um sistema avançado de degradação visual em tempo real, desfocando toda a tela do usuário. Para enxergar com clareza, é necessário mover um par de óculos virtual pela tela, simulando os desafios enfrentados diariamente por pessoas que dependem de correção visual.

Além disso, os óculos exigem manutenção constante. As lentes podem acumular sujeira, embaçar, receber gotas de chuva e até quebrar caso sejam derrubadas com muita força. O usuário precisa limpar as lentes manualmente e cuidar dos óculos para continuar utilizando a plataforma.

A experiência também inclui simulações de doenças oculares como astigmatismo, hipermetropia, glaucoma e catarata, além de ambientes interativos como um simulador do Windows, um clone do Google, um clone do YouTube e até um desafio de CAPTCHA adaptado para pessoas com miopia extrema.

Nossa missão é simples: transformar tarefas fáceis em experiências memoravelmente piores.

How we built it

O MyOpia foi desenvolvido utilizando React 19, TypeScript, Vite, Tailwind CSS, React Router, Framer Motion e Howler.js.

A simulação visual é baseada em máscaras SVG e efeitos de blur dinâmicos que acompanham em tempo real a posição e a rotação dos óculos virtuais. Para reproduzir um comportamento físico convincente, desenvolvemos um sistema próprio utilizando requestAnimationFrame, simulando gravidade, atrito, quique, velocidade de lançamento e quebra por impacto.

Também implementamos sistemas independentes para chuva, acúmulo progressivo de sujeira nas lentes, limpeza manual, efeitos sonoros sincronizados e diferentes condições oculares. Toda a aplicação foi estruturada de forma modular, utilizando componentes reutilizáveis e hooks especializados.

A arquitetura foi projetada para que todos os efeitos possam ser aplicados sobre qualquer ambiente da plataforma, permitindo que a experiência de miopia seja reproduzida de forma consistente em todas as páginas do sistema.

Challenges we ran into

Criar um efeito de miopia convincente sem comprometer a performance do navegador. Sincronizar diversos sistemas visuais ao mesmo tempo, como blur, sujeira, chuva, sons e física dos óculos. Desenvolver uma física natural para os óculos, incluindo arrasto, lançamento, colisão e quebra. Encontrar o equilíbrio entre uma experiência frustrante e uma experiência divertida. Construir uma aplicação propositalmente ruim de usar sem torná-la impossível de demonstrar.

Accomplishments that we're proud of

Conseguimos transformar uma piada interna da equipe em um produto funcional. Desenvolvemos um sistema completo de simulação visual com física interativa. Criamos uma experiência única baseada no conceito de "acessibilidade reversa". Construímos um ecossistema completo com planos, loja de armações, conquistas e ambientes simulados. Mantivemos uma arquitetura organizada mesmo com vários sistemas independentes funcionando simultaneamente.

What we learned

Pequenas limitações visuais podem impactar drasticamente a experiência digital. Simular problemas do mundo real pode ser tão complexo quanto resolver problemas reais. Uma boa arquitetura é fundamental quando diversos sistemas precisam interagir ao mesmo tempo. Experiências memoráveis nem sempre surgem de ideias sérias; muitas vezes surgem das mais absurdas. Hackathons são excelentes ambientes para transformar brincadeiras em projetos concretos.

What's next for Claude Brothers

Expandir o conceito de User Unexperienced (UU) para novos produtos. Adicionar novas doenças e condições visuais ao simulador. Criar experiências multiplayer onde usuários possam compartilhar inconveniências em tempo real. Desenvolver novos ambientes simulados para testar a resistência dos usuários. Continuar criando soluções tecnológicas para problemas que absolutamente ninguém pediu para resolver.