Leia histórias com balões em spring animation e narrador typewriter; logado, escreva seu próprio rascunho e publique versões autorais que outros curtem e comentam.
# rodar localmente npm install npm run dev # abre em http://localhost:3000
Qualquer pessoa lê os livros. Usuários logados têm seu próprio rascunho por livro, posicionam os balões sobre a imagem e publicam versões que outros podem curtir e comentar. Tudo persistido no Supabase.
Balões de fala com spring animation, narrador com efeito typewriter, transições entre cenas e swipe pra navegar. Suporta landscape, portrait e square sem distorção.
Cada usuário tem seu rascunho por livro, salvo no Supabase com Ctrl+S. Balões arrastáveis posicionados livremente sobre a imagem.
Botão "Publicar 🚀" cria a versão pública; likes e comentários nas publicações (com login). Home mostra contador de acessos via tabela visits.
A história começa como um story.md por livro. No editor, você escreve narrador e diálogos por cena, arrasta os balões e salva. Publicar gera uma versão pública aberta a interações.
<!-- scene: arquivo.png --> abre nova cena; > texto é narrador; [Nome@esq] / [Nome@dir] são balões; x=0.5 y=0.3 posiciona o balão.
Tabelas profiles, drafts, publications, likes, comments e visits, todas com RLS. Leitura pública; escrita exige autenticação.
Animabook é Next.js 16 + React 19 + Supabase. Você precisa de Node, das dependências instaladas e de um projeto Supabase com as três variáveis de ambiente configuradas.
Clone o repositório e instale as dependências do projeto.
# instalar deps npm install
Crie um projeto Supabase e configure as três variáveis (anon, service role) no ambiente.
# .env NEXT_PUBLIC_SUPABASE_URL=https://...supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ... SUPABASE_SERVICE_ROLE_KEY=eyJ...
Crie as tabelas no SQL Editor do Supabase, ex. a tabela de visitas:
# SQL Editor do Supabase create table visits ( ... ); alter table visits enable row level security;
Fluxo de autoria do README: subir o app, criar conta, editar por cena, arrastar balões, salvar e publicar. No fim, deploy automático na Vercel.
O script de dev copia books/ pra public/books/ antes de iniciar o Next.
npm run dev # http://localhost:3000
Cadastre-se e abra o editor do livro. A rota /editor/* é protegida por proxy (redireciona pra /login).
# no navegador /login # cria sua conta /editor/livro1 # editor (requer login)
Escreva narrador e diálogos por cena, depois arraste os balões pra posição desejada. Salve o rascunho no Supabase.
# dentro do editor Ctrl+S # salva o rascunho no Supabase
Clique em "🚀 Publicar" pra criar a versão pública — você é redirecionado pra /publication/[id], onde outros podem curtir e comentar.
# gera versão pública 🚀 Publicar → /publication/[id]
Inclua o livro inteiro com -f (imagens em books/ são ignoradas no git) e dê push — a Vercel faz build + deploy automático.
git add -f books/livro1/ git commit -m "conteúdo livro1" git push # Vercel: build + deploy (~90s)
Animabook é mobile-first e cobre leitura, autoria e interação social numa mesma estante de livros.
Em /book/livro1, balões em spring animation e narrador typewriter; swipe entre cenas. A sidebar lista todas as versões publicadas.
Cada autor escreve seu próprio rascunho do mesmo livro e publica sua versão — múltiplas publicações por livro, uma por autor.
Arraste cada balão livremente sobre a imagem; a posição é gravada como fração (x, y) e respeita o aspect ratio da cena.
Curta e comente publicações de outros autores; a home exibe pageviews totais, visitantes logados e anônimos.
A plataforma já está no ar em animabook.vercel.app com reader, editor, publicações e social. As fases abaixo resumem o estado e a evolução natural.