Cultura & Ciência Demonstration project
Céu Aberto — planetarium with a tappable night sky
A deep-space indigo site for a Lisbon planetarium: an interactive SVG constellation map where tapping a star group lights its lines and opens an info card, a powers-of-ten journey from Earth to the Milky Way, an age-filtered session timetable and a full seat-booking flow — luminous type on true dark, zero photography.
feitura.pt/demo/ceu-aberto — Live
A planetarium and science centre in Lisbon wants a site that feels like stepping under the dome. It has to spark wonder without kitsch: let visitors touch the actual seasonal sky, understand the scale of the universe in three scrolls, find a session that fits the youngest kid in the group, and book seats with a total in euros — all equally magical on a phone held with one thumb.
What's inside
- Deep-space indigo, starlight white and comet orange design system in scoped CSS — no photography
- Interactive SVG constellation map: 26 stars, four constellations, tap or hover to light the lines
- Constellation info cards with visibility months, a fact and a deep link into the booking flow
- Powers-of-ten section — Earth, Solar System, Milky Way — hand-drawn in SVG with mono scale captions
- Session timetable with a working youngest-age filter and per-session pricing in EUR
- Three-step seat booking: session, day (closed Mondays) and adult/child steppers with live total
- Scroll-triggered reveals via IntersectionObserver, fully collapsed under prefers-reduced-motion
- Twinkling star fields generated deterministically — transform/opacity only, zero layout shift
- Fully bilingual PT/EN with a native toggle, AA contrast on true dark and 44 px touch targets
Build log
- Art direction and tokens — violet-indigo palette on true dark, luminous light-weight type scale, comet and dome logo studies, hero composition
- Constellation dataset — star coordinates, line pairs and hit areas for Ursa Major, Cassiopeia, Orion and Scorpius; deterministic background star field
- Signature interaction — tap/hover/keyboard states on the sky map, glow and line highlighting, info cards with month visibility and linked sessions
- Powers-of-ten panels — Earth, Solar System and Milky Way illustrated in SVG, mono scale captions, scroll-reveal choreography
- Session timetable — six sessions with PT-PT copy, rooms, durations and prices, working youngest-age filter with empty state
- Booking flow — session, day and seats steps, closed-Monday date logic, adult/child steppers, live EUR total and demo-sink confirmation
- Visit section and EN locale pass — hours, ticket table, how to get there, full English translation review
- Accessibility and motion audit — contrast on dark, 44 px targets, reduced-motion collapse, thumb test of the sky map at 375 px, desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
92
Performance
100
Accessibility
100
Best practices
100
SEO