Noctis, northern lights journeys
Premium immersive website for a travel company: night sky and northern lights rendered in real time, a seven-chapter scrolling story, expeditions, journal and booking request.
- CSS
Description
Eleven pages ready to publish, with no image or video to produce: the starry sky (4,596 real stars), the aurora, snow and terrain are drawn by WebGL shaders, with an SVG fallback sky on devices without graphics acceleration and a still version for reduced motion. The home page tells a polar night in seven chapters, from dusk to dawn; then come three expedition pages (day-by-day itinerary, prices, departures), a three-article journal, an about page and a template legal notice. Booking form filtered by expedition and departure, ambient sound synthesised on demand, editorial typography (Fraunces, Hanken Grotesk, self-hosted), measured AA contrast, full keyboard navigation, TravelAgency and TouristTrip structured data, mobile Lighthouse above 90. Delivered compiled (static HTML, relative paths) with its Vite + TypeScript source, where all copy is centralised.
Screenshots
Archive contents
noctis-aurores-html-css.zip105 files · 968 Ko
- README.md5 Ko
- THIRD-PARTY-NOTICES.txt2 Ko
- a-propos.html39 Ko
- assets/create-CHUNXTY_.js2 Ko
- assets/fallback-CdljOk5b.js3 Ko
- assets/finish-D-DObbXH.css25 Ko
- assets/finish-DhDaHjpU.js29 Ko
- assets/fraunces-latin-ext-opsz-italic-CGbN9UgK.woff270 Ko
- assets/fraunces-latin-ext-opsz-normal-CJcjJNj7.woff258 Ko
- assets/fraunces-latin-opsz-italic-lSdLDfvT.woff280 Ko
- assets/fraunces-latin-opsz-normal-DihXLNYH.woff266 Ko
- assets/fraunces-vietnamese-opsz-italic-DxWqP7Ku.woff222 Ko
- assets/fraunces-vietnamese-opsz-normal-Czevyj-6.woff219 Ko
- assets/hanken-grotesk-latin-ext-wght-normal-Dg-wlmqe.woff219 Ko
- assets/hanken-grotesk-latin-wght-normal-CaVRRdDk.woff234 Ko
- assets/hanken-grotesk-vietnamese-wght-normal-CHiFlh_0.woff29 Ko
- assets/index-D32Tvlm2.js4 Ko
- assets/index-gbtzh1CI.css9 Ko
- assets/page-DPtWlLSF.css4 Ko
- assets/page-RstTNYBl.js1 Ko
- assets/preload-helper-CRzLMJPS.js1 Ko
- assets/sky-BfHgOLqV.js533 Ko
- assets/stars-B2EcOksB.bin36 Ko
- expedition-islande.html49 Ko
- expedition-laponie.html49 Ko
- expedition-lofoten.html48 Ko
- favicon.svg1 Ko
- fonts/OFL-Fraunces.txt4 Ko
- fonts/OFL-Hanken-Grotesk.txt4 Ko
- index.html65 Ko
- journal-lire-une-prevision.html38 Ko
- journal-nuit-polaire.html38 Ko
- journal-photographier-aurore.html38 Ko
- journal.html37 Ko
- mentions-legales.html37 Ko
- og.jpg68 Ko
- robots.txt1 Ko
- sitemap.xml1 Ko
- source/.gitignore1 Ko
- source/a-propos.html1 Ko
- source/expedition-islande.html1 Ko
- source/expedition-laponie.html1 Ko
- source/expedition-lofoten.html1 Ko
- source/index.html1 Ko
- source/journal-lire-une-prevision.html1 Ko
- source/journal-nuit-polaire.html1 Ko
- source/journal-photographier-aurore.html1 Ko
- source/journal.html1 Ko
- source/mentions-legales.html1 Ko
- source/package.json1 Ko
- source/public/favicon.svg1 Ko
- source/public/og.jpg68 Ko
- source/src/ambience.ts6 Ko
- source/src/booking.ts4 Ko
- source/src/content/about.ts2 Ko
- source/src/content/expeditions.ts10 Ko
- source/src/content/home.ts7 Ko
- source/src/content/journal.ts5 Ko
- source/src/content/legal.ts2 Ko
- source/src/content/refuges.ts2 Ko
- source/src/content/site.ts2 Ko
- source/src/content/types.ts1 Ko
- source/src/finish.ts2 Ko
- source/src/header.ts1 Ko
- source/src/home.ts5 Ko
- source/src/narration/reveal.ts2 Ko
- source/src/narration/timeline.ts3 Ko
- source/src/page.ts1 Ko
- source/src/render/booking.ts3 Ko
- source/src/render/home.ts9 Ko
- source/src/render/html.ts2 Ko
- source/src/render/index.ts1 Ko
- source/src/render/layout.ts2 Ko
- source/src/render/meta.ts2 Ko
- source/src/render/pages.ts12 Ko
- source/src/render/route.ts2 Ko
- source/src/scene/create.ts2 Ko
- source/src/scene/data/constellations.ts1 Ko
- source/src/scene/data/stars.bin36 Ko
- source/src/scene/fallback.ts4 Ko
- source/src/scene/glsl/common.glsl2 Ko
- source/src/scene/glsl/sky.frag.glsl6 Ko
- source/src/scene/glsl/sky.vert.glsl1 Ko
- source/src/scene/glsl/snow.frag.glsl1 Ko
- source/src/scene/glsl/snow.vert.glsl1 Ko
- source/src/scene/glsl/stars.frag.glsl1 Ko
- source/src/scene/glsl/stars.vert.glsl2 Ko
- source/src/scene/presets.ts2 Ko
- source/src/scene/sky.css1 Ko
- source/src/scene/sky.ts12 Ko
- source/src/scene/stars.ts2 Ko
- source/src/scene/terrain.ts1 Ko
- source/src/styles/base.css2 Ko
- source/src/styles/components.css6 Ko
- source/src/styles/finish.css5 Ko
- source/src/styles/home.css12 Ko
- source/src/styles/layout.css1 Ko
- source/src/styles/main.css1 Ko
- source/src/styles/pages.css5 Ko
- source/src/styles/shared.css4 Ko
- source/src/styles/site.css2 Ko
- source/src/styles/tokens.css4 Ko
- source/tsconfig.json1 Ko
- source/vite.config.ts4 Ko
- LICENSE.md1 Ko
Tags
Updated on October 19, 2026.
In the same spirit
Complete free website for a real estate agency with real photos: filterable, shareable listings, mortgage calculator with notary fees, and a seller estimate by district.
- Tailwind
- React
- CSS
- WordPress
Complete free website for a car repair garage with real photos: shareable online quote with parts and labour, maintenance plan with the technical inspection deadline, and booking that carries the quote over.
- Tailwind
- React
- CSS
- WordPress
Complete free website for a barbershop with real photos: booking that adds up service durations, barber choice, free slots and live opening status.
- Tailwind
- React
- CSS
- WordPress
Complete free website for a seafood restaurant with real photos: menu filterable by diet with allergens, live opening status and slot-based booking.
- Tailwind
- React
- CSS
- WordPress