Ephyra

How it's made

1. 01

   A dive written as data

   Six zones from 3 to 870 metres, a spline of named knots for the path, and a table of camera cues, colours and moments placed by scroll position. The words live in one file and the descent in another, so the story changes without touching code.

2. 02

   A jellyfish from equations

   Her bell, lappets, gonads, oral arms and tentacles are generated from equations; the tentacles and arms are strands simulated each frame. One shader shades the jelly: nearly clear face-on, dense only at the silhouette, her own light at the rim, a wet sheen instead of a hotspot.

3. 03

   Worlds that load as you sink

   The shallows (caustics, sun rays, a school of fish, a manta), the twilight, the sea floor, a cave meshed from a signed-distance field in a web worker and a crystal oasis with a mirror lake. Each world is compiled before it appears, so nothing stalls mid-scroll.

4. 04

   A cave built from the path

   The tunnels, the three domed chambers and the cavern are carved along the same knots the camera follows. Move a knot and the rock, the crystals and the glowing chamber numbers follow.

5. 05

   Words in light

   The EPHYRA wordmark is drawn into the scene so the jellyfish swims through it and the bell bends it like a lens; the step numbers are projected onto the cave walls and the closing wordmark onto the cavern.

6. 06

   A poster before the 3D

   The water, the wordmark and a cutout of the jellyfish are rendered from the engine and painted from the HTML before any script, and one still per zone serves reduced motion and browsers without WebGL.

7. 07

   Smooth on a laptop

   A quality ladder adjusts resolution, bloom and detail to the device; nothing reads layout or restyles the page inside the frame loop; shader programs compile out of the way; budgets for scripts, stills and the poster are checked by a script.

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/

• index.html

• package.json

• package-lock.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

• eslint.config.js

• jsconfig.json

• .gitignore

• README.md

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

• 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.

• CHANGES.md

  Changelog. What changed in each version of the kit.

• LICENSE.md

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

See a real zip, opened

Specs

Stack

Vite 8.2 · React 18.3 · React Router 7.18 · three.js 0.186 · Lenis 1.3 · Tailwind CSS 3.4 (base layer) · Plain JavaScript (JSX) · GLSL shaders · Web Audio (synthesised) · Procedural geometry (no model file) · Anton and JetBrains Mono (self-hosted)

File size

3.7 MB

Triangles

389,196

Load time

2.5 s (Measured on a production build in Chrome on an RTX 3060 desktop at 1440 x 900: the opening view reaches 90 percent of its triangles at a median of 2.5 s over three cold loads (the page is fully ready at 2.9 s). Triangles: the most one view draws in its main pass (the crystal gallery just before the oasis); the opening view draws about 63k. Download: about 100 KB of script (gzipped) to start; three.js and each world load as the visitor scrolls, and no model, video or audio files.)

Browser

Needs WebGL 2 (current Chrome, Edge, Firefox and Safari on desktop and phones). Without it, or with reduced motion, the page shows a still for each depth and every word and the contact form still work. Sound starts only when the visitor turns it on. Phones get a lighter quality setting and the whole story. Checked from a fresh unzip in Chrome on a real GPU at 1440 x 900 and 390 x 844: every zone, the case pages, the menu and the 404, with no errors.

Released

Oct 2026

Version

1.0.0

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