3dtours
cd9dd28adc
The award card was a 340px column with a 46px gap to the copy, which left the photograph the whole point of the card small and the two halves of the hero visibly apart rather than one composition. The column is now 440px and the gap 24px, so the card is a third again as wide and sits closer to the headline. Measured on the built app at 1280px: .lp-award 440px wide (was 340), and the photo box inside it 410px (was 310) — 440 less the 1px border and 14px padding on each side. At 4:5 the image goes 387.5px tall to 512.5px. The copy's right edge is now 824 against the card's left edge 848, where before it was 902 against 948: the same 24px of air between them, but the copy's right edge moved 78px left and the card 100px left, so the hero reaches further across and the extra width is photograph rather than margin. The stacking breakpoint below 980px carried the same 340px cap, which would have made the card narrower than the column it replaces; raised to 440px to match. Measured at 900px: the card stacks under the copy at 440px wide. Verified: award-column-probe.cjs (scratchpad) — 18/18 on http://localhost:8090, with the width check now 440 and the geometry line reading copy.r=824 card.l=848. landing-test.cjs clean, lp-arrows-test.cjs 33/33, landing-rating-test.cjs 21/21, landing-photo-guard-test.cjs 21/21 — 0 fail against the rebuilt app. web tsc --noEmit clean. Dark and light themes both eyeballed on the built app (award-hero-dark.png, award-hero-light.png). ponytail: the width is a literal in two places — the grid column and the 980px cap — rather than a custom property, because the two are the same value today and a token would need the media query to read it too; when a third width shows up, lift both to --lp-award-w. The light-theme box-shadow is still the dark card's rgba(0,0,0,0.35); widening the card makes it no more or less wrong, so it is left as it was.
RecipesCam
RecipesCam is a camera and photo-editing app built around recipes — reusable
looks that carry a film simulation plus a full set of adjustments. You shoot or
open a photo, dial in a look, and keep it as a recipe you can apply again, share
as a .recipe file, or save to your account.
It ships twice from one repository: a React Native (Expo) app for iOS and
Android, and a self-contained web build under docker/ that runs the same
render pipeline in the browser.
What it does
- Shoot with a recipe applied. Live viewfinder, GPS-tagged captures, and the recipe baked into the saved file.
- Film simulations. Built-in looks — PROVIPES, VELVIPES, CLASSIC CHRIPES, CLASSIC NEGIPES, ASTIPES, ETERNIPES, ACRIPES, B&W HIGH CONTRAST and the LC STREETLIFE pair — each with its own grain and tone curve.
- The full adjustment set. Exposure, contrast, highlights and shadows, saturation, colour temperature, clarity, grain, and an HSL mixer with a colour picker that samples straight off the photo.
- Geometry. Crop to a fixed ratio or free-form, quarter turns, and a straighten ruler, plus printed frames (classic border, retro instant, wall frame portrait/landscape).
- Finishing. Watermark and GPS stamp, EXIF carried through the export, JPEG written with a proper 300 DPI JFIF header.
- On-device upscaling. A Real-ESRGAN pass runs locally when an export asks for more pixels than the source has — no server sees the photo.
- Recipes. Save, favourite, export and import
.recipefiles; the web build keeps them in your account, the phone build also keeps them on device.
The two builds
| Build | Where | Stack |
|---|---|---|
| iOS / Android | repo root | Expo + React Native, @shopify/react-native-skia for the render pipeline, NativeWind for styling |
| Web | docker/ |
Vite + React, CanvasKit (canvaskit-wasm) for the same pipeline, Fastify + SQLite API for accounts and recipes |
The render engine is shared by design: the web build compiles the app's own
src/utils/* and type definitions unchanged, with @shopify/react-native-skia
aliased to a CanvasKit shim (docker/frontend/src/engine/skiaShim.ts). A look
looks the same on both because it is the same code.
Running the web build
cd docker
cp .env.example .env
docker compose up -d --build
# → http://localhost:8090
Photos never leave the browser: grading, framing, watermarking and JPEG
encoding all run in the visitor's tab; the API only stores accounts and recipe
JSON. See docker/README.md for the layout and the proxy setup.
Running the app
npm install
npx expo start # Expo Go / dev client
npx expo run:android # or run:ios for a native build
Repository layout
App.tsx, src/ the Expo app: screens, tool rail, viewfinder, shaders
docker/ the web build (frontend + API + compose file)
frontend/shared/ vendored copies of the app's types and utils
frontend/src/engine/ CanvasKit shim, export engine, super-resolution
docs/ privacy policy
THIRD_PARTY_NOTICES.md licences of the bundled fonts, models and libraries
Licence
See LICENSE and THIRD_PARTY_NOTICES.md.