Morrow

How it's made

1. 01

   The mockup, made live

   The hero, the nav and the dashboard panel were fitted to a landing page mockup, box for box, so at rest the page is the mockup. Then the dashboard was made to work and the scroll was turned into a day.

2. 02

   One picture, made deep

   A disparity map turns the valley picture into a 225,024 triangle mesh whose vertices sit on their own pixel rays. At rest it is the poster exactly; any camera move gives true parallax, near grass against far hills.

3. 03

   A whole day from one photograph

   The scroll is one number, the time of day, and every value that changes with it is data: eight looks, the sun's path, the camera, the clock. One shader takes the photograph's sun out, draws a new one on its path, swaps the sky and adds haze, drifting mist, light shafts and seeded stars.

4. 04

   A display built in code

   The glass display is one profile swept round a rounded rectangle, 7,824 triangles, lit by an environment made from the graded picture. Its screen is the real HTML dashboard, moved every frame by a CSS matrix3d from the same camera, so the text stays crisp and clickable.

5. 05

   A dashboard that works

   Priorities, a focus timer, notes saved as you type, projects, a calendar, spaces, search and keyboard shortcuts, in one store saved in the visitor's browser. The morning tour plays it by itself, and scrolling back undoes the tour's changes.

6. 06

   Chapters that hand off

   Each hour is a pinned stage that hands its object to the next: the dashboard's ring becomes the midday ring, and the afternoon cards float through the same lens as the valley, then gather into the golden hour's deck.

7. 07

   Light on the network and the GPU

   The first paint is a poster written into the HTML at build time, and the first load of the page is 121.2 KB of gzipped JavaScript; three.js and the scene come later. A quality ladder steps down through five rungs, and a GPU that still can't keep up gets posters of each hour.

In this kit

• src/

  Full source. The complete site as its own project, ready to run.

• public/

  Media and assets. The images, clips, textures and icons the page loads.

• scripts/

• base44/

• index.html

• package.json

• package-lock.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

• eslint.config.js

• README.md

  Start here. What's inside and how to run it.

• CHANGES.md

  Changelog. What changed in each version of the kit.

• HOW-IT-WAS-MADE.md

  How it was made. The build step by step, and a recipe to make your own.

• ADAPT.md

  Adaptation prompt. Fits the kit to your client's brand in an AI builder.

• RESKIN.md

  Re-skin guide. Colors, type, copy and media, changed file by file.

• PROVENANCE.md

  Provenance. Where every model, texture and image came from.

• THIRD_PARTY.md

  Open-source credits. Every library and font inside, with its license.

• LICENSE.md

  Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack

Vite 8.3 · React 18.3 · React Router 7.18 · three.js 0.186 · Lenis 1.3 (smooth scroll) · Tailwind CSS 3.4 · Base44 SDK 0.8 (sign-in pages only) · JavaScript (JSX) · GLSL shaders · Depth-displaced photo mesh · Procedural geometry (the glass display) · Self-hosted fonts (Inter and Newsreader) · Python 3 with NumPy and Pillow (asset scripts)

File size

5.8 MB

Triangles

232,848

Browser

Needs WebGL 2 for the living valley and the 3D display. Without it, on a software GPU, with Save-Data on or on a GPU that can't keep up, the page runs on posters of each hour, and every word, link and the dashboard still work. The full scroll (the display travelling, the pinned chapters, the floating cards) is for desktops with a mouse at 1024 px and wider; phones and tablets get the same chapters with the display in the hero as an HTML frame. Reduced motion shows each chapter as a still. Sign-in needs a Base44 app behind it. Tested in headless Chrome at 1440 x 900 and 390 x 844 (touch), with reduced motion and on the static path, with no page errors and no sideways scroll; Safari, Firefox and real phones weren't part of the tests.

Released

Oct 2026

Version

1.0.1

From download to client site

1. 01

   Buy it, or get it with a plan

   Buy this kit on its own, or get every kit in the collection with a plan.

2. 02

   Download the zip

   It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

3. 03

   Run it

   Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

   $npm install && npm run devCopyCopied
4. 04

   Make it your client's

   Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license