DEV Community: Mayara Nascimento

Jim — Accessible Converter, an open-source WordPress plugin for converting documents quickly

Mayara Nascimento — Sat, 10 Oct 2026 00:32:49 +0000

Já faz algum tempo que venho trabalhando em um projeto que surgiu porque eu estava cansada de publicar e ler PDFs estáticos na web. Eles costumam ser rígidos, difíceis de navegar e desconfortáveis para ler; por isso, desenvolvi um plugin para WordPress que resolve esse problema.

Em vez de obrigar os usuários a baixar arquivos, ele torna o conteúdo nativo da web.

Principais recursos:

Leitura em voz alta nativa: Conversão de texto em fala utilizando a API do navegador.
Leitura personalizável: Tamanho de texto ajustável, temas e alto contraste.
Sumário automático (TOC): Gerado diretamente a partir dos títulos do documento e dos marcadores (bookmarks) do PDF.
SEO automático, Marcador visual, Lightbox.
Suporte a 7 idiomas
Conversão local: Executada diretamente no seu site WordPress, em segundo plano. Não requer APIs externas nem custos recorrentes de serviço.
Tutor de IA opcional: Permite que os leitores façam perguntas sobre o documento.

O objetivo é tornar a publicação de conteúdos extensos uma tarefa rápida e garantir uma leitura online confortável aos usuários, eliminando a necessidade de baixar arquivos ou utilizar conversores externos.

O plugin está atualmente na versão v2.0.1, e eu adoraria receber feedback das comunidades de desenvolvimento, acessibilidade e autores de blogs de conteúdo. Qual costuma ser a parte mais irritante de tornar sites com muitos documentos realmente acessíveis?

Site: jim.mabo.cc • Github: maycristina/jim-conversor-acessivel• Wordpress: https://wordpress.org/plugins/jim-conversor-acessivel

Como o Pixar in a Box me levou a criar uma moeda 3D usando CSS

Mayara Nascimento — Thu, 08 Oct 2026 02:34:52 +0000

Eu queria entender uma coisa que já vinha me deixando curiosa: até onde dá para levar uma experiência “3D” no navegador sem usar uma engine 3D completa.

Enquanto trabalhava no meu projeto de cara ou coroa, assisti a algumas aulas do Pixar in a Box, da Pixar com a Khan Academy. O que mais me chamou atenção não foi a animação em si, mas a matemática por trás dela.

Então resolvi usar a moeda como um pequeno experimento.

A moeda é construída com elementos comuns do DOM e transformações 3D em CSS. Sem WebGL, sem Three.js.

A parte interessante foi fazer o movimento parecer consistente, em vez de simplesmente girar uma imagem e chamar isso de física.

A física

A animação precisava se comportar de forma independente da taxa de quadros do dispositivo.

Uso Vue para o estado da interface, mas não queria que cada atualização da física passasse pelo sistema reativo. Então o estado da aplicação continua no Vue, enquanto a animação roda diretamente com "requestAnimationFrame", atualizando os nós do DOM envolvidos.

Essa separação fez diferença principalmente quando a animação ficou mais complexa.

A matemática por trás da moeda

A orientação da moeda é calculada a partir da rotação ao longo do tempo, enquanto a perspectiva e os movimentos semelhantes aos de uma câmera são controlados pelas transformações CSS.

Em vez de usar uma engine 3D para resolver essas transformações, calculo os valores necessários e aplico diretamente no elemento.

Foi provavelmente a parte que mais gostei: pegar algo que normalmente parece “renderização 3D” e reduzir a transformações, coordenadas e bastante matemática.

Sensores e interação

Também queria que a moeda respondesse ao dispositivo, em vez de funcionar apenas como uma animação isolada.

No desktop, a moeda pode reagir ao movimento do mouse.

No celular, uso a Device Orientation API para movimentos mais sutis, e os dados do acelerômetro podem ser usados para detectar gestos que iniciam o lançamento.

Assim, a mesma simulação recebe entradas diferentes dependendo do dispositivo.

Som

Outro pequeno problema foi o tempo de resposta.

Para o impacto da moeda, usei a Web Audio API para gerar o som em vez de depender apenas de um arquivo de áudio comum. Isso me dá mais controle sobre o momento em que o som é disparado e sobre a forma como ele é gerado.

Também há tratamento para "prefers-reduced-motion" e suporte à fala nativa em algumas partes da experiência.

A página "/sobre"

Existe outra parte do projeto em que escolhi uma abordagem diferente.

O jogo principal usa CSS 3D, mas a página "/sobre" usa Three.js, carregado por CDN, para renderizar as moedas estilizadas usadas na apresentação.

Para mim, isso não é uma contradição. As duas partes têm objetivos diferentes.

No jogo, existe uma interação contínua e um loop de animação, então fazia sentido manter o núcleo em CSS. Já a página "/sobre" é mais visual e estática, então usar WebGL por meio do Three.js fez sentido ali.

Também construí um menu flutuante de acessibilidade com ajustes de tamanho de fonte, contraste, redução de movimento e suporte à fala usando a Web Speech API.

A navegação foi adaptada para funcionar com rolagem e âncoras na URL, em vez de depender de um sistema separado de slides. Assim, uma seção específica pode ser acessada diretamente por um link.

Também existe música ambiente, com a preferência do usuário armazenada localmente no navegador.

Tudo começou com uma pergunta simples sobre CSS 3D.

No fim, virou um exercício muito melhor para entender transformações, loops de animação, APIs do navegador e a relação entre efeitos visuais e matemática.

O projeto continua simples na essência: jogar uma moeda.

Fazer o navegador se comportar como uma pequena máquina de simulação foi a parte divertida.

Jogo: https://coininbox.cc • GitHub: https://github.com/maycristina/coin-in-box

I recreated a 2,200-year-old game for free. Its inventory has coins from 100+ countries and eras.

Mayara Nascimento — Tue, 06 Oct 2026 11:31:03 +0000

Heads or tails. Cara ou coroa in Brazil, águila o sol in Mexico. The name changes from country to country, but the game is the same. Before the 2000s, flipping a coin was an everyday way to settle things, and I played it all the time as a kid.

Today, in a mostly digital world, it has become rare. I've met young people born after that time who had never heard of flipping a coin to decide something. So I built this project to bring that memory back and to teach a little something along the way.

It's for anyone who's curious, likes to explore, or collects coins and the stories behind them. And it's still fun! Every round shows you something new about the world.

🌍 Available in 3 languages, made for everyone
💸 Completely free: no sign-up, no login, no forms, no ads
🔒 No cookies, no tracking, no data collection. Your preferences stay in your browser.

Play: • About the project: • GitHub: