"You traded one uncomfortable sentence for an uncomfortable evening."
);
}
/* ───── Sticky scroll story ───── */
const STORY_STEPS = [
{
key: 'notice',
eyebrow: 'Step 01 · Notice',
title: 'Catch yourself in the moment of the mask.',
body: 'A small chime, a quick tap. Open QuiLie the second you catch yourself performing — laughing at the joke that hurt, agreeing for peace, hiding behind "I\'m fine."',
quote: '"I said yes when I meant later."',
cite: 'Logged Tuesday · 6:53pm',
img: 'assets/screen-home.jpg',
tint: 'oklch(0.92 0.04 295)',
},
{
key: 'reflect',
eyebrow: 'Step 02 · Reflect',
title: 'One calm sentence back. Never a lecture.',
body: 'Your AI coach reads what you logged and reflects one quiet observation. Pick a tone — gentle, direct, or a little dry. It feels like a mirror you can trust, not a tracker.',
quote: '"What would honesty have sounded like, if it were safe to say?"',
cite: 'From your coach',
img: 'reflect',
tint: 'oklch(0.93 0.04 165)',
},
{
key: 'grow',
eyebrow: 'Step 03 · Grow',
title: 'Visible proof that you\'re becoming yourself.',
body: 'Every honest log brightens your mask, extends your streak, and grows the sapling on your Growth screen. The transformation isn\'t abstract — you can watch it.',
quote: '"You\'ve grown 1% more authentic in 1 day."',
cite: 'Day 21 · Level 2 · Aware',
img: 'assets/screen-growth.jpg',
tint: 'oklch(0.93 0.05 165)',
},
];
function StorySection() {
const stepRefs = useRef([]);
const [active, setActive] = useState(0);
useEffect(() => {
const io = new IntersectionObserver((entries) => {
// pick the entry closest to the middle that is intersecting
let best = null;
entries.forEach(e => {
if (e.isIntersecting) {
if (!best || Math.abs(e.intersectionRatio - 1) < Math.abs(best.intersectionRatio - 1)) {
best = e;
}
}
});
if (best) {
const idx = Number(best.target.dataset.idx);
setActive(idx);
}
}, { threshold: [0.3, 0.5, 0.7], rootMargin: '-30% 0px -30% 0px' });
stepRefs.current.forEach(el => el && io.observe(el));
return () => io.disconnect();
}, []);
return (
How it works
Notice. Reflect. Grow.
The whole app is built around one calm loop. No streak guilt. No
infinite feed. Just a small, kind ritual that, done daily, changes
how you show up.
);
}
function StoryProp({ kind }) {
if (kind === 'notice') return ;
if (kind === 'reflect') return ;
if (kind === 'grow') return ;
return null;
}
function NoticeProp() {
const tiltRef = useTilt(5);
return (
A moment from today
Tap once · 60 seconds
＋ Log a moment⌘ N
people-pleasingavoiding conflictsmall lie+ add
);
}
/* Interactive coach card with tone selector */
const COACH_TONES = [
{
key: 'gentle', label: 'Gentle',
jsx: What would honesty have sounded like, if it were safe to say?,
},
{
key: 'direct', label: 'Direct',
jsx: You said yes. You meant later. What were you protecting?,
},
{
key: 'dry', label: 'Dry',
jsx: Congrats on the dinner you didn't want. Want a different sentence next time?,
},
];
function ReflectProp() {
const tiltRef = useTilt(5);
const [tone, setTone] = useState('gentle');
const [swap, setSwap] = useState(false);
const current = COACH_TONES.find(t => t.key === tone) || COACH_TONES[0];
const changeTone = (key) => {
if (key === tone) return;
setSwap(true);
setTimeout(() => {
setTone(key);
setSwap(false);
}, 260);
};
return (
Today{pct.toFixed(1)}%more you↑
+1.0% vs yesterday
L
Level
02Aware
🔥
Streak
{Math.round(streak)}days
XP to Level 03{Math.round(xp).toLocaleString()} / 4,400
Week of honesty
{Array.from({ length: 7 }).map((_, i) => (
{['M','T','W','T','F','S','S'][i]}
))}
);
}
function PhoneScreen({ step, active }) {
// Real screenshot screens
if (step.img === 'assets/screen-home.jpg' || step.img === 'assets/screen-growth.jpg') {
return (
);
}
// Reflect screen — built in HTML to match app style
return (
6:53REFLECT29%
Your coach
A small honest thing.
Agreed to dinner I didn't want. Again.
You traded one uncomfortable sentence for an uncomfortable evening. What was the sentence?
"I'm exhausted, can we Sunday?"
Try it next time, before it costs you the night.
Reply to your coach…↑
{/* Tab bar */}
Home● ReflectJournalInsightsGrowth
);
}
/* ───── Masks gallery ───── */
const MASKS = [
{
key: 'perfectionist',
name: 'The Perfectionist',
short: 'Perfectionist',
tag: 'Hidden behind the mask',
sig: '“It’s not done yet.”',
desc: 'You polish until the moment is gone. You’d rather not show up than show up half‑formed.',
img: 'assets/masks/perfectionist.png',
},
{
key: 'people-pleaser',
name: 'The People‑Pleaser',
short: 'People‑Pleaser',
tag: 'Yes is the safe answer',
sig: '“Whatever you want.”',
desc: 'You’d rather agree to a dinner you didn’t want than risk a moment of friction.',
img: 'assets/masks/people-pleaser.png',
},
{
key: 'overachiever',
name: 'The Overachiever',
short: 'Overachiever',
tag: 'Worth, measured in output',
sig: '“I’m fine — just busy.”',
desc: 'You stack accomplishments like armor. Resting feels like a small failure.',
img: 'assets/masks/overachiever.png',
},
{
key: 'comedian',
name: 'The Comedian',
short: 'Comedian',
tag: 'Laughter as a shield',
sig: '“Just kidding!”',
desc: 'You turn the hard moment into a joke before anyone can see your face change.',
img: 'assets/masks/comedian.png',
},
{
key: 'invisible',
name: 'The Invisible One',
short: 'Invisible One',
tag: 'Smaller is safer',
sig: '“It’s nothing.”',
desc: 'You shrink in rooms. You’d rather be unseen than seen wrongly.',
img: 'assets/masks/invisible-one.png',
},
];
function MasksSection() {
const [idx, setIdx] = useState(0);
const [swap, setSwap] = useState(false);
const current = MASKS[idx];
const choose = (i) => {
if (i === idx) return;
setSwap(true);
setTimeout(() => {
setIdx(i);
setSwap(false);
}, 300);
};
// Auto-cycle when user hasn’t interacted yet
const [paused, setPaused] = useState(false);
useEffect(() => {
if (paused) return;
const t = setInterval(() => {
setSwap(true);
setTimeout(() => {
setIdx(i => (i + 1) % MASKS.length);
setSwap(false);
}, 300);
}, 5200);
return () => clearInterval(t);
}, [paused]);
return (
Recognize yourself?
Five masks. One you, underneath.
Most of us wear two or three. QuiLie helps you name which mask
shows up where — the first step in choosing, gently, to set it down.
);
}
/* ───── Tree journey ───── */
const TREES = [
{ key: 'hidden', num: '01', name: 'Hidden', img: 'assets/trees/tree-1-hidden.png', desc: 'A single shoot, half‑buried. Day one. You’ve named the mask — nothing more yet, and nothing less.' },
{ key: 'aware', num: '02', name: 'Aware', img: 'assets/trees/tree-2-aware.png', desc: 'Leaves. Real ones. You can feel the moment of the mask before you put it on. That’s the whole game.' },
{ key: 'open', num: '03', name: 'Open', img: 'assets/trees/tree-3-open.png', desc: 'The trunk has shape now. A few honest sentences have been said out loud, in actual rooms. The body remembers.' },
{ key: 'genuine', num: '04', name: 'Genuine', img: 'assets/trees/tree-4-genuine.png', desc: 'A full canopy. You’re catching the mask before it lands. People notice you “seem different,” and they’re right.' },
{ key: 'honest', num: '05', name: 'Honest', img: 'assets/trees/tree-5-honest.png', desc: 'Roots, deep ones. Telling the truth is no longer a brave act. It’s just the default sentence.' },
{ key: 'free', num: '06', name: 'Free', img: 'assets/trees/tree-6-free.png', desc: 'The mask is something you used to wear. You can still see it on a shelf — and you don’t reach for it.' },
{ key: 'true', num: '07', name: 'True', img: 'assets/trees/tree-7-true.png', desc: 'You. Whole. Old‑growth. Other people meet you and know exactly who they met.' },
];
function TreesSection() {
const [idx, setIdx] = useState(1); // start at "Aware" (matches the in-app default)
const [swap, setSwap] = useState(false);
const current = TREES[idx];
const choose = (i) => {
if (i === idx) return;
setSwap(true);
setTimeout(() => {
setIdx(i);
setSwap(false);
}, 300);
};
return (
Your level path
Seven seasons of becoming.
Your private tree is the long view. It only grows when you do —
slowly, watercolor by watercolor, from a hidden shoot to old‑growth.
