{/* Left: explanation */}

第四章 · 產品

最小單位：一張故事卡片

一張卡片 = 一個真實故事 + 一個核心體悟

{[ { k: '私下記錄', v: '先用卡片捕捉每個靈光，不必一次寫出完整故事', seed: 41 }, { k: 'AI 整理', v: '幫你找回過去的洞見，讓碎片成為故事的材料', seed: 67 }, { k: '你來述說', v: '故事永遠由你親自完成──真實感與人的溫度，無法外包', seed: 93 }, ].map(item => (

{item.k}

{item.v}

))}

{/* Right: stacked cards */}

{/* Left card — tilted left, behind */}

{/* Right card — tilted right, behind */}

{/* Center card — straight, front */}

Thought

19 歲時破產，反而是覺察幸福的開端

看著螢幕上跳動的數字，我愚笨地把槓桿交易當作戳戳樂。整個人在恐懼與貪婪的極限當中，瘋狂擺盪。隨著一則又一則的爆倉通知出現，我明白，自己嚴然沒有了回頭路...

念誠

168 人與你共振

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 07 — AI: the two worlds meet // ═══════════════════════════════════════════════════════════════════════════ function Slide07WhyUs() { const stages = [ { num: '01', title: 'Tuckin\n用聚餐，連起溫度', body: '以個性與飲食習慣配對成大不同科系的陌生同學共餐，探索人與人相聚的起點，並於雙平臺上架。', images: ['images/project-tuckin-1.webp', 'images/project-tuckin-2.webp'], bullets: [ '上線後吸引 200 位同學註冊', '第一次活動有 6 組同學，共 30 人參加', ], fill: 'oklch(86% 0.065 140)', stroke: 'oklch(40% 0.10 145)', }, { num: '02', title: '真實聚會\n精細組合', body: '保留線下場域設計，以興趣、人生狀態、邊界與聚會習慣多維配對，讓真正相似的人面對面相聚。', images: ['images/project-gathering-1.webp', 'images/project-gathering-2.webp'], bullets: [ '透過表單實現 POC', '實際舉辦真實聚會', ], fill: 'oklch(86% 0.060 290)', stroke: 'oklch(42% 0.10 280)', }, { num: '03', title: '共振\n真實故事', body: '發現連結的核心是信念的相遇。打造線上平臺，讓每個人的獨特洞見找到共鳴，形成真正的歸屬。', images: ['images/project-resonance.webp'], bullets: [], fill: 'var(--color-terracotta-light)', stroke: 'oklch(36% 0.13 45)', }, ]; function ImageGrid({ images, stroke }) { const single = images.length === 1; return (

{images.map((src, i) => (

))}

); } return ( }>

{stages.map((stage, i) => (

{stage.num}

{stage.title}

{stage.body}

{stage.bullets.length > 0 && (

✦ {b}

)} ))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 08 — Team intro // ═══════════════════════════════════════════════════════════════════════════ function Slide08Team() { const members = [ { initials: '陳', name: '陳念誠', dept: '資訊工程學系大五', role: 'Tuckin App 發想人', color: 'var(--color-terracotta-light)', seed: 11, photo: 'images/member-chen.webp' }, { initials: '蕭', name: '蕭力文', dept: '工程科學系碩二', role: 'App 開發者・AI 應用專長', color: 'var(--color-sage)', seed: 37, photo: 'images/member-hsiao.webp' }, { initials: '方', name: '方昱晴', dept: '資訊工程學系大三', role: '驗證真實聚會提案・賣帽帽負責人', color: 'var(--color-lavender)', seed: 61, photo: 'images/member-fang.webp' }, { initials: '鄭', name: '鄭義信', dept: '成大工資管所碩士\n工資管・電機雙學士', role: '翔超科技董事\n泳鉅鑫再生塑料資訊顧問', color: 'var(--color-yellow)', seed: 83, photo: 'images/member-cheng.webp' }, ]; return ( } decor={

} >

頻審團的工作是頻分，將所有說故事的機會平分給每一個人 } /> {/* Team members — 2×2 grid */}

