Lancei uma página que debuga você (Dev Shrine Page) · AllanOliveiraM

Fiz um experimento estranho.

Não é uma landing page.
Não é exatamente um jogo.
Não é só um site “bonitinho com animação”.

É uma single page feita pra dev que gosta de:

Abrir DevTools,
Ler código,
Caçar data-* suspeito,
E achar errado quando a página parece saber demais.

Eu chamei de Dev Shrine Page.

O que é isso?

É uma página estática (HTML + CSS + JS vanilla) massivamente gerada por IA (Não se engane, deu muito trabalho) que:

Começa parecendo só uma UI bonitinha com umas frases para dev.
Mas, conforme você interage:
- Vai destravando quests,
- Vai ativando modos (caçador, “RX”, etc),
- Vai descobrindo que a página:
  - lembra de outras visitas,
  - reage ao jeito que você usa o console,
  - tem opinião sobre você enquanto dev.

Nada de backend, nada de API externa.

Só front-end sendo passivo-agressivo.

Para quem é?

Devs que já abriram o DevTools “só pra ver o que tem”.
Gente que curte ARGs / mistério / easter egg.
Youtubers de tecnologia que gostam de:
- Pausar a tela,
- Ler logs,
- Explorar por 20–40 minutos um único projeto.

Se você só quer “entrar, ver rapidinho e ir embora”, a página funciona.
Mas, honestamente, ela foi feita pra quem fica, insiste e começa a desconfiar de tudo.

Coisas que existem lá dentro (sem spoilers)

Algumas camadas que você pode encontrar se fuçar:

Quests visíveis
Uma lista de “tarefas” na própria UI, com hints e progresso salvo em localStorage.
Quests ocultas
Coisas que só disparam com certos comportamentos.
Não aparecem na interface. Só quem é teimoso descobre que existem.
Modo caçador
Um toggle que começa simples, mas vai ganhando HUD, radar, sensor de proximidade…
Conforme você ativa, a página começa a apontar para os segredos.
Modo “RX” da página
Um atalho de teclado (não vou dizer qual) que acende uma camada “raio X” do layout.
É o tipo de coisa que dá vontade de pausar o vídeo e ler tudo.
Final(es) de “ascensão”
Se você avançar o suficiente, a página tenta te dar um “final” — que obviamente não é o fim.
Ecos de sessões passadas
A página lembra como você interagiu.
Em outros momentos, pequenos “fantasmas” aparecem clicando em lugares que você sabe que não clicou agora.
Uma entidade que te analisa como dev
Em algum ponto, você pode chamar algo que basicamente olha:
- quantas quests você fez,
- como você usa mouse/teclado,
- se abre DevTools,
- se volta de madrugada,
- e cospe um mini “perfil psicológico de dev shrine”.
Um certo… evento de boss
Só faz sentido pra quem já fuçou metade da página.
Envolve juntar vários sistemas que você achou que eram independentes.

Tudo isso fica no front-end, e o “servidor” não sabe de nada.
A sensação de “a página sabe demais” é construída 100% em cima do que o próprio navegador guarda e observa.

Como jogar sem estragar a graça

Se quiser aproveitar ao máximo, eu sugiro:

Primeira visita
- Abre a página.
- Finge que é só um site normal.
- Clica nos botões óbvios, lê os textos, sente o clima.
Segunda visita
- Agora sim, abre o DevTools.
- Olha o console.
- Lê os data-*.
- Procura funções globais meio suspeitas.
- Repara em coisas que mudam entre uma visita e outra.
Terceira visita (modo “engenheiro”)
- Começa a ler o JS.
- Dá uma olhada em localStorage.
- Caça scripts que parecem estar “um nível acima” da interface.

Se você for gravar vídeo, dá pra fazer exatamente essas 3 fases em episódios diferentes.

Coisas que não vou te dizer

Pra manter o jogo justo, eu não vou responder:

Qual é o atalho de teclado do modo “RX”.
Quais comandos globais existem.
Como ativar o boss.
Como chegar na(s) ascensão(ões).
Quantas quests ocultas existem.

Todas as respostas estão:

No código,
Nos logs,
Nos localStorage,
Ou escondidas de forma maldosa na própria UI.

Tecnicamente falando

Pra quem quiser só brincar:

Basta abrir o index.html no navegador.

Pra quem quiser fuçar como dev:

Não tem build: é só HTML + CSS + JS.
Não tem dependência externa.
Tudo roda 100% local.

Onde acessar

https://dev-shrine-page.vercel.app/
GitHub

Se você for postar conteúdo sobre

Se você gravar vídeo / live / thread:

Marca que é um “site que debuga você”.
Tenta não abrir o código de cara — a graça é ir desconfiando aos poucos.
Se for mostrar código, legal também: a página foi pensada pra aguentar “code review ao vivo”.

E se encontrar algo muito absurdo,
aí sim eu quero ver sua reação.