AUROALIS – A content-rich landing page and article template with a WebGL aurora hero.
A clean, editorial template built with Tailwind CSS 4 and vanilla JavaScript — an animated WebGL aurora hero, a boxed layout system, a full article/report page, and a custom 404. No frameworks, no build step required to ship.
About this template
AUROALIS is a clean, content-rich template themed as a polar research studio working at the intersection of atmospheric science, deep-sky optics, and high-latitude exploration. The layout, components, and design system are generic enough for any modern marketing or studio site — swap the copy and imagery and it's yours.
The centerpiece is an animated WebGL aurora hero: an in-shader film-grain gradient that pauses when the tab is hidden. White content panels sit on a soft stone canvas with intentional over-the-edge breakouts, joined by scroll-triggered animations, an accessible focus-trapped contact modal, an FAQ accordion, and a keyboard-navigable carousel.
Three pages ship out of the box: a landing page, a full article/report layout, and a custom 404 that reuses the aurora hero. No frameworks, no build step required — the compiled CSS is committed, so you can upload the files to any static host as-is. Run npm run dev for live reload while customizing. Free under the MIT license.
Features
- Animated WebGL aurora hero — in-shader film-grain gradient, pauses when the tab is hidden
- Three pages — landing page, article/report layout, and a custom 404
- Boxed layout system — white panels on a soft stone canvas with over-the-edge breakouts
- Scroll-triggered animations with stagger support (respects prefers-reduced-motion)
- Accessible popover/modal — focus-trapped, backdrop-blurred contact dialog
- Animated FAQ accordion and a keyboard-navigable card carousel
- Smooth in-page anchor navigation
- Article layout with lead image, in-text figures, pull quote, and byline
- Tailwind CSS 4 with custom design tokens in a single @theme block
- Vanilla JavaScript — no runtime frameworks
- Inter + Newsreader font pairing for an editorial feel
- Responsive, mobile-first with a hamburger menu
- Pre-compiled CSS — works without Node.js to deploy
- Fully accessible — skip link, ARIA attributes, focus indicators, semantic HTML
License
What you can do
- Edit the template files to create your own End Product from it.
- Create an unlimited number of your own End Products with it.
- Use this/these End Products for yourself, your company or your clients.
What you can't do
- You are not allowed to resell the template "as-it-is" or offer it for free.