{members.map((m, i) => (

{m.name}

{m.dept}

{m.role}

))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 09 — First battlefield: who we serve // ═══════════════════════════════════════════════════════════════════════════ function Slide09WhoWeServe() { const signals = [ 'Notion / 日記 App 的重度使用者，但從來不發出去', '聽完 Podcast，總會記下一些想法，也想找到同樣感受的人', '讀書會裡發言最有深度、但平時最不常說話的那種人', '想過寫部落格，最後因為「我沒資格」或「太麻煩」而作罷', ]; return ( }>

{/* Persona card */}

The Quiet Observer

25–40 歲

在城市生活，通勤、洗澡、走路時心裡說了很多話。想被理解，但不知道誰會懂；想開口，卻覺得自己「講不好」。

{/* Signals */}

行為訊號（已經在說，只是沒有出口）

{signals.map((s, i) => (

{String(i + 1).padStart(2, '0')} {s}

))}

); } // ── HandDrawnHLine ──────────────────────────────────────────────────────────── // Horizontal companion to HandDrawnVLine — measures wrapper width via // ResizeObserver, then renders a wobbly SVG path scaled to fit. function HandDrawnHLine({ seed = 77, amp = 3, steps = 7, stroke = 'oklch(60% 0.07 70 / 0.4)', strokeWidth = 2.5 }) { const W = 600; const wrapRef = React.useRef(null); const { w: wrapW } = useElementSize(wrapRef, 0, 0); const path = React.useMemo(() => { const rnd = makePrng(seed); const pts = []; for (let i = 0; i <= steps; i++) { const t = i / steps; const x = t * W; const y = (i === 0 || i === steps) ? 0 : (rnd() - 0.5) * 2 * amp; pts.push([x, y]); } const f = n => +n.toFixed(2); let d = `M ${f(pts[0][0])},${f(pts[0][1])}`; for (let i = 1; i < pts.length; i++) { const [x0, y0] = pts[i - 1]; const [x1, y1] = pts[i]; const ctrl = (x1 - x0) / 3; d += ` C ${f(x0 + ctrl)},${f(y0)} ${f(x1 - ctrl)},${f(y1)} ${f(x1)},${f(y1)}`; } return d; }, [seed, amp, steps]); const vbH = (amp + 3) * 2; const svgW = Math.max(0, wrapW); return (

{svgW > 0 && ( )}

); } // ── HandDrawnVLine ──────────────────────────────────────────────────────────── // SVG is absolutely positioned so it never contributes to grid row sizing. // useElementSize measures the wrapper (which stretches to grid row height), // then passes that height explicitly to the SVG — no feedback loop. function HandDrawnVLine({ seed = 77, amp = 3.5, steps = 8, stroke = 'oklch(60% 0.07 70 / 0.5)', strokeWidth = 3 }) { const H = 600; const wrapRef = React.useRef(null); const { h: wrapH } = useElementSize(wrapRef, 0, 0); const path = React.useMemo(() => { const rnd = makePrng(seed); const pts = []; for (let i = 0; i <= steps; i++) { const t = i / steps; const y = t * H; const x = (i === 0 || i === steps) ? 0 : (rnd() - 0.5) * 2 * amp; pts.push([x, y]); } const f = n => +n.toFixed(2); let d = `M ${f(pts[0][0])},${f(pts[0][1])}`; for (let i = 1; i < pts.length; i++) { const [x0, y0] = pts[i - 1]; const [x1, y1] = pts[i]; const ctrl = (y1 - y0) / 3; d += ` C ${f(x0)},${f(y0 + ctrl)} ${f(x1)},${f(y1 - ctrl)} ${f(x1)},${f(y1)}`; } return d; }, [seed, amp, steps]); const vbW = (amp + 3) * 2; const svgH = Math.max(0, wrapH - 12); return (

{svgH > 0 && ( )}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 10 — Where to fight, who to fight // ═══════════════════════════════════════════════════════════════════════════ function Slide10Battlefield() { return ( }>

{/* 起始點 — where we begin */}

戰場 · 選擇的場域

打造自己愛用的產品，
從台灣出發，走向世界

自己的生活圈 → 台灣 → 世界

共振相信，每一個人都有值得被聽見的故事。
但宏大願景必須始於一個真心喜愛產品的使用者。

{/* hand-drawn vertical divider */} {/* 對手 — who we're up against */}

