/* InvitationPage — 私人邀请式落地页 */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const { motion, AnimatePresence, cubicBezier } = window.Motion;
/* ============ design tokens ============ */
const C = {
bg: '#0F0A0D',
gold: '#D4AF7A',
wine: '#6B1028',
plum: '#2A1620',
cream: '#F5E6D3',
rose: '#A89084',
};
/* cinematic easing */
const EASE = cubicBezier(0.25, 0.1, 0.25, 1);
const fadeUp = {
initial: { opacity: 0, y: 30 },
animate: { opacity: 1, y: 0 },
transition: { duration: 1.2, ease: EASE },
};
const fadeUpView = (delay = 0) => ({
initial: { opacity: 0, y: 30 },
whileInView: { opacity: 1, y: 0 },
viewport: { once: true, amount: 0.35 },
transition: { duration: 1.2, ease: EASE, delay },
});
/* ============ inline icons (lucide-style, hairline) ============ */
const Icon = ({ d, size = 22, stroke = 1.4, children, ...rest }) => (
);
const IconSend = (p) => (
);
const IconMsg = (p) => (
);
const IconMail = (p) => (
);
const IconMusic = (p) => (
);
const IconHeart = (p) => (
);
const IconChevron = (p) => ;
const IconMessageSquare = (p) => (
);
const IconPause = (p) => (
);
const IconVideo = (p) => (
);
/* ============ silhouette SVG (man, hairline) ============ */
const Silhouette = () => (
);
/* hairline crown */
const Crown = () => (
);
/* full dog silhouette — sitting profile, head tilted back & looking up at owner */
const DogSilhouette = () => (
);
/* tiny collar icon used as Wolf card footer ornament */
const MiniCollar = () => (
);
/* tiny chain icon used as King card footer / under-crown ornament */
const MiniChain = () => (
);
/* silk · heel · final — AI-composited photograph with film-grain treatment */
const ObjetLegHeel = () => (
);
/* whiskey glass with ice ball */
const ObjetWhiskey = () => (
);
/* ribbon collar with heart pendant */
const ObjetRibbon = () => (
);
/* ============ rose visual system (wine red + champagne gold) ============ */
const ROSE_PETALS_7 = [
'M 20 38 C 12 30, 14 14, 32 14 C 38 22, 36 38, 20 38 Z',
'M 80 38 C 88 30, 86 14, 68 14 C 62 22, 64 38, 80 38 Z',
'M 28 46 C 22 38, 28 22, 44 22 C 48 30, 44 46, 28 46 Z',
'M 72 46 C 78 38, 72 22, 56 22 C 52 30, 56 46, 72 46 Z',
'M 38 22 C 42 12, 58 12, 62 22 C 58 28, 42 28, 38 22 Z',
'M 44 36 C 40 30, 48 22, 50 30 C 50 38, 44 36, 44 36 Z',
'M 50 30 C 52 22, 60 30, 56 36 C 52 38, 50 30, 50 30 Z',
];
const ROSE_PETALS_11 = [
'M 8 44 C 2 32, 10 4, 34 2 C 44 12, 42 46, 8 44 Z',
'M 92 44 C 98 32, 90 4, 66 2 C 56 12, 58 46, 92 44 Z',
'M 18 56 C 8 48, 14 32, 30 32 C 36 42, 32 58, 18 56 Z',
'M 82 56 C 92 48, 86 32, 70 32 C 64 42, 68 58, 82 56 Z',
...ROSE_PETALS_7,
];
/* solid SVG rose — back-to-front layered petals + optional stem + optional gold pistil */
function Rose({ size = 60, withStem = true, pistil = true, pistilNode, vTone = 'normal' }) {
const id = useMemo(() => `rose-${Math.random().toString(36).slice(2, 7)}`, []);
const vbH = withStem ? 130 : 62;
const aspect = vbH / 100;
return (
);
}
/* the chapter-3½ blooming rose — 11 petals, staggered animation, breathing after.
* iOS Safari / WeChat fix:
* - dropped per-path `scale` + `transform-box: fill-box` (broken on older WebKit;
* petals scaled to a point off-screen → invisible; stems survived because
* they use `pathLength`, not transform). Now opacity-only on petals/leaves/pistil/dew.
* - manual bloom state driven by IntersectionObserver (threshold 0.15) with a
* 3s setTimeout fallback that force-blooms if IO never fires (covers WeChat
* in-app browser edge cases where IO can be flaky inside iframes / overlays).
* - WebkitTransform: translateZ(0) on wrapper to promote compositing layer.
*/
function BloomingRose({ size = 280 }) {
const id = useMemo(() => `bloom-${Math.random().toString(36).slice(2, 7)}`, []);
const total = ROSE_PETALS_11.length;
const animDuration = 0.9; // per petal
const stagger = 0.15;
const lastDelay = (total - 1) * stagger; // 10 * 0.15 = 1.5
const totalBloomTime = lastDelay + animDuration; // ≈ 2.4s
const ref = useRef(null);
const [bloom, setBloom] = useState(false);
const reducedMotion = useMemo(
() => typeof window !== 'undefined'
&& window.matchMedia?.('(prefers-reduced-motion: reduce)').matches,
[]
);
useEffect(() => {
if (bloom) return;
// prefers-reduced-motion: bloom immediately, no observer, no stagger
if (reducedMotion) { setBloom(true); return; }
// 3s hard fallback — petals appear (without stagger) even if IO never fires
const fallback = setTimeout(() => setBloom(true), 3000);
if (!('IntersectionObserver' in window) || !ref.current) {
return () => clearTimeout(fallback);
}
const io = new IntersectionObserver((entries) => {
for (const e of entries) {
if (e.isIntersecting) {
setBloom(true);
io.disconnect();
clearTimeout(fallback);
break;
}
}
}, { threshold: 0.15, rootMargin: '0px 0px -5% 0px' });
io.observe(ref.current);
return () => { io.disconnect(); clearTimeout(fallback); };
}, [bloom, reducedMotion]);
// when reduced-motion is on, render petals at final opacity in one shot, no stagger
const petalDelay = (reverseIdx) => (reducedMotion ? 0 : (bloom ? reverseIdx * stagger : 0));
const breath = (bloom && !reducedMotion) ? { scale: [1, 1.02, 1] } : { scale: 1 };
return (
);
}
/* mini rose for inline icon-scale anchors (≤ 28px) */
function MiniRose({ size = 24, withCenterDot = true }) {
const id = useMemo(() => `mini-${Math.random().toString(36).slice(2, 7)}`, []);
return (
);
}
/* ============ section: rose chapter (3½) — single blooming rose, emotional pause ============ */
function RoseChapter() {
const isMobile = useIsMobile();
return (
{/* faint wine wash behind the bloom */}
第三章半 · 一朵玫瑰
{/* the blooming rose */}
这朵 · 只为里里
不会送你第二次 · 因为第一次就是最后一次
one rose · forever yours
);
}
/* ============ helpers ============ */
const ProgressDots = ({ total, current }) => (
{Array.from({ length: total }).map((_, i) => {
const active = i === current;
return (
);
})}
);
/* "轻轻推开" — primary entry button with ripple on click */
function PushOpenButton({ onClick, delay = 1.2 }) {
const [ripples, setRipples] = useState([]);
const idRef = useRef(0);
const click = () => {
const id = ++idRef.current;
setRipples((r) => [...r, id]);
setTimeout(() => setRipples((r) => r.filter(x => x !== id)), 900);
onClick?.();
};
return (
{/* ripple halos */}
{ripples.map((id) => (
))}
轻轻推开
);
}
/* ============ section: hero ============ */
function Hero({ onEnter }) {
const ref = useRef(null);
const isMobile = useIsMobile();
const [mouse, setMouse] = useState({ x: 0, y: 0 });
const target = useRef({ x: 0, y: 0 });
const raf = useRef(0);
// ceremonial intro: 0-1.2s pulsing dot center, 1.2-2.2s dot→line up, 2.5s done
const [phase, setPhase] = useState(0); // 0 = dot, 1 = line, 2 = done
useEffect(() => {
const t1 = setTimeout(() => setPhase(1), 1200);
const t2 = setTimeout(() => setPhase(2), 2500);
return () => { clearTimeout(t1); clearTimeout(t2); };
}, []);
useEffect(() => {
const handle = (e) => {
const r = ref.current?.getBoundingClientRect();
if (!r) return;
const cx = r.left + r.width / 2;
const cy = r.top + r.height / 2;
target.current = { x: (e.clientX - cx) * 0.06, y: (e.clientY - cy) * 0.06 };
};
const loop = () => {
setMouse((m) => ({
x: m.x + (target.current.x - m.x) * 0.05,
y: m.y + (target.current.y - m.y) * 0.05,
}));
raf.current = requestAnimationFrame(loop);
};
window.addEventListener('mousemove', handle);
raf.current = requestAnimationFrame(loop);
return () => { window.removeEventListener('mousemove', handle); cancelAnimationFrame(raf.current); };
}, []);
return (
{/* radial glow */}
{/* secondary smaller glow for depth */}
{/* === ceremony layer: dot → line, absolutely positioned over the section === */}
{phase === 0 && (
)}
{phase === 0 && (
为你 · 仅此一人
)}
晚安
或者,陪我熬一会儿,里里
推开门 · 音乐已为你准备好
向下
{/* exclusive page number — L.L */}
里里
独此一份
{/* hidden rose — Hero's quiet bloom of intent (bottom-left, far from scroll indicator) */}
{/* deep wine warmth rising from the bottom of the hero */}
);
}
/* ============ section: objets — 为你准备的 ============ */
function Objets() {
const isMobile = useIsMobile();
const items = [
{
Svg: ObjetLegHeel,
title: '想看你穿着它,走过来',
sub: '也想看你穿着它,站在我面前',
details: [
'高跟敲在地板上的声音',
'丝袜在小腿弯曲时拉伸的弧度',
'你停在我面前问"好看吗"的眼神',
],
xtra: 'silk · heel · for her, only',
label: '其一 · 丝袜与高跟',
},
{
Svg: ObjetWhiskey,
title: '想看你拿着它,慢慢喝',
sub: '喝完再说要不要看我',
label: '其二 · 威士忌不加冰',
},
{
Svg: ObjetRibbon,
title: '想看你戴上它,或者给我戴上',
sub: '你做主人 · 还是让我做',
label: '其三 · 丝带与项圈',
},
];
return (
{/* faint horizontal wine wash for atmosphere */}
{/* huge ghost rose at center-right — atmospheric backdrop */}
第三章 · 为你准备
为你准备的
因为这些,你穿得起,里里
{items.map((it, idx) => (
{idx > 0 && (
)}
))}
你挑就好,剩下的交给我
);
}
function ObjetCard({ Svg, title, sub, details, xtra, label, idx }) {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
className="group relative flex-1 flex flex-col items-center px-6 py-10"
style={{
transition: 'background 0.6s, border-color 0.6s',
}}>
{/* index label */}
{label}
{/* svg holder */}
{/* hairline */}
{/* copy */}
{title}
{sub}
{details && details.length > 0 && (
{details.map((d, i) => (
· {d} ·
))}
)}
{xtra && (
{xtra}
)}
{/* silhouette */}
{/* lines */}
{lines.map((t, i) => (
{t}
))}
致里里,我还没见过你,但已经为你准备好了
{/* front */}
{side === 'front' ? '·' : ''}
{accent}
{front.icon}
{front.below &&
{front.below}
}
{front.title}
{front.tag}
{front.no === '01' ? '第一张' : '第二张'}
{front.ornament && {front.ornament}}
翻面 ›
{/* back */}
{accent}
背面
{back.lines.map((l, i) => (
{l}
))}
{back.footer && (
{back.footer}
)}
‹ 翻面
{front.no === '01' ? '第一张' : '第二张'}
);
}
function TwoFaces() {
const [a, setA] = useState('front');
const [b, setB] = useState('front');
return (
第四章 · 两面
看你今晚,想牵哪一只
两面都是真的
由你决定,里里
setA(a === 'front' ? 'back' : 'front')}
accent="其一 · 小狗"
front={{
no: '01',
icon: ,
title: 'Wolf',
tag: '你的狗 · 等你回家',
ornament: ,
}}
back={{
lines: [
'你从外面回来时 · 我已经在门口等你',
'你坐下 · 我把头靠在你膝盖上',
'你说"乖" · 我就知道今晚我属于你',
'你说趴下 · 我就趴下',
'你说过来 · 我就过来',
],
footer: '我的项圈 · 你来戴，里里',
}}
/>
{/* axis dot — visual signature between the two faces */}
setB(b === 'front' ? 'back' : 'front')}
tone="wine"
accent="其二 · 主人"
front={{
no: '02',
icon: ,
title: 'King',
tag: '你的主人 · 慢一点教你',
below: ,
}}
back={{
lines: [
'你站在我面前 · 我让你转个圈给我看',
'你想反抗的时候 · 我会让你坐到我腿上',
'你说"我学不会" · 我说"没关系，我慢慢教你"',
'我不急',
'你迟早会喊我先生',
],
footer: '叫我先生，里里',
}}
/>
轻触翻面
);
}
/* ============ section: 3 questions ============ */
const QUESTIONS = [
{
q: '深夜的画面里,你更想——',
a: [
{ k: 'A', t: '被人轻轻盖好被子,听他说晚安' },
{ k: 'B', t: '给某个人盖好被子,看他睡着的脸' },
{ k: 'C', t: '都想,看那天我是谁' },
],
},
{
q: '如果给你一支酒——',
a: [
{ k: 'A', t: '你坐在沙发上,我坐在你脚边' },
{ k: 'B', t: '我把你按在沙发上,你也不挣扎' },
{ k: 'C', t: '我们换着位置,谁先认输都行' },
],
},
{
q: '你觉得最性感的一幕——',
a: [
{ k: 'A', t: '一只手解开衬衫第三颗扣子' },
{ k: 'B', t: '一双高跟鞋踩在地毯上的轻响' },
{ k: 'C', t: '一杯威士忌从他指尖滑到我嘴边' },
],
},
];
function Quiz({ answers, setAnswers }) {
const [i, setI] = useState(0);
const [dir, setDir] = useState(1);
const pick = (k) => {
const next = [...answers]; next[i] = k; setAnswers(next);
if (i < QUESTIONS.length - 1) { setDir(1); setTimeout(() => setI(i + 1), 200); }
};
const goBack = () => { if (i > 0) { setDir(-1); setI(i - 1); } };
const total = QUESTIONS.length;
const q = QUESTIONS[i];
return (
第五章 · 测我们的形状
{q.q}
{q.a.map((opt) => {
const active = answers[i] === opt.k;
return (
);
})}
{String(i + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
下一题
);
}
/* ============ section: result spectrum ============ */
function Result({ answers }) {
const score = useMemo(() => {
let countA = 0, countB = 0;
answers.forEach(a => { if (a === 'A') countA++; else if (a === 'B') countB++; });
// score in [-1, 1]: -1 全A, +1 全B
const filled = answers.filter(Boolean).length;
const s = filled === 0 ? 0 : (countB - countA) / QUESTIONS.length;
return { s, countA, countB, filled };
}, [answers]);
const labels = useMemo(() => {
if (score.filled === 0) return { label: '等你做完三题', sub: '' };
if (score.countA >= 2) return { label: '你想被宠', sub: '想被牵 · 里里' };
if (score.countB >= 2) return { label: '你想宠人', sub: '想牵人 · 里里' };
return { label: '你想要全部', sub: '都想拿 · 里里' };
}, [score]);
const label = labels.label;
const subLabel = labels.sub;
// dot angle on a top semicircle. -90deg = top. Map s∈[-1,1] to angle [-180, 0]
// Actually we want left/right around the top of ring.
const angleDeg = -90 + score.s * 90; // -180=left, -90=top, 0=right
const r = 195; // ring radius
const rad = (angleDeg * Math.PI) / 180;
const dotX = 200 + r * Math.cos(rad);
const dotY = 200 + r * Math.sin(rad);
return (
第六章 · 光谱
{/* center label */}
你的位置
{label}
{subLabel && (
{subLabel}
)}
{subLabel && (
致 · 里里
)}
刚好,我都给得了
);
}
/* ============ section: secret phrase ============ */
function Secret() {
const PHRASES = [
{ id: 'soft', mood: '如果今晚你想被找', phrase: '今晚的月亮借我看看' },
{ id: 'dom', mood: '如果今晚你想找人', phrase: '今晚的月亮 · 你许我吗' },
];
const [copied, setCopied] = useState(null); // id of last copied card
const copy = async (id, text) => {
try {
await navigator.clipboard.writeText(text);
} catch {
const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t);
t.select(); document.execCommand('copy'); document.body.removeChild(t);
}
try { navigator.vibrate?.(50); } catch {}
setCopied(id);
setTimeout(() => setCopied((c) => (c === id ? null : c)), 3000);
};
return (
第七章 · 暗号
Lili,
如果你读到这里
还没关掉这一页
就把这句话发给我:
{/* dual phrase cards */}
{/* vertical hairline divider between cards (desktop only) — with center mini-rose signature */}
{PHRASES.map((p, idx) => {
const isCopied = copied === p.id;
return (
{p.mood}
「{p.phrase}」
);
})}
你选哪一句 · 我就知道今晚我是谁
);
}
/* ============ section: three doors ============ */
function Doors() {
const [open, setOpen] = useState(null);
const doors = [
{ key: 'wx', Icon: IconMessageSquare, label: '微信', handle: '_woshiyao_', sub: '加我备注：里里' },
{ key: 'douyin', Icon: IconVideo, label: '抖音', handle: '我名一个里', sub: '也可以在这里看到我' },
];
return (
第八章 · 三扇门
挑一扇门,里里
哪一扇你都可以推
{doors.map(({ key, Icon, label }, idx) => {
const active = open === key;
return (
{idx > 0 && (
)}
);
})}
{open && (
{doors.find(d => d.key === open)?.label}
{doors.find(d => d.key === open)?.handle}
{doors.find(d => d.key === open)?.sub}
)}
{/* Layer 2: hidden secret name buttons — 64px breathing room above */}
{/* Layer 3: closing line — 32px below the hidden buttons */}
不急 · 我在等你 · 里里
);
}
/* hidden text buttons under the doors — only for those who know what to look for */
function SecretNameButtons() {
const [copied, setCopied] = useState(null);
const buttons = [
{ id: 'sir', label: '喊我先生', text: '先生' },
{ id: 'dog', label: '叫我狗', text: '狗狗' },
];
const copy = async (id, text) => {
try { await navigator.clipboard.writeText(text); }
catch {
const t = document.createElement('textarea'); t.value = text; document.body.appendChild(t);
t.select(); document.execCommand('copy'); document.body.removeChild(t);
}
try { navigator.vibrate?.(50); } catch {}
setCopied(id);
setTimeout(() => setCopied((c) => (c === id ? null : c)), 3000);
};
return (
{buttons.map((b, i) => (
{i > 0 && }
))}
);
}
/* ============ section: outro / coda ============ */
function Outro({ audioRef, fadeTo, targetVol }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (!audioRef.current) return;
if (e.isIntersecting) {
// entering coda — sink to 0.3
if (!audioRef.current.muted) fadeTo(0.3, 2000);
} else {
// leaving coda — back to target
if (!audioRef.current.muted) fadeTo(targetVol, 2000);
}
});
}, { threshold: 0.45 });
obs.observe(el);
return () => obs.disconnect();
}, [audioRef, fadeTo, targetVol]);
return (
{/* breathing signature dot */}
看到这里 · 你已经在我的故事里了
晚安, Lili. 或者, 不晚安
邀请函 · 第 0001 号 · 仅此一份
);
}
/* ============ section: sealed signature (final coda) ============ */
function WaxSeal() {
return (
{/* L · L letters + latin tag, layered on top */}
);
}
function SealedSignature({ audioRef, fadeTo, targetVol }) {
const isMobile = useIsMobile();
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el || !audioRef) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (!audioRef.current) return;
if (audioRef.current.muted) return;
if (e.isIntersecting) fadeTo(0.3, 2000);
else fadeTo(targetVol, 2000);
});
}, { threshold: 0.45 });
obs.observe(el);
return () => obs.disconnect();
}, [audioRef, fadeTo, targetVol]);
return (
{/* top english */}
Sealed with intention,
{/* wax seal — central, with stamp-down entrance */}
{/* expanding gold halo behind seal */}
{/* three companion roses around the seal */}
{[
{ x: isMobile ? -46 : -60, y: isMobile ? -24 : -34, rotate: -22, delay: 0.7 },
{ x: isMobile ? 46 : 60, y: isMobile ? -24 : -34, rotate: 22, delay: 0.9 },
{ x: 0, y: isMobile ? 70 : 84, rotate: 0, delay: 1.1 },
].map((r, i) => (
))}
{/* main signature line */}
这一封 · 只为里里写过
{/* bottom */}
不会有第二份 · 也不会有第二个你
);
}
/* ============ cursor dust ============ */
function CursorDust() {
const [parts, setParts] = useState([]);
const idRef = useRef(0);
const lastRef = useRef(0);
useEffect(() => {
const onMove = (e) => {
const now = performance.now();
if (now - lastRef.current < 40) return; // throttle
lastRef.current = now;
const batch = Array.from({ length: 3 }).map(() => ({
id: ++idRef.current,
x: e.clientX + (Math.random() - 0.5) * 14,
y: e.clientY + (Math.random() - 0.5) * 14,
dx: (Math.random() - 0.5) * 30,
dy: (Math.random() - 0.5) * 30 - 10,
}));
setParts((p) => [...p.slice(-24), ...batch]);
setTimeout(() => {
setParts((p) => p.filter(x => !batch.find(b => b.id === x.id)));
}, 1500);
};
window.addEventListener('mousemove', onMove);
return () => window.removeEventListener('mousemove', onMove);
}, []);
return (
{parts.map(p => (
))}
);
}
/* ============ music toggle ============ */
function MusicToggle({ on, loading, onToggle }) {
const isMobile = useIsMobile();
const [hover, setHover] = useState(false);
const [tapShow, setTapShow] = useState(false);
const tapTimer = useRef(null);
const showInfo = isMobile ? tapShow : hover;
const handleClick = () => {
if (isMobile && !tapShow) {
setTapShow(true);
clearTimeout(tapTimer.current);
tapTimer.current = setTimeout(() => setTapShow(false), 3000);
}
onToggle?.();
};
return (
!isMobile && setHover(true)}
onMouseLeave={() => !isMobile && setHover(false)}>
{showInfo && (
一半一半
Top Barry · INDEcompany
)}
{Array.from({ length: total }).map((_, i) => {
const active = i === current;
const passed = i < current;
return (
);
})}
);
}
/* landscape orientation hint — short-side phone rotated to landscape gets a "please rotate" overlay */
function LandscapeOverlay() {
const isPhoneLandscape = useIsLandscapePhone();
if (!isPhoneLandscape) return null;
return (
{/* rotating phone icon */}
请竖屏浏览
为里里准备的私人信笺 · 竖屏才完整
{/* hidden audio element */}