Natureplore prototype
The v1 prototype: find nature near you, understand its state, and help it.
Next.js (App Router) and TypeScript, Tailwind v4, deployed on Vercel.
npm install
npm run dev # http://localhost:3000
npm run tokens # regenerate app/tokens.css from the design system
npm run build
Where things come from
| Thing | Source |
|---|
| Design tokens | docs/design.md frontmatter, generated into app/tokens.css by scripts/tokens.mjs. Edit the design system, never tokens.css. |
| Base map data | public/base-geo.js, copied from ../design flow/base-geo.js. Regenerate it from ../design flow/base-geo-src/. Vector data from OpenStreetMap, no tile server. components/RegionMap.tsx draws it with Leaflet on the Map tab. |
| Background photograph | public/img/forest-olena-bohovyk.jpg, from ../docs/assets/. |
| Intro photograph | public/img/intro-waterfall.webp, the waterfall from the "Logo 3-2" intro board, 1920 wide. |
| Intro shading | public/img/intro-shade.webp, the edge shading and grain of the intro logo, baked from the board's SVG filters (d-model, e-grain) so nothing is filtered live. Its rim is in marker-label-deep, to match the logo's marker colours; a change to the logo's shape or colours needs a new bake. |
| Place tiles | public/img/place-*.jpg, the soft fields the version 6 boards use where a place photograph will go. |
| Screens and states | The wireframe canvas, https://claude.ai/artifact/S5XrKyZEsHDqYnrxfLM98F (phone, tablet and desktop boards, codes A0 to K7). |
| Flows | ../design flow/Natureplore_User_Flows_v1.md, generated from ../design flow/flows-src/. |
| Brand | ../BRAND.md. |
Scope
v1 only. Three tabs: Routes, Learn, Saved. No booking, no guided walks, no
guides, no payments, those are v2 (flows G to K, reporting a sighting included).
There are no accounts. Saving keeps a route on this device, and nothing asks for
sign-in or an email. Which screens exist, and what they say, follows the flow and
IA redesign in ../.forge/briefs/flow-ia-redesign-final.md.
Notifications only ever report a change of state in something the person
started. No streaks, no engagement prompts.
Layout
app/page.tsx opens with A0 · Welcome, logo applied, the logo intro (below), and then shows A0 · Welcome, which scrolls into A0-2 · Welcome (components/Welcome.tsx). It opens as A0: the green field and the three statements, which blur in word by word. Scrolling moves the statements to their A0-2 places, opens the forest photograph in a growing circle, brings in the nav and the green action, and fades the map card in last. The page is laid out as A0-2 in app/welcome2.css; app/welcome.css holds the field, the intro and the scroll choreography, where every A0 position is the "from" of a paused animation. components/WelcomeScroll.tsx feeds them one eased scroll progress value, so the page glides after the scroll, and grows the circle with transforms only (a round lens scaled up, the photograph inside it scaled by the inverse), so nothing is repainted on the way. A person who asked for reduced motion, or a browser without scripting, gets A0-2 as a still page.components/IntroGate.tsx plays A0 · Welcome, logo applied, the logo intro from the "Logo 3-2" board (components/Intro.tsx), before A0 · Welcome. The welcome only mounts on Continue or Skip, so its own opening starts then, and the intro fades away over it. It plays when the site is opened or reloaded, not when someone comes back to the start from inside the app. The forest photograph behind its veil, and the logo assembling itself: the plant, the bird and the mushroom gather into the symbol, then the swan, the snake, the squirrel and the leaf spell out the wordmark. Skip is there the whole time; once the animals have settled, at 8.5s, Replay and Continue come up. The timeline is GSAP in lib/intro-timeline.ts, in the logo's own viewBox units; the logo is components/intro-logo.ts, one piece per animal and letter, clipped from one shared fill in the marker tokens, the colours of the "You are here" tag and dot. app/intro.css sizes the logo with min() and max() as the board does, covering the window and easing back on a narrow screen to stay whole. Reduced motion gets the photograph and the logo fading in, nothing else.components/WelcomeEther.tsx puts a liquid layer over A0's green field: the pointer stirs flows in three green tokens, the field colour stays underneath. It wraps components/LiquidEther.tsx, copied in from React Bits (needs three, loaded after the page). It is not mounted for reduced motion, and it pauses once the forest covers the field.components/WelcomeReveal.tsx lets the forest photograph show faintly through A0's field in a soft circle that follows the mouse, under the liquid layer. Transforms only, mouse and pen only, off for reduced motion.app/welcome/page.tsx is A0-2 · Welcome on its own, the same component with : the statements, one green action and a glass card holding the region map, split layout with the glass nav pill from 1024px.
