// Hero — left: copy + CTA; right: animated browser window showing Mark → Explain → Moodboard loop function Hero({ lang }) { const isMobile = useIsMobile(); return (
); } function HeroCopy({ lang }) { const isMobile = useIsMobile(); return (
{t(COPY.hero.eyebrow, lang)}

{t(COPY.hero.title1, lang)}
{t(COPY.hero.title2, lang)}

{t(COPY.hero.lede, lang)}

{ e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'none'; }} onMouseDown={e => { e.currentTarget.style.transform = 'scale(0.97)'; }} onMouseUp={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }} > {t(COPY.hero.cta, lang)} {t(COPY.hero.subcta, lang)}
{t(COPY.hero.meta, lang)}
); } function HeroStats({ lang }) { const isMobile = useIsMobile(); return (
{COPY.stats.map((s, i) => (
{s.num}
{t({ zh: s.zh, en: s.en }, lang)}
))}
); } /* Animated browser window — loops through Mark → Explain → Moodboard states */ function HeroAnimation({ lang }) { const isMobile = useIsMobile(); // Phase 0: clean page, 1: selected, 2: mark bubble, 3: explain card, 4: saved + flying card, 5: on moodboard const [phase, setPhase] = React.useState(0); React.useEffect(() => { const steps = [ [0, 1200], [1, 900], [2, 900], [3, 2400], [4, 1200], [5, 1800], ]; let t; let i = 0; const tick = () => { const [p, d] = steps[i]; setPhase(p); i = (i + 1) % steps.length; t = setTimeout(tick, d); }; tick(); return () => clearTimeout(t); }, []); // Hide on mobile after hooks run — the browser mockup has absolute-positioned moodboard cards that overflow below 420px viewport if (isMobile) return null; const passage = lang === 'zh' ? '昼夜节律以大约 24 小时为周期组织行为, 由光设定, 每个清晨重置.' : 'Circadian rhythms organize behavior on roughly 24-hour cycles, set by light and reset every morning.'; return (
{/* Browser chrome */}
{/* Chrome top bar */}
{['#ff5f57','#febc2e','#28c840'].map(c =>
)}
nature.com / circadian-rhythms
{/* LumiNote toolbar icon with pulse */}
{/* Page body */}
{lang === 'zh' ? '生物时间的几何' : 'The geometry of biological time'}
{lang === 'zh' ? 'Nature · 2026 年 4 月' : 'Nature · April 2026 · 7 min read'}

{lang === 'zh' ? '在漫长的演化历程中, 光的节律决定了行为的节律. 植物朝着太阳倾斜, 人类随着日出醒来. ' : 'For most of evolutionary history, the rhythm of light defined the rhythm of behavior. Plants tilt to the sun; humans wake with it. '} = 1 ? 'rgba(26,107,74,0.22)' : 'transparent', borderRadius: 2, transition: 'background 250ms', padding: '1px 2px', }}>{passage} {' '} {lang === 'zh' ? '看似是习惯的东西, 其实往往是一只钟.' : 'What looks like a habit is, very often, a clock.'}

{lang === 'zh' ? '这套机制比动物更古老. PER 和 CRY 蛋白之间的几个反馈回路…' : 'The mechanism turns out to be older than animals. A handful of feedback loops…'}

{/* Mark bubble */} {phase >= 2 && phase <= 3 && (
Mark
)} {/* Explain card */} {phase >= 3 && phase <= 4 && (
nature.com · {lang === 'zh' ? '生物时间的几何' : 'The geometry of biological time'}
{passage}
{[lang === 'zh' ? '简洁' : 'Brief', lang === 'zh' ? '详细' : 'Detailed', lang === 'zh' ? '深度' : 'Deep'].map((l, i) => (
{l}
))}
{lang === 'zh' ? '一个几乎每个细胞都自带的 24 小时计时器. 黎明的光会把它拉回与世界同相位; 没有光, 它每天漂移 ~10 分钟.' : 'A 24-hour timer almost every cell carries. Dawn light nudges it into phase with the world; without it, drifts ~10 min/day.'}
)} {/* Flying card — appears phase 4 */} {phase === 4 && (
)} {/* Moodboard overlay — phase 5 */} {phase === 5 && (
{lang === 'zh' ? '昼夜生物学' : 'Circadian biology'}
{lang === 'zh' ? '9 张卡 · 刚刚更新' : '9 cards · just updated'}
{/* cards */}
{passage.slice(0, 52)}…
)}
{/* Floating label */}
); } function MiniCard({ x, y, w, warm, img, first, children, accent, newEntry }) { return (
{children}
); } function PhaseLabel({ phase, lang }) { const labels = lang === 'zh' ? ['打开任意网页', '选中一段文字', '点击 Mark 气泡', 'AI 流式解释', '保存到记忆', '落到灵感板'] : ['Open any page', 'Select text', 'Click Mark', 'AI streams in', 'Save to memory', 'Lands on moodboard']; return (
{`0${phase + 1}`.slice(-2)} · {labels[phase]} {labels.map((_, i) => ( ))}
); } // Keyframe injection const heroAnimStyle = document.createElement('style'); heroAnimStyle.textContent = ` @keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(0.85); } to { opacity: 1; transform: none; } } @keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes cardLand { 0% { opacity: 0; transform: translate(30px, -40px) scale(0.7) rotate(8deg); } 100% { opacity: 1; transform: none; } } @keyframes flyCard { 0% { opacity: 0; transform: translate(0,0) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-260px, -260px) scale(1) rotate(-10deg); } } @keyframes flyOut { to { opacity: 0; transform: translateY(-40px) scale(0.8); } } @keyframes blink { 50% { opacity: 0.3; } } `; document.head.appendChild(heroAnimStyle); Object.assign(window, { Hero });