Northlight

Northlight is an Astro one-page theme for agencies, consultancies and studios that delivers a cinematic, scroll-driven experience using plain CSS and a single vanilla JS file — no UI framework and no animation library.

What is Northlight?

Northlight is a free, MIT-licensed one-page website theme built on the Astro framework, aimed at agencies, consultancies and studios that want a dark, cinematic landing page. It takes your brand name, contact details and section copy as input — configured through a config file and per-section Astro components — and produces a static site that builds to a dist/ folder deployable to any static host. It is designed and built by Sven Esser, a full-stack and Web3 developer, and is available as an Astro starter template (repo: Sv3nskie/astro-theme-northlight).

Key Features

• Scroll choreography that rewinds — pinned chapters including a stacked services deck, a horizontal statement section and client stories, plus word-by-word lighting, parallax and a 3D plate stack, all driven by scroll position so every animation plays backwards on scroll-up.
• Intro curtain — shown on first visit once per session; appending ?intro to the URL replays it.
• Custom cursor and magnetic buttons — pointer interactions handled entirely by the single vanilla JS file.
• Logo marquee and animated counters — additional motion elements for social proof and metrics.
• Fully responsive — full-screen mobile menu and svh-based pinning so mobile browser bars never hide pinned content.
• Accessibility — honors prefers-reduced-motion by rendering everything in its final state, and includes a skip link and semantic landmarks.
• Zero dependencies beyond Astro — styling is plain CSS (nocturne.css for color, type and spacing tokens; main.css for layout and animation states) with no Tailwind or UI library.
• Config-driven branding — the brand name in src/config.ts automatically drives the logo, the intro curtain and the large footer wordmark.

Who is it for?

• Design and development agencies: launch a one-page studio site with chaptered, scroll-driven storytelling without adding a JS animation framework.
• Consultancies: present services in a pinned, stacked deck format and client stories as a distinct section.
• Freelance studios and small teams: start from an Astro starter (npm create astro@latest -- --template Sv3nskie/astro-theme-northlight) and swap copy and imagery in per-section components.
• Static-host deployers: use the included GitHub Actions workflow, which publishes the demo to GitHub Pages.

Use cases

• Agency portfolio landing page: replace the src/config.ts brand name, contact details, SEO title/description and share image, then swap section copy and Unsplash placeholder photography in src/components/*.astro before launch.
• Consultancy services showcase: use the pinned stacked services deck and animated counters to present offerings and metrics in one scroll.
• Studio client stories: repurpose the client stories chapter for testimonials with reversed scroll playback.

How does Northlight work?

Create a project with the Astro template command, run npm run dev locally, edit src/config.ts for branding and SEO, section components for copy and images, and the CSS/JS files for tokens and behaviour, then run npm run build to output dist/ for any static host.

Pricing

Northlight is MIT licensed and free to use; keeping the small "Theme by Sv3n" credit in the footer is appreciated but not required.

FAQ

Is Northlight free to use?

Yes. Northlight is released under the MIT license, so you can use and modify it freely. The developer asks that you keep the small "Theme by Sv3n" footer credit but states it is appreciated rather than required.

What framework is Northlight built on?

Northlight is an Astro theme. It uses plain CSS and a single vanilla JavaScript file with no UI framework or animation library, so its only dependency beyond Astro is Astro itself.

Can I replay the intro curtain?

The intro curtain appears once per session on first visit. To see it again, append ?intro to the page URL, which triggers the curtain to replay.

Does Northlight respect reduced-motion settings?

Yes. The theme honors prefers-reduced-motion, rendering all animated elements in their final state for users who request reduced motion. It also includes a skip link and semantic landmarks for accessibility.

Can I launch with the placeholder images?

The photography in the theme comes from Unsplash as placeholder content. The README advises replacing it with your own images before launch.