對手 · 內部的痛點

表面的競品

Medium · Threads · 小紅書

真正的對手

Doomscrolling 本身，
以及人們覺得「自己不夠格發聲」的想法。

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 11 — How to win // ═══════════════════════════════════════════════════════════════════════════ function Slide11HowToWin() { const weapons = [ { n: '01', title: '有發心，以「體悟」為信號', textNode: <>我們不讓流量決定誰被看見。共振以「體悟」為核心，根據你分享的文章、你記下的想法卡片，為你推薦最合適的故事。真實、有體悟的故事，感染生命的熱情，且不會因產生比較心態而焦慮。, color: 'var(--color-terracotta-light)', stroke: 'oklch(38% 0.11 55)', seed: 41, }, { n: '02', title: '讀寫完全平等，付費買工具不買特權', textNode: <>沒有 Premium 文章牆，沒有付費才能讀到的思想。共振的付費功能只提供 AI 寫作工具，幫使用者整理與連結卡片、建構個人知識體系。促進思想的流通，是正向影響世界的根本方法。, color: 'oklch(94% 0.032 290)', stroke: 'oklch(42% 0.09 290)', seed: 67, }, { n: '03', title: '用故事交朋友，不做創作者粉絲制', textNode: <>沒有追蹤數、沒有「創作者 vs 讀者」的上下階層。在共振，分享是對等的雙向互動 ── 交流像朋友，而非仰望。連結讓我們相遇，故事讓彼此共振。, color: 'oklch(93% 0.042 140)', stroke: 'oklch(38% 0.11 140)', seed: 97, }, ]; return ( }>

