Lantern River

Lantern River is a free, one-page HTML/CSS/JavaScript website template for creative studios, where scrolling drives a 3D night river scene in which a glowing lotus lantern floats past lantern-lit shophouses, a covered bridge, a market, a sampan pier and a fireworks bend.

What is Lantern River?

Lantern River is template 634 from templatemo, a one-page layout for a creative studio built around a 3D night river inspired by Hoi An. As the visitor scrolls, a glowing lotus lantern travels down the water and each stop on the river opens one section: intro, studio, work, services, pricing and contact. The template ships as downloadable HTML, CSS and JavaScript files using Three.js, and it is free to download, edit and use for commercial or non-commercial sites. It was added on 22 October 2026 and had 2,071 views and 371 downloads at the time of listing.

Key Features

• Scroll-driven 3D river journey — a single page where a lotus lantern floats past shophouses, a covered bridge, a market, a sampan pier and a fireworks bend, each stop opening one content section.
• Lantern-card work gallery — the work section is a string of hanging lantern cards that light up when clicked.
• Folding-paper services and lantern pricing — services sit on folding paper ribs that open on click, and pricing is presented as a set of three paper lanterns.
• Reflective water scene — clear water reflects the town while koi swim around the visitor's lantern, with three gentle background sounds to choose from.
• Free Drift mode — visitors steer one of seven lanterns with a speed boost and a small speedometer, plus pinch zoom or a joystick on phones.
• Tech stack — HTML, CSS, JavaScript and Three.js, with local copies of the Three.js files and only Google Fonts loaded online.
• Accessibility and responsiveness — fully responsive layout that supports reduced motion.
• Validated contact form — the contact form includes validation and on-screen notices.

Who should use Lantern River?

• Creative studios and design agencies: present intro, studio, work, services, pricing and contact content in a single narrative page instead of a conventional grid site.
• Interactive portfolio owners: use the lantern-card work section and Drift mode to turn a portfolio into something visitors can explore and play with.
• Front-end developers building with Three.js: start from a working example of scroll-linked 3D scene transitions with local Three.js files rather than a CDN dependency.
• Small service businesses: use the services and pricing sections with the validated contact form as a self-contained one-page site.

What can you do with Lantern River?

• Agencies: replace the six default sections (intro, studio, work, services, pricing, contact) with real studio copy and project links while keeping the river navigation.
• Interactive showcase: enable Drift mode so visitors steer one of seven lanterns around the scene, including on phones via joystick or pinch zoom.
• Client-ready launch: deploy the validated contact form with a PHP contact script to capture enquiries directly from the one-page layout.

Pricing

Lantern River is 100% free to download, edit and use for both commercial and non-commercial sites.