Skip to content

New400 animated icons, 75 free. See the icons ›

Nexus UI
Get Pro

Last Light, a Next.js template

game landing page

A landing page for an invented open-country western, where every picture is drawn live in characters. The hero is a full-screen scene that spills out from the sun as the page loads, with birds crossing the sky, fireflies over the meadow and a warm lantern that follows the pointer. Below it come the story with a short list of facts, a second scene of the villain with embers and wheeling vultures, a third scene of the gang with a hotspot on every rider and a matching roster, four gameplay pillars, a wishlist call to action and a footer. The scenes are WebGL 2 with a still 2D fallback and need no animation library. IBM Plex Mono and Libre Caslon Display are self-hosted, and the three pictures ship with the template. All names, places and dates are invented sample content.

  • Gaming
  • Advanced
  • 1 page
  • 8 sections
Last Light home page
Open it live

Inside the page

Screens from the live template. The first one is open to everyone; Pro unlocks the other 3.

What's in it

Sections, top to bottom

  1. 1Live Character Scene Hero
  2. 2Story and Facts
  3. 3Villain Scene
  4. 4Gang Scene With Rider Hotspots
  5. 5Rider Roster
  6. 6Gameplay Pillars
  7. 7Wishlist Call to Action
  8. 8Footer

Built in

  • Full-screen hero scene drawn live in characters with WebGL 2, spilling out from the sun when the page loads
  • A warm lantern follows the pointer over every scene, and a tap leaves one on touch screens
  • Life inside each scene: birds and a hawk, fireflies, embers, wheeling vultures, heat haze and drifting dust
  • Gang scene with a keyboard-focusable hotspot on every rider, a name card and a matching roster that move the lantern together
  • Scenes only draw while on screen, and the lower two draw themselves in the first time they scroll into view
  • A still 2D canvas version when WebGL 2 is missing, and no movement at all with reduced motion
  • IBM Plex Mono and Libre Caslon Display self-hosted (both Open Font Licence), no Google Fonts and no animation library
  • Every word and scene setting lives in one data file; swap the pictures and tune the scene settings to make your own

Run it on your machine

  1. Get the code

    Get Pro or lifetime access, then download the source zip from this page.

  2. Install

    In the project folder:

    $ npm install

  3. Start it

    Then open localhost:3000.

    $ npm run dev

More templates

See all templates

Make Last Light yours

Included in Pro, $49.99 a year, along with every other template. Swap in your words and colours and ship it.

Live preview