/* Paloma — animated scene.
Timeline (seconds):
0.0 – 2.0 Evidence file: hover state, user taps FAB
2.0 – 6.0 Courage log bottom sheet slides up, text types into "What happened"
6.0 – 7.0 "Tell Paloma" pressed; screen transition to Paloma response
7.0 – 14.0 Typewriter reflection
14.0 – 20.0 Breath ring pause (4s inhale/exhale cycle); "I felt it" fades in at 19.0
20.0 – 23.0 Celebration screen: halo, "Added to your evidence file", count 7→8
23.0 – 28.0 Return to evidence file: new entry drops in at top, list reflows
*/
const C = {
bgCanvas: '#102A43',
bgBase: '#243B53',
bgSurface: '#334E68',
bgElev: '#3E4C59',
border: '#627D98',
purple900: '#240754',
purple700: '#653CAD',
purple500: '#9B7DD4',
purple300: '#B8A2E3',
purple50: '#EAE2F8',
blue500: '#1992D4',
blue400: '#47A3F3',
blue300: '#7CC4FA',
coral: '#D85A30',
textPri: '#F0F4F8',
textMut: '#9FB3C8',
textSub: '#627D98',
textAcc: '#47A3F3',
};
const SERIF = "'Playfair Display', Georgia, serif";
const SANS = "'Lato', -apple-system, BlinkMacSystemFont, sans-serif";
// Phone frame centered in 1280x720 canvas
const PHONE_W = 390;
const PHONE_H = 720; // slightly taller to fill the stage
const PHONE_X = (1280 - PHONE_W) / 2;
const PHONE_Y = (720 - PHONE_H) / 2;
// ─────────────────────────────────────────────────────────────────
// Small helpers
// ─────────────────────────────────────────────────────────────────
function StatusBar() {
return (
);
}
function PalomaMark({ size = 13 }) {
return (
paloma.ai
);
}
function EntryCard({ type, body, reflect, date, expanded = false, width = '100%' }) {
const borderColor = type === 'belief-shift' ? C.blue500
: type === 'witnessed' ? C.coral
: C.purple500;
const kindLabel = type === 'belief-shift' ? 'Belief shift'
: type === 'witnessed' ? 'Witnessed moment'
: 'Courage act';
const kindColor = type === 'belief-shift' ? C.blue300
: type === 'witnessed' ? C.coral
: C.purple500;
return (
{kindLabel}
{date}
{body}
{expanded && reflect && (
)}
);
}
// ─────────────────────────────────────────────────────────────────
// Phone shell + scene
// ─────────────────────────────────────────────────────────────────
function PhoneShell({ children }) {
return (
{children}
);
}
// Sample entries (from the prototype)
const ENTRIES = [
{ id: 5, type: 'courage-act', body: "Sent the email I'd been drafting for two weeks. Hit send before I could talk myself out of it.", reflect: "You didn't wait until it was perfect. That's the thing you said you never do.", date: '3 days ago' },
{ id: 4, type: 'belief-shift', body: "Realized I was waiting for permission to take up space in the meeting. Then I stopped waiting.", reflect: "Something shifted in how you see yourself in that room. That's not small.", date: '1 week ago' },
{ id: 3, type: 'courage-act', body: "Had the conversation with my manager I'd been avoiding for six weeks.", reflect: "Six weeks of avoiding and then you just did it.", date: '2 weeks ago' },
{ id: 2, type: 'witnessed', body: "My colleague said she always feels heard when she talks to me.", reflect: "You almost let that slide past. You didn't this time.", date: '3 weeks ago' },
];
const NEW_ENTRY = {
type: 'courage-act',
body: "Asked for the raise. Said the number out loud.",
reflect: "You said the number. Not a softer version of it. The number.",
date: 'Just now',
};
// ─────────────────────────────────────────────────────────────────
// SCENE 1 — Evidence file (0–6s, and return at 23–28s)
// ─────────────────────────────────────────────────────────────────
function EvidenceFile({ newEntryProgress = 0, fabPressed = 0, sheetProgress = 0 }) {
// newEntryProgress: 0..1, slot-in animation of the new top entry
const newY = (1 - newEntryProgress) * -80;
const newOp = newEntryProgress;
const existingPush = newEntryProgress * 88; // px to push old entries down
const fabScale = 1 - fabPressed * 0.1;
return (
{/* Header */}
paloma.ai
Your evidence file
0.3 ? C.purple300 : C.purple300,
fontWeight: 700,
transition: 'color 0.3s',
}}>{newEntryProgress > 0.6 ? '8' : '7'} acts of courage
· building since April
{/* Belief pill */}
Belief we're shifting
I don't belong here.
{/* Filter pills */}
{['All', 'Courage', 'Belief', 'Witnessed'].map((f, i) => (
{f}
))}
{/* Entry list */}
{/* New entry slotting in at top */}
{newEntryProgress > 0.01 && (
)}
{ENTRIES.slice(0, 3).map(e => (
))}
{/* FAB */}
+
{/* Backdrop for bottom sheet */}
{sheetProgress > 0 && (
)}
);
}
// ─────────────────────────────────────────────────────────────────
// Bottom sheet (courage log)
// ─────────────────────────────────────────────────────────────────
function BottomSheet({ progress, typedText, buttonEnabled, buttonPressed }) {
// progress 0..1 maps to translateY 100% -> 0
const ty = (1 - progress) * 100;
const btnScale = 1 - buttonPressed * 0.04;
return (
What happened?
Small counts. Paloma will witness it. Only you will see the file.
{/* What happened */}
0 && typedText.length < 44}
/>
Tell Paloma
Not now
);
}
function FieldBlock({ label, required, optional, value, showCaret }) {
return (
{label}
{required ? 'Required' : 'Optional'}
{value || (required ? 'I…' : '')}
{showCaret && (
)}
);
}
// ─────────────────────────────────────────────────────────────────
// Paloma response screen
// ─────────────────────────────────────────────────────────────────
function PalomaResponse({ typedReflect, showRing, ringProgress, ctaOpacity }) {
// ringProgress 0..1 maps a single breathe cycle (0.45 -> 1 -> 0.45)
// We drive a sin wave between small & large
const scale = 0.45 + 0.55 * (0.5 - 0.5 * Math.cos(ringProgress * Math.PI * 2));
const ringOpacity = 0.15 + 0.55 * (0.5 - 0.5 * Math.cos(ringProgress * Math.PI * 2));
const scale2 = 0.45 + 0.55 * (0.5 - 0.5 * Math.cos((ringProgress + 0.5) * Math.PI * 2));
const ringOp2 = 0.1 + 0.35 * (0.5 - 0.5 * Math.cos((ringProgress + 0.5) * Math.PI * 2));
return (
{typedReflect}
{typedReflect.length > 0 && !showRing && (
)}
Take a moment. Let that land.
);
}
// ─────────────────────────────────────────────────────────────────
// Celebration screen
// ─────────────────────────────────────────────────────────────────
function Celebration({ entryProgress }) {
// entryProgress 0..1 for text reveal sequence
const e1 = clamp(entryProgress / 0.18, 0, 1); // eyebrow
const e2 = clamp((entryProgress - 0.18) / 0.22, 0, 1); // headline
const e3 = clamp((entryProgress - 0.4) / 0.2, 0, 1); // count
const e4 = clamp((entryProgress - 0.55) / 0.2, 0, 1); // counter-beliefs
const e5 = clamp((entryProgress - 0.75) / 0.25, 0, 1); // cta
const halo = clamp(entryProgress / 0.3, 0, 1);
return (
Evidence saved
Added to your evidence file.
8 acts of courage
Counts against the belief
"I don't belong here."
);
}
// ─────────────────────────────────────────────────────────────────
// Scene captions (side narration)
// ─────────────────────────────────────────────────────────────────
function Caption({ start, end, title, body }) {
return (
{({ localTime, duration }) => {
const inT = clamp(localTime / 0.5, 0, 1);
const outT = clamp((duration - localTime) / 0.5, 0, 1);
const op = Math.min(inT, outT);
return (
);
}}
);
}
function TimestampHud() {
const t = useTime();
const chapter =
t < 2 ? '01 · Evidence file' :
t < 6 ? '02 · Logging an act' :
t < 7 ? '03 · Sending it' :
t < 14 ? '04 · Paloma reflects' :
t < 20 ? '05 · The pause' :
t < 23 ? '06 · Added to the file' :
'07 · Return to evidence';
return (
paloma.ai · evidence flow
{chapter}
);
}
// ─────────────────────────────────────────────────────────────────
// The big scene. One phone. State driven by useTime().
// ─────────────────────────────────────────────────────────────────
function PalomaScene() {
const t = useTime();
// ── timing ──
const SHEET_OPEN_START = 2.0;
const SHEET_OPEN_END = 2.6;
const TYPE_START = 2.9;
const TYPE_END = 5.6;
const BTN_PRESS = 6.0;
const SHEET_CLOSE_END = 6.4;
const RESPONSE_START = 6.2;
const REFLECT_START = 7.0;
const REFLECT_END = 13.5;
const BREATH_START = 14.0;
const BREATH_END = 20.0;
const CTA_IN = 19.0;
const CELEB_START = 20.2;
const CELEB_END = 23.0;
const RETURN_START = 23.0;
const ENTRY_SLOT_START = 23.8;
const ENTRY_SLOT_END = 25.6;
const FADE_TO_BLACK_START = 25.6;
const FADE_TO_BLACK_END = 26.6;
const BLACK_HOLD_END = 28.6;
// ── screen selection (which is fully visible) ──
// response screen lives from RESPONSE_START to CELEB_START
// celebration from CELEB_START to RETURN_START
// evidence file otherwise
// Crossfade between screens using opacity
const evidenceOp =
t < RESPONSE_START ? 1 :
t < RESPONSE_START + 0.5 ? 1 - (t - RESPONSE_START) / 0.5 :
t < RETURN_START - 0.2 ? 0 :
t < RETURN_START + 0.4 ? clamp((t - (RETURN_START - 0.2)) / 0.6, 0, 1) :
1;
const responseOp =
t < RESPONSE_START ? 0 :
t < RESPONSE_START + 0.5 ? (t - RESPONSE_START) / 0.5 :
t < CELEB_START - 0.3 ? 1 :
t < CELEB_START + 0.4 ? clamp(1 - (t - (CELEB_START - 0.3)) / 0.7, 0, 1) :
0;
const celebOp =
t < CELEB_START - 0.3 ? 0 :
t < CELEB_START + 0.4 ? clamp((t - (CELEB_START - 0.3)) / 0.7, 0, 1) :
t < RETURN_START - 0.2 ? 1 :
t < RETURN_START + 0.4 ? clamp(1 - (t - (RETURN_START - 0.2)) / 0.6, 0, 1) :
0;
// Sheet progress
const sheetProgress =
t < SHEET_OPEN_START ? 0 :
t < SHEET_OPEN_END ? Easing.easeOutCubic((t - SHEET_OPEN_START) / (SHEET_OPEN_END - SHEET_OPEN_START)) :
t < BTN_PRESS ? 1 :
t < SHEET_CLOSE_END ? 1 - Easing.easeInCubic((t - BTN_PRESS) / (SHEET_CLOSE_END - BTN_PRESS)) :
0;
// Typed text in bottom sheet
const typeTarget = "Asked for the raise. Said the number out loud.";
const typedChars = t < TYPE_START ? 0 :
t < TYPE_END ? Math.floor(((t - TYPE_START) / (TYPE_END - TYPE_START)) * typeTarget.length) :
typeTarget.length;
const typedText = typeTarget.slice(0, typedChars);
const buttonEnabled = typedChars > 2;
const buttonPressed = (t >= BTN_PRESS - 0.1 && t < BTN_PRESS + 0.25) ? 1 : 0;
// FAB press around 1.9s
const fabPressed = (t >= 1.85 && t < 2.1) ? 1 : 0;
// Reflect typewriter
const reflectFull = "You said the number. Not a softer version of it. The number. That's the thing you told me you'd never ask for.";
const reflectChars = t < REFLECT_START ? 0 :
t < REFLECT_END ? Math.floor(((t - REFLECT_START) / (REFLECT_END - REFLECT_START)) * reflectFull.length) :
reflectFull.length;
const typedReflect = reflectFull.slice(0, reflectChars);
// Breath ring
const showRing = t >= BREATH_START - 0.2;
// Two full breath cycles over BREATH_END - BREATH_START seconds (so ~3s per cycle)
const breathCycleLen = 4.0;
const ringProgress = t < BREATH_START ? 0 :
((t - BREATH_START) / breathCycleLen) % 1;
// CTA fades in at CTA_IN
const ctaOpacity = t < CTA_IN ? 0 : clamp((t - CTA_IN) / 0.8, 0, 1);
// Celebration progress
const celebProgress = t < CELEB_START ? 0 :
t < CELEB_END ? (t - CELEB_START) / (CELEB_END - CELEB_START) : 1;
// New entry slot progress in returned evidence file
const slotProgress = t < ENTRY_SLOT_START ? 0 :
t < ENTRY_SLOT_END ? Easing.easeOutCubic((t - ENTRY_SLOT_START) / (ENTRY_SLOT_END - ENTRY_SLOT_START)) :
1;
// Fade-to-black overlay: covers the whole stage after the entry docks, holds, then
// the Stage loops back to t=0 (where overlay is 0 again, so we get a fade-back-in).
const blackOp =
t < FADE_TO_BLACK_START ? 0 :
t < FADE_TO_BLACK_END ? Easing.easeInOutCubic((t - FADE_TO_BLACK_START) / (FADE_TO_BLACK_END - FADE_TO_BLACK_START)) :
t < BLACK_HOLD_END ? 1 :
1;
// Fade-in from black at the very start of each loop (first 0.8s)
const FADE_IN_END = 0.8;
const fadeInOp = t < FADE_IN_END ? 1 - Easing.easeInOutCubic(t / FADE_IN_END) : 0;
const overlayOp = Math.max(blackOp, fadeInOp);
return (
<>
{/* Scene captions */}
{/* Evidence file layer (bottom) */}
{sheetProgress > 0 && (
)}
{/* Paloma response layer */}
{responseOp > 0 && (
)}
{/* Celebration layer */}
{celebOp > 0 && (
)}
{/* Full-stage fade to black (covers phone, HUD, captions) */}
{overlayOp > 0 && (
)}
);
}
Object.assign(window, { PalomaScene });