Cultura & Ciência Projeto de demonstração
Céu Aberto — planetário com um céu noturno tocável
Um site índigo-espacial para um planetário de Lisboa: um mapa de constelações em SVG interativo onde tocar num grupo de estrelas acende as linhas e abre uma ficha, uma viagem em potências de dez da Terra à Via Láctea, uma programação filtrável por idade e um fluxo completo de reserva de lugares — tipografia luminosa sobre escuro verdadeiro, zero fotografia.
feitura.pt/demo/ceu-aberto — Ao vivo
Um planetário e centro de ciência em Lisboa quer um site que saiba a entrar debaixo da cúpula. Tem de despertar deslumbramento sem kitsch: deixar os visitantes tocar no céu real da estação, perceber a escala do universo em três scrolls, encontrar uma sessão à medida do miúdo mais novo do grupo e reservar lugares com total em euros — tudo igualmente mágico num telemóvel segurado com um polegar.
O que está lá dentro
- Sistema de design índigo-espacial, branco-estrela e laranja-cometa em CSS scoped — sem fotografia
- Mapa de constelações em SVG interativo: 26 estrelas, quatro constelações, toque ou hover acende as linhas
- Fichas de constelação com meses de visibilidade, uma curiosidade e ligação direta ao fluxo de reserva
- Secção de potências de dez — Terra, Sistema Solar, Via Láctea — desenhada à mão em SVG com legendas mono
- Programação de sessões com filtro funcional pela idade mais nova e preços por sessão em EUR
- Reserva de lugares em três passos: sessão, dia (encerrado à segunda) e contadores adulto/criança com total ao vivo
- Revelações ao scroll com IntersectionObserver, totalmente desativadas com prefers-reduced-motion
- Campos de estrelas cintilantes gerados de forma determinística — só transform/opacity, zero layout shift
- Totalmente bilingue PT/EN com toggle nativo, contraste AA sobre escuro verdadeiro e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta violeta-índigo sobre escuro verdadeiro, escala tipográfica leve e luminosa, estudos do logótipo cometa e cúpula, composição do hero
- Dataset das constelações — coordenadas das estrelas, pares de linhas e áreas de toque para Ursa Maior, Cassiopeia, Órion e Escorpião; campo de estrelas de fundo determinístico
- Interação de assinatura — estados de toque/hover/teclado no mapa do céu, brilho e destaque de linhas, fichas com meses de visibilidade e sessões ligadas
- Painéis de potências de dez — Terra, Sistema Solar e Via Láctea ilustrados em SVG, legendas de escala em mono, coreografia de revelação ao scroll
- Programação de sessões — seis sessões com copy PT-PT, salas, durações e preços, filtro funcional por idade mais nova com estado vazio
- Fluxo de reserva — passos de sessão, dia e lugares, lógica de encerramento à segunda, contadores adulto/criança, total em EUR ao vivo e confirmação demo
- Secção de visita e passagem do locale EN — horários, tabela de bilhetes, como chegar, revisão completa da tradução inglesa
- Auditoria de acessibilidade e movimento — contraste sobre escuro, alvos de 44 px, colapso com movimento reduzido, teste de polegar do mapa do céu a 375 px, recomposição para desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
92
Performance
100
Accessibility
100
Best practices
100
SEO