This site uses cookies

Some keep the store working, like sign-in. Meta's pixel helps us measure our ads, and it stays off unless you accept. Cookie policy

Launch price: Lifetime is $229 for every kit and every block until Sun, Nov 15, 11:59 PM PT. Then it's $249.Get Lifetime

LM-56Film & photo

Fieldmark

A wildlife and landscape photography studio as one day in the field: a camera bedded in moss in live 3D, photographs that move in depth, a viewfinder you shoot with, and a night sky at the end.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

The page opens on cream in tall Anton capitals, WAITED FOR. NEVER STAGED., over an arc of rounded photo cards that never stops drifting, with a photoreal camera bedded in moss in front of it that turns toward the pointer and flashes when clicked; point at a card and the line stops so it can be opened, drag or swipe it, or pick a category and it glides to that set. The whole page is one day: a clock in the nav runs from first light to midnight and a light layer over the page changes with it, dawn mist, cloud shadows, snow, sun through leaves, golden light, blue hour with fireflies. Scroll and the view dives into the camera's lens and opens on a living photograph of a mountain tarn. Five places fill the screen as giant words with their photographs moving in depth inside the letters, then all fifteen frames run in two rows. The fox in falling snow comes up on a dawn clock, then YOUR TURN hands over a live viewfinder with aperture, shutter and ISO rings, click to focus, real depth of field and a verdict on every frame. The studio is a light table with a morning's roll and a loupe; expeditions turn a globe lit by the real sun, with a 24-hour light ring per trip; prints hang at true size on a room wall whose light you set by the hour; the commission brief is built one question at a time, sets the page's weather by season and ends as a stamped postcard; the footer falls into night with a long exposure of the stars. The brief sends nothing until you connect a form service, and Add to bag is a demo. Phones get their own layouts and swipes, browsers without WebGL get stills and a flat map, and reduced motion calms it all down. For photographers, guides, galleries and outdoor studios who want a site people stay on.

How it's made

  1. A day as the structure

    Every chapter has a time and a light, from 05:48 first light in the hero to 23:40 night in the footer. The nav shows the clock, a canvas weather layer over the page follows the chapter, and the page ends at night.

  2. A photograph that turns

    The camera in moss is a generated product photo, cut out and re-matted so the foliage stays solid, then turned into a mesh with an image-to-3D model. A solver finds the camera that makes the mesh's silhouette match the photo and projects the photo onto it, so it stays a photograph and still moves in 3D within about 12 degrees. The solve and matte scripts are in the kit.

  3. One stage under the page

    A single WebGL2 canvas draws the misty plate, the drifting arc of cards on a wide lens and the hero object on a long lens, then the dive into the lens and the globe. It starts on a low tier, steps up while frames keep up, and sleeps when nothing of it is on screen.

  4. Photographs with depth

    Every photograph has a depth map computed locally with Depth Anything V2. One offscreen WebGL2 context draws each big photo as a view and copies it into a canvas in the page, giving pointer parallax, mist between ridges, alpenglow and weather that falls behind the subject.

  5. Hands-on chapters

    A live viewfinder with real depth of field, bokeh, zebras and synthesised shutter sounds; a light table whose roll of 36 frames is made at runtime from two photos; a globe lit by the sun's real position; a prints room calibrated to centimetres with window light that moves with the hour.

  6. Night from day

    The footer's night ridges are an AI edit of the day plate, so the composition matches, with the stars removed by a median filter masked by the depth map. The page draws its own stars turning about the pole as a long exposure that grows while you stay.

  7. Phones and fallbacks

    Phones get five cards, smaller textures, swipeable rows and tap-to-see on the light table, with the 3D capped at the medium tier. Without WebGL the hero is a still and the globe a flat dotted map; reduced motion stops the drift and shortens the scrubbed chapters.

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.

  • tools/

    Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

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

  • ASSETS.md

    Asset list. Every image and font in the kit, where it came from and its license.

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

  • package.json

  • package-lock.json

  • index.html

  • vite.config.js

  • tailwind.config.js

  • postcss.config.js

  • .env.example

  • .gitignore

See a real zip, opened

Specs

Stack
Vite 8.2.4 · React 18.3.1 · three.js 0.171.0 · Tailwind CSS 3.4.19 · topojson-client 3.1.0 · world-atlas 2.0.2 · Anton and Inter (self-hosted · OFL)
File size
8.9 MB
Triangles
126,329
Browser
Tested in desktop Chrome (headless, with a GPU) at 1440 x 900 and at phone size 390 x 844 with touch, without WebGL and with reduced motion. Needs WebGL2 for the 3D and falls back to stills without it. Not tested on real phones, in Safari or in Firefox.
Released
Nov 2026
Version
1.0.0

From download to client site

  1. 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. 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. 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 dev

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

FIELDMARK is a fictional studio; every word was written for the kit, and the layout follows a design comp the studio was given as its brief. All 15 photographs, the plates, the prints room and the camera-in-moss product photo were generated with GPT Image 2.6 through Higgsfield, and the hero mesh was made from that photo with Tripo H3.1 through Higgsfield, then projected and compressed in code. The depth maps were computed locally with Depth Anything V2 Small (Apache-2.0). The globe's land is Natural Earth (public domain). Anton and Inter are under the SIL Open Font License. No stock images and no people. Written with an AI coding assistant (Claude Code) under Parallel's direction.

Buy LM-56 Fieldmark

Single kit

Price: $49once

By buying you agree to the Terms and License.

Included with Annual and Lifetime.

Or every kit for life, $229.

Launch price until Sun, Nov 15. Then $249.