Penumbra

Penumbra é uma fantasia sombria em que cada capítulo muda de voz: o ritual em primeira pessoa, a memória em segunda, a vila de pescadores em terceira. O texto ainda tem versos e encantamentos em latim. Plataformas genéricas de leitura tratam tudo do mesmo jeito e perdem essa camada.

Quis um lugar próprio para publicar, separado do portfólio, que fosse confortável para ler por muito tempo no celular e que tivesse o clima do livro.

“Como fazer a interface sustentar o clima da história sem nunca competir com o texto?”

Com uma série só no ar, a página inicial é a própria série: a capa em destaque e duas abas, Sinopse e Capítulos. Cada capítulo termina com os links para o anterior e o próximo, e um atalho volta direto para a lista.

O único item fixo no topo é o Sobre mim, que leva à página do autor, com a história por trás do livro e um atalho para o Capítulo I. O site também lembra a última aba aberta e aceita links diretos para a sinopse ou para os capítulos.

A arte do capítulo abre a página e se dissolve num arco preto. Depois disso, só texto: uma coluna estreita, capitular vermelha, versos centralizados e o ornamento ⁂ nas trocas de cena.

O que ajuda quem está lendo

• Minutos de leitura em cada capítulo, calculados pelo número de palavras
• Barra de progresso fina no topo, que avança com a rolagem
• Encantamentos em latim com a tradução num botão, para não quebrar o ritmo
• Tema pergaminho opcional e tamanho do texto em A− e A+, lembrados para a próxima visita

As cores vêm das gravuras do livro. O fundo é o preto das ilustrações, o texto tem cor de osso e o vermelho da lua é a única cor de destaque. O azul do fogo aparece só no foco do teclado.

A Lora, uma serifada feita para tela, cuida da história. A Geist cuida da interface: datas, abas e controles. Assim fica claro o que é ferramenta e o que é livro.

• Preto#000000 · Fundo
• Osso#E9E4DC · Texto
• Lua#D4473A · Destaque
• Brasa#6F8FD8 · Foco do teclado

Cada capítulo é um arquivo de texto com um cabeçalho simples. Um script em Python monta o site, calcula os minutos de leitura, gera o feed e o zip para a Hostinger. Os recursos de escrita viraram componentes: troca de cena, versos, encantamento com tradução, aviso de conteúdo e rascunho.

Medi o contraste de cada par de cor nos dois temas e todos passam o nível AA da WCAG para texto normal, inclusive o vermelho dos encantamentos. O site tem link para pular direto para o texto, abas que funcionam pelo teclado e respeita quem pede menos movimento no sistema.

• 16,6:1contraste do texto no tema escuro
• 4,8:1do vermelho dos encantamentos, o par mais baixo
• 0,95 a 1,6rem de tamanho de texto, à escolha de quem lê

O site está pronto com três capítulos. Antes de publicar os próximos, quero observar leitores reais usando o site no próprio celular.

• Teste com 5 leitores de fantasia, lendo o Capítulo I do começo ao fim
• Quatro tarefas: achar a sinopse, começar a ler, aumentar a letra e seguir para o próximo capítulo
• Medir tarefas concluídas sem ajuda, conforto de leitura e quem chega ao fim do capítulo

Ser o autor e o designer ao mesmo tempo mostrou que a melhor interface para uma história é a que some enquanto se lê. Cada decisão de atmosfera, como o fundo preto e o vermelho da lua, só ficou porque passou na medição de contraste. E transformar os recursos de escrita em componentes deixou a publicação tão simples quanto escrever.