2.5D landing page · Website template

Strata

A light SaaS landing page whose 2.5D isometric hero builds itself as you scroll: blocks drop onto a platform chapter by chapter, then the stack pulls apart into an exploded view.

Live demo

Freewith your Templates.party account · ZIP download + MCP access

By Templates.party

Illustrated preview of the Strata 2.5D isometric landing page template

Live demo

Platform: HTML + Tailwind
Motion: CSS scroll-driven animations
3D: CSS only, no WebGL

What’s inside

A hero that assembles on scroll

The hero is a small isometric world made of plain HTML boxes in CSS 3D, with no canvas, WebGL or video. Scroll drives it through CSS scroll-driven animations: data slabs drop in, function cubes snap into a grid, an auth tower turns into place, an edge gateway lands and the whole platform separates into layers. Browsers without scroll timelines get the same motion from a tiny script, and reduce motion shows the finished scene. After the hero come platform layers, features, a three-step walkthrough, pricing, FAQ and a sign-up section.

Scroll-built hero

Five chapters on a sticky stage: database, functions, auth, edge, then an exploded view of the whole stack.

Open in the demo

Platform layers

The four layers of the fictional product, one card each.

Open in the demo

Features

Six feature cards that rise in as they enter the screen.

Open in the demo

Pricing

Three plans with a highlighted middle plan.

Open in the demo

FAQ and sign-up

Accordion FAQ and a closing call to action with an email form.

Open in the demo

Sections on the page

Header with mobile menu
Hero: sticky 2.5D isometric scene + 5 scroll chapters
Platform layers
Features
How it works: three steps
Pricing
FAQ
Call to action with sign-up form
Footer

Built in

Isometric scene built from plain HTML boxes in CSS 3D, every block with shaded top, left and right faces
Driven by CSS scroll-driven animations (animation-timeline), so scrolling never runs JavaScript in supporting browsers
A 1 KB fallback script plays the same motion in browsers without scroll timelines
Reduce motion shows the finished scene and a simple list of chapters, with nothing moving
Change timing and fly-in direction per block with one class and four CSS variables
Responsive from 360 px to 1440 px, self-hosted fonts and no framework

Palette & type

Cloud#F5F6FB
Ink#171A33
Iris#5B67F0
Mint#2FB58E
Peach#F07A52
Butter#E9B230

Bricolage Grotesque + Instrument Sans (self-hosted, OFL)

Each block colour has three shades (top, left, right) in tailwind.config.cjs, so recolouring a block keeps its 3D lighting.

In the ZIP

index.html: the full landing page with the 2.5D hero
assets/: compiled CSS, strata.js (menu + fallback), fonts, favicon and the CTA illustration
tailwind.config.cjs, src/input.css and package.json to rebuild the CSS
README, AGENTS.md and LICENSE-THIRD-PARTY
LICENSE: commercial use, unlimited projects, client work

Sample content

Strata, its plans, commands and copy are fictional sample content, and the CTA illustration is AI-generated. The demo form sends nothing. Replace them with your own product and connect your sign-up form before you launch.

License

Free with your Templates.party account, no subscription. Use it for your own business or for client work, on unlimited projects. You can’t resell or redistribute it as a template. Full terms.

MCP access included

Your free account includes MCP access: sign in once with your email and AI assistants like Claude, ChatGPT or Cursor can read, customize and download your templates. New ones join the same connection on their own.

Keep exploring