postcard-to-playable-journey

Verified@lengkeman0802/postcard-to-playable-journey
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: postcard-to-playable-journey. Run `npx -y @neta-art/neta-search-cli@latest skills use @lengkeman0802/postcard-to-playable-journey --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Use in Neta Studio Open it in Neta Studio and see what people made with it.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @lengkeman0802/postcard-to-playable-journey
Summary

Turn your trip photos into a 3D journey you can walk through, collect, and share.

  • Upload 3 to 8 travel photos and get one connected 3D world you can walk from start to finish.
  • Faces, text, and QR codes in your photos are blurred on your own device before anything is built.
  • Comes with a hero image, chapter cards, postcards, a travel journal page, and a 15-second video to share.
  • Works in 12 languages including Arabic, and reads right-to-left automatically.
  • Best with a real trip: 3 to 8 photos in order, each with a short memory to go with it.
SKILL.md
# Postcard to Playable Journey

Turn a handful of travel photos into **one connected 3D journey** the creator can walk, collect
from and share. Everything runs in the browser: no backend, no upload, no account. Photos are
blurred **on the device** before they are ever used.

Finished reference Work (read it before you build):
**https://neta.art/w/5a6cdefb-1162-48b0-8d48-200145f606a2**

## What it does

A single static web page with a ten-step flow:

1. Enter destination → 2. Upload photos → 3. Review privacy → 4. Arrange chapters →
5. Add one memory per photo → 6. Choose style, time and weather → 7. Generate the connected 3D
journey → 8. Walk it or use Guided Journey → 9. Collect memories in the Journey Journal →
10. Generate a 15-second social video.

Outputs: the playable journey, a 1080×1350 hero image, a Journey Journal, chapter cards,
postcards, a 15 s video (9:16 / 1:1 / 16:9), a ZIP export, publish-to-world, and share-to-X.

## When to use it

Use it when the user wants photos turned into a walkable/interactive 3D page, a "postcard you can
play", an interactive travel journal, or wants the Postcard-to-Playable-Journey template rebuilt,
restyled, translated or extended.

Do **not** use it for: a plain gallery or slideshow (that is a normal web page — see
`create-web-work`); a chat roleplay with a character (`create-roleplay`); a branching visual
novel with its own screen (`create-avg`).

## Stack and hard rules

- **Static, browser-only.** Vanilla ES modules + Three.js. No backend, no build step required;
  `index.html` must open directly.
- **Photos never leave the device.** Decode → re-encode (strips EXIF) → blur → *only blurred
  copies* are used for the 3D world, cards, postcards, video, downloads and publishing.
- **Never fabricate assets.** Demo/scene art must come from the image generation model, not from
  hand-drawn SVG placeholders.
- **Never ship credentials.** Nothing of that kind may appear in the page or in this skill's own
  files — no key material, no access tokens, no connection strings carrying a passphrase.
- **Attribution.** Ship a `ATTRIBUTION.txt` listing vendored libraries and font licences.
- **Degrade, never blank.** Storage falls back to memory when IndexedDB/localStorage is
  unavailable; a boot watchdog shows a readable message if the app cannot start.

## Build steps

### 1. Scaffold the work
```bash
node /mods/neta/neta work init web works/webs/<slug> --title "<Title>"
```
Layout (split files; never cram the page into one HTML file):
```
index.html · css/style.css · css/fonts.css
js/main.js        flow, wizard, HUD, i18n wiring
js/i18n.js        locale table (English is the source of truth + fallback)
js/locales/<code>.js   one file per extra language
js/data.js        demo content, styles, scene kits, interactions
js/store.js       IndexedDB with in-memory fallback
js/photos.js      import, EXIF strip, detect, blur, palette
js/outputs.js     cards, postcards, journal, video, ZIP, publish, share
js/credits.js     reserve / commit / refund
js/world/{world,kits,materials,path}.js
assets/demo/      six demo photos + hero
vendor/           three.js (+ Sky, Reflector), jsQR, mp4-muxer, fonts
```
Self-host Latin fonts; load CJK display fonts in the background with system fallbacks so the page
never waits on a blocked font host.

### 2. Data model
- `project` — destination, title, style, time, weather, and `chapters[]`.
- `chapter` — `{ id, title, memory, kit, interaction, photo }`.
- `photo` — `{ name, w, h, gps, regions[], reviewed, checks{}, scanned }`.
- `journal` — `{ memories, moments, captures, postcards, promise }`.
Persist with IndexedDB; keep an in-memory fallback and a heartbeat so a tab closed mid-generation
can be refunded.

### 3. Privacy pipeline (the part that must be right)
1. Decode the file; re-encode it (this is what strips EXIF/GPS). Report GPS presence, don't hide it.
2. Scan **every** photo for QR/barcodes with the bundled `jsQR` decoder (multiple codes per photo).
   Where the browser exposes `BarcodeDetector`/`FaceDetector`/`TextDetector`, flag faces and text too.
3. Blur every flagged region by default; let the creator draw extra manual boxes (addresses,
   plates, strangers).
4. Show the summary (photos reviewed · areas blurred · location removed) before generating, in the
   Download tab, in `README.txt` and in the exported `journey.json`.
5. Require a 4-point checklist per photo before the journey can be generated. A stranger's face may
   be "Approved" only if that person agreed to appear.
6. HEIC that the browser cannot open gets a plain "export as JPEG" message.

### 4. The 3D world
- **One continuous route**, not a menu of scenes: a single walkable spline from an entry gate to the
  last chapter. Brass threshold bands + finger-posts mark each hand-over.
- **Scene kits** per chapter (`street`, `waterfront`, `landmark`, `bridge`, `garden`, `shore`,
  `plaza`, `viewpoint`). Each kit exposes `features()` (terrain: bridge humps, canal widening, walk
  bounds) and `build()` (geometry). A guessed kit may be overridden in the Arrange step.
- **One interaction per chapter** — postcard, canal reflection (cycles time of day), photo-frame
  viewpoint, private bridge promise, quiet bench, guided boat ride. The promise stays on the device
  and is never published, shared or shown in the video unless the creator opts in.
- **Mood clears as you walk**: the chosen weather is heaviest at the first chapter and lifted by the
  last (`MOOD_CLEARING`). After the Rain clears most; Snowfall barely changes.
- **Modes**: walk (WASD + drag-to-look, or touch joystick), guided journey, viewpoint, bench, boat.
  Boat end is framed as the shareable hero shot.
- **Performance**: step reflections/shadows down on weak devices; subdivide ground and water so
  mobile GPUs keep depth precision. Offer `?quality=low`.

### 5. Outputs
- **Hero image** 1080×1350 (title, last memory, route thread, disclaimer) rendered on demand.
- **Chapter cards** 1080×1350: a cover collage plus one per chapter.
- **Postcards** front + back (message, stamp, postmark).
- **Journey Journal** as a travel notebook: route thread, taped photos, handwritten memories,
  per-chapter moments, viewpoints, hero frame, sealed promise. In-app sheet + JPG page + standalone
  `journal.html`.
- **Video** 15 s, frame-exact MP4 (H.264 + AAC/Opus) via WebCodecs, falling back to real-time
  MediaRecorder (MP4 or WebM).
- **Download** ZIP: `journey.json`, blurred photos, cards, postcards, viewpoints, journal, video,
  README. Inside embedded frames, offer an "open in its own tab" link in case downloads are blocked.
- **Credits**: reserve on start, **commit only when the result is ready**, refund on any failure,
  with a clear failed panel (what happened · "1 credit refunded" · retry / light mode / back to
  editing). The bundled demo and re-entering an already-built journey are free.

### 6. Languages and RTL
- Ship the UI in **all 12 locales together**: `en zh ja ko es fr de pt ru ar it hi`. Keep English as
  the fallback so a missing key degrades to English, never to a raw key.
- Detection: `navigator.languages` in order, persisted choice wins, unsupported locale → English.
- Set `html.lang` per locale and `html.dir = 'rtl'` for Arabic. Mirror with logical properties
  (`inset-inline-start`, `margin-inline-end`) and explicit `[dir="rtl"]` rules for anything pinned
  with physical `left`/`right` (HUD clusters, joystick, sheet drawer, arrows, scrim gradient).
- Verify with a script that every locale has exactly the English key set with identical
  `{placeholders}`; run it in CI before publishing.

### 7. Accessibility and mobile ergonomics
- WCAG AA contrast on every text/background pair, including small caps labels and muted body copy;
  check it on the rendered DOM, not by eye.
- A visible `:focus-visible` ring on every interactive element — one colour on light surfaces, a
  second on dark ones. Never remove focus outlines.
- Touch targets ≥44 px on coarse pointers; never below the WCAG 2.2 24 px minimum.
- Honour `prefers-reduced-motion` and `prefers-contrast: more`.
- Respect safe areas (`env(safe-area-inset-*)`), keyboard routes (E to interact, G guided, J
  journal, Esc to close), and a lost-WebGL-context rebuild that keeps the journal.

### 8. Verify before publishing
Run the checklist in `references/qa-checklist.md`. At minimum: the flow end to end on desktop and
on 390×844, all 12 languages switching with no raw keys and no overflow, Arabic RTL mirrored,
zero console errors, contrast and tap-target audits passing, and a real photo set exercising the
privacy path.

### 9. Publish
```bash
rm -rf dist && mkdir dist && cp -r index.html css js vendor assets dist/
node /mods/neta/neta work publish web works/webs/<slug> --from works/webs/<slug>/dist
```
`qa/` and `protocol/` hold evidence and stay out of `dist/`.

## Example

The finished template — Annecy, *From the Canal to the Lake*, six chapters, Cinematic Travel
Memory, Early Morning, After the Rain — is published here:
**https://neta.art/w/5a6cdefb-1162-48b0-8d48-200145f606a2**

Read it to see the target quality bar: the privacy flow, the continuous route, the journal, the
hero card and the 12-language switch.

## Reference files

- `references/architecture.md` — module map, data shapes, scene-kit contract.
- `references/qa-checklist.md` — the publish-readiness gates.