// REVEAL — the interactive "Ju Gets You" demo
// User can type or pick a prompt, watch the typing animation,
// see Ju "think", then see the AI-generated warm read.
const RevealThinkingDots = () => (
{[0, 1, 2].map((i) => (
))}
);
const PROMPT_PRESETS = [
{
label: "Late night",
text: "I can't sleep and I don't know why. Everything's fine but I feel hollow.",
read: {
signal: "Tender · Unfinished",
color: "#7C6EDB",
headline: "Your day didn't get to land.",
body: "Fine isn't the same as okay. There's a softer feeling underneath the polite version — and it's been carrying the day for you while you kept performing it.",
tags: ["Masked-fine", "Low rest", "Pattern: Tuesdays"],
next: "Tonight: put on the calmest song you know and let it play once, fully.",
},
},
{
label: "Burnt out",
text: "I'm doing everything right and I still feel like I'm falling behind.",
read: {
signal: "Overextended",
color: "#E8878C",
headline: "You're meeting the bar — and the bar is too high.",
body: "This isn't a productivity problem. Your capacity has been spending itself on things that look fine on paper. The gap you feel is between your output and your nervous system, not your effort.",
tags: ["Overextended", "Output > Input", "Boundary signal"],
next: "Pick one thing to drop this week. Just one. Tell Ju which.",
},
},
{
label: "Anxious",
text: "My chest feels tight and I don't know what I'm scared of.",
read: {
signal: "Free-floating anxiety",
color: "#6C9BCF",
headline: "Your body found the alarm before your brain found the word.",
body: "The tightness isn't the problem to solve — it's the messenger. Something in the last 48 hours asked too much, and you didn't get to name it as it happened.",
tags: ["Anticipatory", "Body-first", "Backlog feeling"],
next: "Two slow exhales. Then ask: what did I not get to say yesterday?",
},
},
{
label: "Stuck",
text: "I keep starting things and not finishing them. I feel like a fraud.",
read: {
signal: "Pattern fatigue",
color: "#FFB347",
headline: "You're not unfinished — you're under-rested between starts.",
body: "Fraud is the cheap word for what's actually going on. You're a person who keeps showing up to new beginnings without ever getting the closing scene. That gap leaves residue.",
tags: ["Closure deficit", "Identity loop"],
next: "Pick one thing you started and write the ending — even imperfectly.",
},
},
];
const Reveal2 = () => {
const [activePreset, setActivePreset] = React.useState(0);
const [typed, setTyped] = React.useState("");
const [phase, setPhase] = React.useState("typing"); // typing | thinking | read
const [auto, setAuto] = React.useState(true);
const tickRef = React.useRef(null);
const cycleRef = React.useRef(null);
const preset = PROMPT_PRESETS[activePreset];
// Typing animation for the prompt
React.useEffect(() => {
setTyped("");
setPhase("typing");
let i = 0;
clearInterval(tickRef.current);
tickRef.current = setInterval(() => {
i++;
setTyped(preset.text.slice(0, i));
if (i >= preset.text.length) {
clearInterval(tickRef.current);
setTimeout(() => setPhase("thinking"), 400);
setTimeout(() => setPhase("read"), 1900);
}
}, 28);
return () => clearInterval(tickRef.current);
}, [activePreset]);
// Auto-cycle presets
React.useEffect(() => {
if (!auto) return;
clearTimeout(cycleRef.current);
if (phase === "read") {
cycleRef.current = setTimeout(() => {
setActivePreset((p) => (p + 1) % PROMPT_PRESETS.length);
}, 5800);
}
return () => clearTimeout(cycleRef.current);
}, [phase, auto]);
return (
The Ju Gets You reveal
One messy sentence. One warm read.
Type the version you'd normally keep inside. Ju reads what's actually underneath — and gives it back to you in language you didn't have to find.
Pick a feeling
{PROMPT_PRESETS.map((p, i) => (
))}
Nuju · Ju Gets You
{phase === "typing" && "typing…"}
{phase === "thinking" && "reading…"}
{phase === "read" && "complete"}