{weapons.map(w => (

{w.n}

{w.title}

{w.textNode}

))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 12 — Business Model // ═══════════════════════════════════════════════════════════════════════════ function Slide12BusinessModel() { const freeItems = [ { label: '撰寫文章', desc: '不受限地記錄你的想法、體悟與故事' }, { label: '分享內容', desc: '讓你的文章在社群中自由流通，讓同頻的人找到你' }, { label: '閱讀他人作品', desc: '所有內容完全對所有人開放，思想的流通不設牆' }, ]; const paidItems = [ { n: '01', title: '智慧標籤整理', textNode: <>AI 根據你為文章設定的關鍵字標籤，自動分類與銜接卡片，讓你快速找到先前撰寫過的類似點子或故事延伸。, fill: 'var(--color-terracotta-light)', stroke: 'oklch(38% 0.11 55)', seed: 171, img: 'assets/10 標籤.png', imgHeight: 170, }, { n: '02', title: '卡片快速連結', textNode: <>當文章或卡片中提到相關概念時，AI 幫你迅速串聯另一張卡片，協助快速釐清思緒，大幅提升寫作效率。, fill: 'oklch(94% 0.032 290)', stroke: 'oklch(42% 0.09 290)', seed: 190, img: 'assets/10 連結.png', imgHeight: 150, }, ]; return ( }>

{/*

付費功能只提供 AI 寫作工具，不設內容牆──思想的流通，不應由錢包決定。

*/}

{/* Col 1: Free */}

免費 · Free — 所有人皆可使用

{freeItems.map((item, i) => (

{String(i + 1).padStart(2, '0')}

{item.label}

{item.desc}

))}

{/* Col 2 & 3: Paid AI cards */} {paidItems.map((item, i) => (

{i === 0 && (

付費 · Pro — AI 寫作工具

)} {i === 1 && (

)}

{item.n}

{item.title}

{item.textNode}

{item.img && ( {item.title}

)}

))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 13 — Budget // ═══════════════════════════════════════════════════════════════════════════ function Slide13Budget() { const items = [ { label: '平台開發費', en: 'Platform Dev', amount: 35000, pct: 35, color: 'var(--color-terracotta)', detail: 'AI 推薦引擎、APP 上架費' }, { label: '儀器/設備使用費', en: 'Equipment', amount: 25000, pct: 25, color: 'var(--color-sky)', detail: '雲端主機、資料庫、API' }, { label: '打樣費', en: 'Prototyping', amount: 15000, pct: 15, color: 'var(--color-lavender)', detail: 'UI/UX 設計、品牌識別、插圖素材' }, { label: '測試費', en: 'Testing', amount: 15000, pct: 15, color: 'var(--color-sage)', detail: '使用者測試招募、市場調研' }, { label: '顧問諮詢費', en: 'Consulting', amount: 10000, pct: 10, color: 'var(--color-yellow)', detail: '法律顧問、業師諮詢' }, ]; return ( } decor={

} >

{/* Left: bar chart */}

{items.map((item, i) => (

{item.label}

{item.pct}%

NT${item.amount.toLocaleString()}

))}

{/* Right: total + details */}

Total Budget

NT$

100,000

{items.map((item, i) => (

{item.detail}

))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 14 — Timeline // ═══════════════════════════════════════════════════════════════════════════ function Slide14Timeline() { const months = ['Apr', 'May', 'Aug', 'Sep', 'Oct']; const phases = [ { title: '規格確認', items: ['需求分析與定義', 'UI/UX 原型設計', '技術架構規劃'], color: 'var(--color-terracotta-light)', stroke: 'oklch(38% 0.11 55)', done: true, }, { title: 'MLP 開發', items: ['核心功能實作', '故事卡片系統', 'AI 推薦引擎'], color: 'var(--color-yellow)', stroke: 'oklch(44% 0.12 88)', current: true, }, { title: '內部測試', items: ['Alpha 測試', '用戶反饋收集', 'Bug 修復優化'], color: 'var(--color-sage)', stroke: 'oklch(40% 0.10 145)', }, { title: 'Beta 公測', items: ['首批用戶招募', '社群行銷啟動', '產品迭代優化'], color: 'var(--color-lavender)', stroke: 'oklch(42% 0.10 280)', }, { title: '正式上線', items: ['全平台正式發布', '行銷活動啟動', '規模化推廣'], color: 'var(--color-sky)', stroke: 'oklch(46% 0.09 220)', }, ]; const svgW = 1580; const svgH = 130; const nodeY = 54; const nodeR = 15; const positions = months.map((_, i) => 60 + (i / (months.length - 1)) * (svgW - 120)); const currentIdx = phases.findIndex(p => p.current); return ( }>

{/* Timeline SVG */}

{/* Phase cards */}

{phases.map((phase, i) => (

Phase {i + 1}

{phase.title}

✦ {item}

{phase.current && (

進行中

)} {phase.done && (

已完成

)}

))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 15 — Product Prototype // ═══════════════════════════════════════════════════════════════════════════ function Slide15Prototype() { const screens = [ { src: 'assets/demo1.png', label: '首頁', desc: '透過介面與體驗的設計，讓這份使命自然地被傳遞。在每一個細節中，都貫徹有機、人性與溫暖的設計原則。', fill: 'var(--color-terracotta-light)', stroke: 'oklch(38% 0.11 55)', seed: 361, }, { src: 'assets/demo2.png', label: '故事探索頁', desc: '卡片式瀏覽介面讓使用者快速找到值得共鳴的故事，每張卡片呈現故事精華、分類標籤與作者，讓同頻的人自然相遇。', fill: 'oklch(94% 0.032 290)', stroke: 'oklch(42% 0.09 290)', seed: 377, }, ]; return ( } decor={ <>

} >

{screens.map((screen, i) => (

{screen.label}

{screen.desc}

))}

); } // ═══════════════════════════════════════════════════════════════════════════ // SLIDE 16 — Closing: our belief // ═══════════════════════════════════════════════════════════════════════════ function Slide16Closing() { return ( } decor={ <>

} >

尾聲 · 我們的信念

人人都是故事的分享者
獨一無二的你
必能為世界帶來漣漪

Let lives influence lives.

); } Object.assign(window, { TOTAL_SLIDES, Slide01Cover, Slide02Thesis, Slide03Beliefs, Slide04WhyNow, Slide05Versus, Slide06Product, Slide07WhyUs, Slide08Team, Slide09WhoWeServe, Slide10Battlefield, Slide11HowToWin, Slide12BusinessModel, Slide13Budget, Slide14Timeline, Slide15Prototype, Slide16Closing, });

讓世界上每個同頻的靈魂
都能透過真實故事彼此相遇

我們做的不是社群，
是一個思想的共振場

中性平台被流量經濟異化

共振放大的，是體悟