// Vapor landing — shared building blocks used by all three layout options.
// Color tokens, voice-rewritten copy, the phone mockup matching the new
// Today screen, and the two animated canvases (Word Orbit + Soul Weather
// Lissajous drift). Loops close at t=1; integer freqs only.
const VAPOR = {
sand: '#C7C1B1',
sandDark: '#B8B2A0',
sandSoft: '#CEC8B8',
green: '#2B5C3E',
greenMid: '#3A6B4A',
greenSoft: '#7EA882',
cream: '#E8E2D9',
ink: '#1C1917',
inkSoft: '#2A2722',
serif: "'Cormorant Garamond', Georgia, serif",
sans: "'Inter', system-ui, sans-serif",
};
// ── voice-rewritten copy ─────────────────────────────────────────────
// lowercase, fragments, no marketing exhortations.
const COPY = {
heroCycle: ['hopeful.', 'tired.', 'healing.', 'open.', 'pensive.', 'still.', 'tender.', 'lifting.'],
heroTagline: 'your day, distilled.',
thesis: {
label: 'the brand',
title: 'show up.\nthat\u2019s the whole thing.',
body: 'a journal app for one word a day. that\u2019s the entire ask. free. no accounts. no cloud. nothing leaves your phone.',
},
features: [
{
key: 'today',
label: 'today',
title: 'write one word.\nclose the app.',
body: 'that\u2019s it. the rest is there if you want it - tap your word for its meaning, long-press to share, tap your streak to see what\u2019s accumulated. but you don\u2019t have to.',
},
{
key: 'calendar',
label: 'calendar',
title: 'your year,\nin your own handwriting.',
body: 'every word you\u2019ve written, one square per day, set in italic. older entries fade gently the further back they go. the closest vapor gets to a diary. and even then, still just words.',
},
{
key: 'words',
label: 'words',
title: 'the words you\nreached for most.',
body: 'a cloud, a top ten, a 3d orbit you can share. patterns you didn\u2019t know were yours.',
},
{
key: 'letters',
label: 'letters',
title: 'a word to your\nfuture self.',
body: 'seal it for a week, a month, a year. opens on the date you choose. not before.',
},
{
key: 'soul',
label: 'soul weather',
title: 'a forecast for\nyour inner climate.',
body: 'fog burning off. frost overnight maybe. the storm not done. hand-written. no ai.',
},
],
closing: {
tag: 'coming soon',
title: 'your day,\ndistilled.',
notify: 'we\u2019ll only email you about vapor.',
},
honest: 'vapor is a mirror. mirrors aren\u2019t therapy. crisis resources sit one tap away in settings, for thirty-plus countries, always offline.',
};
// ── shared loop clock ───────────────────────────────────────────────
// One global rotationT \u2208 [0,1] driven at 30fps; subscribers read it.
const Clock = (() => {
const subs = new Set();
let raf = null;
const PERIOD_MS = 12000; // 12s loop, matches the 30fps × 12s spec
let started = 0;
function tick(now) {
if (!started) started = now;
const t = ((now - started) % PERIOD_MS) / PERIOD_MS;
subs.forEach((fn) => fn(t));
raf = requestAnimationFrame(tick);
}
function sub(fn) {
subs.add(fn);
if (!raf) raf = requestAnimationFrame(tick);
return () => {
subs.delete(fn);
if (subs.size === 0 && raf) { cancelAnimationFrame(raf); raf = null; started = 0; }
};
}
return { sub };
})();
function useT() {
const [t, setT] = React.useState(0);
React.useEffect(() => Clock.sub(setT), []);
return t;
}
// ── PhoneShell ──────────────────────────────────────────────────────
// fixed-size 390×844 inner that we scale into a smaller bezel.
function PhoneShell({ scale = 0.5, children, bg = VAPOR.sand, statusColor = VAPOR.ink }) {
const w = 390 * scale, h = 844 * scale;
return (
{/* status bar */}
9:43
••••))▭
{children}
);
}
// ── TodayScreen — matches the actual Today screenshot ───────────────
function TodayScreen({ word = 'grounded', note = 'feet on the floor. enough.', streak = 39, name = 'zac' }) {
return (