// Naviyell — Screens A-01 through A-05 (intro flow) — INTERACTIVE
// ── Intro-flow animations (splash reveal + onboarding idle motion) ──
// Injected once. All decorative loops are disabled under prefers-reduced-motion.
if (typeof document !== 'undefined' && !document.getElementById('ac-intro-anim')) {
const s = document.createElement('style');
s.id = 'ac-intro-anim';
s.textContent = `
@keyframes ac-splash-mark { from { opacity: 0; transform: translateY(14px); letter-spacing: 0.42em } to { opacity: 1; transform: translateY(0); letter-spacing: 0.2em } }
@keyframes ac-splash-kicker { from { opacity: 0; transform: translateY(10px) } to { opacity: 0.85; transform: translateY(0) } }
@keyframes ac-splash-rule { from { transform: scaleX(0); opacity: 0 } to { transform: scaleX(1); opacity: 0.6 } }
@keyframes ac-splash-tag { from { opacity: 0; transform: translateY(8px) } to { opacity: 0.9; transform: translateY(0) } }
@keyframes ac-splash-hint { from { opacity: 0 } to { opacity: 1 } }
@keyframes ac-hint-bob { 0%,100% { transform: translateY(0); opacity: 0.55 } 50% { transform: translateY(7px); opacity: 1 } }
@keyframes ac-twinkle { 0%,100% { opacity: 0.25; transform: scale(0.85) } 50% { opacity: 1; transform: scale(1.15) } }
@keyframes ac-art-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes ac-art-glow { 0%,100% { opacity: 0.45; transform: scale(1) } 50% { opacity: 0.85; transform: scale(1.07) } }
@keyframes ac-art-orbit { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes ac-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
.ac-art-float { animation: ac-art-float 5.5s ease-in-out infinite }
.ac-art-glow { animation: ac-art-glow 4.5s ease-in-out infinite }
.ac-tw { animation: ac-twinkle 3.2s ease-in-out infinite }
@media (prefers-reduced-motion: reduce) {
.ac-art-float, .ac-art-glow, .ac-tw,
[data-splash-hint] { animation: none !important }
}
`;
document.head.appendChild(s);
}
// ═══════════════════════════════════════════════════════════════════
// A-01 Splash — a deliberate brand moment. User-paced: tap or swipe up to
// continue (long auto-advance as a fallback only, per reviewer feedback
// that the previous auto-flip felt too fast / like noise).
// ═══════════════════════════════════════════════════════════════════
function A01Splash() {
const nav = useNav();
const startY = React.useRef(null);
const proceed = React.useCallback(() => {
// Pre-login is a single page: the splash goes straight to login.
nav && nav.go && nav.go('login', { replace: true });
}, [nav]);
React.useEffect(() => {
// Generous fallback only — primary interaction is tap / swipe-up.
const t = setTimeout(proceed, 7000);
return () => clearTimeout(t);
}, [proceed]);
const onDown = (e) => {
startY.current = e.clientY;
};
const onUp = (e) => {
const dy = startY.current == null ? 0 : e.clientY - startY.current;
startY.current = null;
if (dy < -36 || Math.abs(dy) < 8) proceed(); // swipe up, or tap
};
return (
あなたの人生に 揺るぎない軸を
{/* swipe-up / tap affordance — makes the dwell feel intentional */}
);
}
// ═══════════════════════════════════════════════════════════════════
// A-02 Onboarding — swipeable carousel. Drag/swipe horizontally, tap dots,
// or use the button. Every slide's illustration has gentle idle motion.
// ═══════════════════════════════════════════════════════════════════
const ONB_SLIDES = [
{ art: , heading: '自分を知る', sub: 'まずは今のあなたの状態を\n知ることから' },
{ art: , heading: '相談で道を見つける', sub: '経験豊富な専門家が\nあなたの意思決定をサポートします' },
{ art: , heading: '行動で変わる', sub: '助言を実行に移し\n振り返りで成長を実感しましょう' },
];
function A02Onboarding({ slide: slideProp }) {
const nav = useNav();
const { state, patch } = useAppState();
// In canvas mode a fixed slide prop is passed; in the prototype it's live state.
const isCanvas = slideProp !== undefined;
const slide = isCanvas ? slideProp : state.onbSlide;
const last = ONB_SLIDES.length - 1;
const [drag, setDrag] = React.useState(0);
const [dragging, setDragging] = React.useState(false);
const startX = React.useRef(null);
const widthRef = React.useRef(390);
const setSlide = (i) => {
if (!isCanvas) patch({ onbSlide: Math.max(0, Math.min(last, i)) });
};
// Onboarding now runs AFTER login, so finishing it continues into the hearing.
const finish = () => {
if (!isCanvas) {
patch({ onbSlide: 0 });
nav.go('hearing', { replace: true });
}
};
const next = () => {
if (slide >= last) finish();
else setSlide(slide + 1);
};
// ── swipe handling (pointer = touch + mouse) ──
const onDown = (e) => {
if (isCanvas) return;
startX.current = e.clientX;
widthRef.current = e.currentTarget.offsetWidth || 390;
setDragging(true);
e.currentTarget.setPointerCapture?.(e.pointerId);
};
const onMove = (e) => {
if (startX.current == null) return;
let dx = e.clientX - startX.current;
// rubber-band resistance at the ends
if ((slide === 0 && dx > 0) || (slide === last && dx < 0)) dx *= 0.32;
setDrag(dx);
};
const onUp = () => {
if (startX.current == null) return;
const dx = drag,
th = widthRef.current * 0.16;
startX.current = null;
setDragging(false);
setDrag(0);
if (dx <= -th) {
slide >= last ? finish() : setSlide(slide + 1);
} else if (dx >= th && slide > 0) {
setSlide(slide - 1);
}
};
const trackTransform = `translateX(calc(${-slide * 100}% + ${drag}px))`;
return (
{/* swipeable track */}
{ONB_SLIDES.map((s, i) => (
{s.art}
{s.heading}
{s.sub}
))}
{ONB_SLIDES.map((_, i) => (
{slide >= last ? 'はじめる' : '次へ'}
);
}
function OnbMoon() {
return (
);
}
function OnbConvo() {
return (
{/* soft moon halo behind */}
{/* tiny scattered stars */}
アンコード
NAVIYELL
{[
{ id: 'login', label: 'ログイン' },
{ id: 'signup', label: '新規登録' },
].map((t) => (
))}
{successMsg && (
{successMsg}
)}
{tab === 'signup' && (
setField('lastName', v)} error={errors.lastName} />
setField('firstName', v)} error={errors.firstName} />
)}
setField('email', v)} error={errors.email} />
setField('password', v)} error={errors.password} />
{loading ? (
) : tab === 'login' ? 'ログイン' : '登録する'}
·
);
}
function SocialBtn({ brand, onClick }) {
const labels = { apple: 'Appleで続ける', google: 'Googleで続ける' };
return (
);
}
// ═══════════════════════════════════════════════════════════════════
// A-04 Initial Hearing — picks an option, advances
// ═══════════════════════════════════════════════════════════════════
function A04Hearing({ step: stepProp }) {
const nav = useNav();
const { state, patch } = useAppState();
const step = stepProp !== undefined ? stepProp : state.hearingStep;
const allSteps = [
{
q: '今、一番気になっていることは？',
opts: [
{ id: 'work', label: '仕事・キャリア', icon: '💼' },
{ id: 'rel', label: '人間関係', icon: '👥' },
{ id: 'hth', label: '健康・体調', icon: '🌱' },
{ id: 'mny', label: 'お金・将来', icon: '💰' },
{ id: 'self', label: '自分自身のこと', icon: '🪷' },
],
},
{
q: 'どんなサポートを求めていますか？',
opts: [
{ id: 'org', label: 'まず気持ちを整理したい', icon: '📝' },
{ id: 'adv', label: '具体的なアドバイスがほしい', icon: '🧭' },
{ id: 'acc', label: '行動を継続できるよう伴走してほしい', icon: '🤝' },
{ id: 'typ', label: '今はわからない', icon: '✨' },
],
},
{
q: '相談の頻度はどのくらいを希望しますか？',
opts: [
{ id: 'one', label: 'まずは1回試したい', icon: '☘️' },
{ id: 'mon', label: '月に1〜2回', icon: '🗓️' },
{ id: 'wk', label: '週1回ペースで継続', icon: '⏱️' },
{ id: 'asn', label: '必要なときだけ', icon: '🌙' },
],
},
{
q: 'どの形式が一番話しやすいですか？',
opts: [
{ id: 'chat', label: 'チャット（テキスト）', icon: '💬' },
{ id: 'voice', label: '音声通話', icon: '🎙️' },
{ id: 'video', label: 'ビデオ通話', icon: '📹' },
],
},
];
const s = allSteps[step - 1];
const selected = state.hearing[step];
const choose = (id) => patch({ hearing: { ...state.hearing, [step]: id } });
const next = () => {
if (step >= 4) {
patch({ hearingStep: 1 });
nav.go('hearing-transition', { replace: true });
} else {
patch({ hearingStep: step + 1 });
}
};
return (
{
if (step > 1) patch({ hearingStep: step - 1 });
else nav.go('onboarding', { replace: true, dir: 'back' });
}}
/>
{s.opts.map((o) => {
const sel = selected === o.id;
return (
);
})}
次へ
);
}
// ═══════════════════════════════════════════════════════════════════
// A-04c Transition — buffer between hearing and birthday
// ═══════════════════════════════════════════════════════════════════
function A04Transition() {
const nav = useNav();
const [cycleIdx, setCycleIdx] = React.useState(0);
const [showText, setShowText] = React.useState(false);
const elements = ['wind', 'fire', 'earth', 'water'];
const el = ELEMENTS[elements[cycleIdx]];
React.useEffect(() => {
const t1 = setTimeout(() => setShowText(true), 100);
const t2 = setTimeout(() => {
nav.go('birthday', { replace: true });
}, 2800);
return () => {
clearTimeout(t1);
clearTimeout(t2);
};
}, [nav]);
React.useEffect(() => {
let interval;
const startCycle = setTimeout(() => {
interval = setInterval(() => {
setCycleIdx((i) => (i + 1) % 4);
}, 700);
}, 1000);
return () => {
clearTimeout(startCycle);
if (interval) clearInterval(interval);
};
}, []);
return (
あなたのタイプを調べていきましょう
{[0, 1, 2].map((i) => (
))}
);
}
// ═══════════════════════════════════════════════════════════════════
// A-04b Birthday — determines Born Inner Type (4 elements)
// ═══════════════════════════════════════════════════════════════════
function A04Birthday() {
const nav = useNav();
const { state, patch } = useAppState();
const [year, setYear] = React.useState(state.birthYear ?? 1985);
const [month, setMonth] = React.useState(state.birthMonth ?? 7);
const [day, setDay] = React.useState(state.birthDay ?? 15);
const Field = ({ label, value, onChange, min, max, digits, flex = 1 }) => {
const [text, setText] = React.useState(String(value));
React.useEffect(() => {
setText(String(value));
}, [value]);
const commit = (raw) => {
const n = parseInt(raw, 10);
if (isNaN(n)) {
setText(String(value));
return;
}
const clamped = Math.max(min, Math.min(max, n));
onChange(clamped);
setText(String(clamped));
};
return (
{label}
setText(e.target.value.replace(/[^0-9]/g, ''))}
onBlur={(e) => commit(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') e.currentTarget.blur();
else if (e.key === 'ArrowUp') {
e.preventDefault();
onChange(Math.min(max, value + 1));
} else if (e.key === 'ArrowDown') {
e.preventDefault();
onChange(Math.max(min, value - 1));
}
}}
onFocus={(e) => e.currentTarget.select()}
className='ac-serif'
style={{
flex: 1,
minWidth: 0,
height: '100%',
background: 'transparent',
border: 'none',
outline: 'none',
fontSize: 24,
fontWeight: 500,
color: A.ink900,
textAlign: 'center',
padding: 0,
fontFamily: A.serif,
}}
/>
);
};
const next = async () => {
const bornType = bornTypeFromBirthday(month, day);
patch({ birthYear: year, birthMonth: month, birthDay: day, bornType });
// Save bornType to database so it persists after refresh
const user = state.currentUser;
if (user?.id && typeof DB !== 'undefined' && DB.updateProfile) {
try {
await DB.updateProfile({ born_type: bornType });
} catch (err) {
console.warn('Failed to save bornType:', err);
// Non-critical - appState still has it for this session
}
}
nav.go('type-reveal', { replace: true });
};
return (
あなたが
生まれた日を
教えてください
生まれた日には あなた本来の
「インナータイプ」が宿っています
数字をタップして直接入力、または − / + ボタンで調整できます
次へ
);
}
// ═══════════════════════════════════════════════════════════════════
// A-04d Type Reveal — dramatic reveal of Born Inner Type after birthday
// ═══════════════════════════════════════════════════════════════════
function A04TypeReveal() {
const nav = useNav();
const { state } = useAppState();
const bornType = state.bornType || bornTypeFromBirthday(state.birthMonth || 7, state.birthDay || 15);
const el = ELEMENTS[bornType];
const [showLabel, setShowLabel] = React.useState(false);
const [showCircle, setShowCircle] = React.useState(false);
const [showTitle, setShowTitle] = React.useState(false);
const [showSub, setShowSub] = React.useState(false);
const [showDots, setShowDots] = React.useState(false);
const [showBtn, setShowBtn] = React.useState(false);
React.useEffect(() => {
const t1 = setTimeout(() => setShowLabel(true), 200);
const t2 = setTimeout(() => setShowCircle(true), 1200);
const t3 = setTimeout(() => setShowTitle(true), 2200);
const t4 = setTimeout(() => setShowSub(true), 3000);
const t5 = setTimeout(() => setShowDots(true), 3800);
const t6 = setTimeout(() => setShowBtn(true), 4200);
return () => {
clearTimeout(t1);
clearTimeout(t2);
clearTimeout(t3);
clearTimeout(t4);
clearTimeout(t5);
clearTimeout(t6);
};
}, []);
const s = (v) => (v ? '1' : '0');
return (
あなたの生まれながらのサイン
{el.label}
{el.label}のサイン
{el.labelEn}
{[0, 1, 2].map((i) => (
))}
);
}
// ═══════════════════════════════════════════════════════════════════
// A-04e Diagnosis Intro — buffer between type reveal and 30 questions
// ═══════════════════════════════════════════════════════════════════
function A04DiagnosisIntro() {
const nav = useNav();
const [show, setShow] = React.useState(false);
React.useEffect(() => {
const t1 = setTimeout(() => setShow(true), 100);
const t2 = setTimeout(() => {
nav.go('diagnosis', { replace: true });
}, 2800);
return () => {
clearTimeout(t1);
clearTimeout(t2);
};
}, [nav]);
return (
30個の簡単な質問に答えると
あなたのインナータイプが出ます
{[0, 1, 2].map((i) => (
))}
);
}
// ═══════════════════════════════════════════════════════════════════
// A-04f Result Intro — buffer between 30 questions and result
// ═══════════════════════════════════════════════════════════════════
function A05ResultIntro() {
const nav = useNav();
const [show, setShow] = React.useState(false);
React.useEffect(() => {
const t1 = setTimeout(() => setShow(true), 100);
const t2 = setTimeout(() => {
nav.go('result', { replace: true });
}, 2800);
return () => {
clearTimeout(t1);
clearTimeout(t2);
};
}, [nav]);
return (
ここからあなたのタイプに
合う専門家を見つけていきましょう
{[0, 1, 2].map((i) => (
))}
);
}
// ═══════════════════════════════════════════════════════════════════
// A-05 Diagnosis — 30-question Inner Type Guide (Wind / Fire / Earth)
// ═══════════════════════════════════════════════════════════════════
function A05Diagnosis() {
const nav = useNav();
const { state, patch } = useAppState();
const q = state.diagQ;
const total = DIAG_QUESTIONS.length; // 30
const item = DIAG_QUESTIONS[q - 1];
const selected = state.diagnosis[q];
const choose = (i) => {
const next = { ...state.diagnosis, [q]: i };
patch({ diagnosis: next });
setTimeout(() => {
if (q >= total) {
patch({ diagQ: 1 });
nav.go('result-intro', { replace: true });
} else {
patch({ diagQ: q + 1 });
}
}, 280);
};
// Back: step through previous questions; from Q1, back to Birthday
const goBack = () => {
if (q > 1) {
patch({ diagQ: q - 1 });
} else {
nav.go('birthday', { replace: true, dir: 'back' });
}
};
// Tap on progress to skip ahead with random answers (demo helper)
const skipAhead = (e) => {
e.stopPropagation();
const filled = { ...state.diagnosis };
for (let i = 1; i <= total; i++) {
if (filled[i] == null) filled[i] = Math.floor(Math.random() * 3);
}
patch({ diagnosis: filled, diagQ: 1 });
nav.go('result-intro', { replace: true });
};
return (
}
title='インナータイプガイド'
trailing={
{q} / {total}
}
/>
QUESTION {String(q).padStart(2, '0')}
{item.q}
{item.opts.map((label, i) => {
const sel = selected === i;
return (
);
})}
{/* Neutral choice — for questions where none of the three fit */}
);
}
// ═══════════════════════════════════════════════════════════════════
// A-05 Result — Born × Current dual-sign comparison + AI message
// ═══════════════════════════════════════════════════════════════════
function A05Result() {
const nav = useNav();
const { state, patch } = useAppState();
// Born type from birthday (fall back to mock default)
const bornType = state.bornType || bornTypeFromBirthday(state.birthMonth || 7, state.birthDay || 15);
const born = ELEMENTS[bornType];
// Current sign from 30Q answers
const sign = computeCurrentSign(state.diagnosis || {});
const currentDom = sign.dominant;
// Save to user state on first render
React.useEffect(() => {
patch({
bornType,
currentDom,
currentMix: { wind: sign.wind, fire: sign.fire, earth: sign.earth },
// Update displayed type label everywhere else (home, etc.)
type: bornType,
typeLabel: `${born.label}のサイン`,
typeDesc: born.desc,
});
// eslint-disable-next-line
}, []);
const message = pairMessage(bornType, currentDom);
// Pretty label for the current sign — uses サイン (not タイプ) per design spec
const currentLabel =
currentDom === 'trinity'
? '風・火・土の調和'
: currentDom
.split('+')
.map((k) => ELEMENTS[k].label)
.join('・');
// Short label inside the circle (no spaces, no plus)
const currentGlyph =
currentDom === 'trinity'
? '調和'
: currentDom
.split('+')
.map((k) => ELEMENTS[k].label)
.join('');
const currentSignLabel = currentDom === 'trinity' ? '調和のサイン' : `${currentLabel}のサイン`;
// Recommended categories based on born type
const RECS = {
wind: ['心のアンカー', '未来のアンカー', '社会的なアンカー'],
fire: ['未来のアンカー', '社会的なアンカー', '体のアンカー'],
earth: ['社会的なアンカー', '体のアンカー', '心のアンカー'],
water: ['心のアンカー', '体のアンカー', '未来のアンカー'],
};
return (
{/* Hero */}
あなたのインナータイプ
{/* Two element circles */}
{/* Born */}
{/* connector */}
×
{/* Current */}
今のインナーサイン
= 3 ? 16 : currentGlyph.length === 2 ? 22 : 30,
fontWeight: 500,
boxShadow: '0 4px 22px rgba(0,0,0,0.3)',
letterSpacing: currentGlyph.length >= 3 ? 0 : 1,
}}>
{currentGlyph}
{/* Body */}
{/* Current energy bar */}
いまのエネルギーバランス
30問の回答より
{['wind', 'fire', 'earth'].map((k) => (
{ELEMENTS[k].label}
{sign[k]}%
))}
{/* AI personalized message */}
NAVIYELL AI からのメッセージ
{message}
{/* Born type detail */}
{born.label}
生まれながらの「{born.label}のサイン」
{born.desc}
{/* Current sign detail */}
{currentDom !== 'trinity' && !currentDom.includes('+') && (
{ELEMENTS[currentDom].label}
いまの「{ELEMENTS[currentDom].label}のサイン」
{ELEMENTS[currentDom].desc}
)}
{/* Recommended categories */}
おすすめのカテゴリー
{(RECS[bornType] || RECS.wind).map((c) => (
{c}
))}