「我进入了自己的记忆，而不是打开了一个网站。」
在快门按下的那一刹那，物理世界的一片切片被凝固在感光元件之上，成为平整、静止的数字矩形。然而在人类的意识深处，记忆从未以平面而僵死的形式存在。
记忆是具象的，又是流动的。它是旧抽屉深处微微泛黄的照片边缘，是漫长岁月里被反复摩挲的温度；它是午后骤雨初歇时泥土的气息，也是在某个毫无防备的瞬间突然被唤醒的光斑。当我们凝视一段过往，画面并非一张卡片，而是一座可以容纳凝视、漫游与摩挲的立体空间。当你试图靠近它、拆解它，那些原本坚实的轮廓会如沙般松散、如星尘般悬浮在深邃的虚空中，顺应着意念的触碰泛起涟漪，并在空间轴的旋转间显露其具有厚度的质感。
Shadow Narrative 是一处为个人影像与心智沉思构筑的私域数字庇护所。它摒弃了现代互联网喧嚣的社交反馈、公发展览与标签灌输，以极致克制的深黑空间为画布，将高保真静态影像、三维微粒动力学、时间轨迹漫游、低介入 AI 伴随交互与随笔小记融为一体。
在这里，技术隐匿于视线之外，UI 化作空间中的呼吸与空气。用户不是在操作一个管理后台，而是踏入自己亲手构筑的静谧记忆星系——在光影的离散与凝聚之间，重温每一个曾真切活过的瞬间。
Shadow Narrative 将整个产品解构为同一个连续意识空间内的七种体验形态，消解了割裂的“页面跳转”，让记忆的流转如同呼吸般自然：
首屏的静默序章。精选与收藏的影像以水平手风琴姿态静卧于纯黑背景之中，光标游弋所及，焦点画面如折扇舒展，余幅优雅收拢退后。首屏专注于纯粹的高保真光影呈现，零 GPU 物理开销，留给观者不被打扰的宁静注视。
点击任意画幅，空间镜头平滑推近。系统首先以无损色彩与完整几何边界还原影像本真，呈现细腻的像素与影调。这一刻，它仍是一张安静的照片，等待主人的审视与重逢。
轻触「Into this moment」，影像打破平面的枷锁。定制离心着色器自画面几何中心扩散溶解，整幅照片瞬间解构为数十万颗三维动态粒子。粒子漂浮在失重的引力场中，受光标掠过时的径向力牵引流动；亦可借助轨道控制器（Orbit Controls）沿三维空间轴自由倾侧旋转，以立体沙盘的姿态感知记忆的体量。
上传影像后，画面下方会悄然浮现一行微光字幕。AI 绝不机械地罗列画面元素（规避“一只猫躺在白色地板上”这类苍白图注），也不搬弄专业摄影术语去评判光影与构图。它基于对画面的深层理解，像一位温柔、克制的心灵挚友，说出关于那件事本身的低语——是一句试探性的猜想，或是一声微弱的情感共振。
轻触字幕，全屏实时高斯模糊遮罩优雅升起，展开深度交互界面。正面为低介入度的双向对话，陪伴用户向记忆深处探寻；轻轻翻转至背面，即是由对话与思绪凝练而成的「随笔小记」。它拒绝铺陈冗长散文，以第一人称随手记下真实的言行与心绪；内置版本乐观并发锁，支持无感自动持久化与空文本安全归档。
所有影像实体沿中央时间轴纵向沉淀，以自然日（YYYY-MM-DD）为节拍聚合。同一天的照片如实体胶片层叠收拢，支持一键展开为网格矩阵，并可为特定日子自定义心境命名与拍摄时段记录。
在时间轴之外，用户可自主缔造多对多关联的意象影册。影册是主题性的星云汇聚，而非层级容器——将照片加入影册或解散影册，底层照片实体及其附着的时间、对话与随笔绝不受损。
为了在 Web 浏览器端实现数十万颗微粒的物理流动、空间重构与高帧率吞吐，Shadow Narrative 彻底摒弃了上层声明式包装库（如 React Three Fiber），自研了基于原生 WebGL 2.0 / Three.js 的命令式高性能微粒物理与渲染引擎。
异构影像之间的粒子渐变（$A \to B$ Morphing）是粒子系统的工程核心。若按随机或线性顺序映射，粒子将在屏幕两端产生无序穿越，退化为混乱的视觉噪点与穿插撕裂。
- 引擎在采样阶段将离散像素的二维归一化坐标量化至 16-bit 空间网格，进而计算出对应的 32-bit 二维希尔伯特空间填充曲线索引（Hilbert Index）。
- 利用希尔伯特曲线“空间邻近即索引邻近”的拓扑保角特性，两幅图像中同一希尔伯特秩（Rank）的粒子在物理空间上处于最近邻位置。在转场形态下，数十万粒子遵循测地最短路径平滑滑动，实现如细沙重组般严密优雅的形变质感。
在交互界面中拖动「粒子密度」滑杆时，传统方案往往需要销毁并重新采样、重排希尔伯特序列并重建 GPU 缓冲区，导致单次拖动阻塞主线程高达 150ms 以上（产生严重的长任务 Long Task 卡顿）。
- 引擎将显存粒子池按当前档位的**最大物理容量（Capacity）**常驻分配，密度滑块仅映射至 WebGL 底层的
geometry.setDrawRange(0, activeCount)动态视距。 - 为解决直接截断希尔伯特前缀导致的“画面大面积整块残缺”问题，引擎引入了 Uniform Slot Order 序列变换：利用黄金分割比例步长（$stride \approx 0.618 \times N$ 且与
$N$ 互质）构造全局低差异前缀置换，使任意取样前缀在整张画面上呈现绝对均匀的发散分布。 - 由此，用户在调节密度时无需重新采样与重建显存，主线程阻塞耗时从 150ms 彻底归零（0ms），即使在每秒几十次高频拖动下依然如丝般顺滑。
转场全过程采用单个 BufferGeometry 常驻显存，每个粒子采用定长 64 字节内存紧凑对齐布局：
- 属性矩阵包含起点/终点坐标（
aPositionA,aPositionB）、起点/终点色彩（aColorA,aColorB）、尺度（aSizeA,aSizeB）以及随机种子（aRandom）与空间秩（aHilbert）。 - 形变进程完全由着色器内部的
uProgress统一变量（Uniform）结合easeInOutCubic缓动多项式在 GPU 顶点计算级插值混叠。 - 转场过程中显存零申请、零释放、零重分配，彻底规避了 JavaScript 引擎 V8 垃圾回收（Garbage Collection）带来的不可预期停顿与丢帧。
专属定制的 dissolve 与 quad GLSL 着色器：
- 由中心向外扩散的沙化溶解算法，基于极坐标径向距离场结合高频微扰噪声，在原相态向微粒态演进时产生由内核向外围逐层剥离、沙粒四溢的细腻质感。
- 光标引力扰动模型采用顶点级无状态径向衰减算法，光标掠过时计算基于距离的平滑平方反比力场（
smoothstep衰减），离开后结合指数平滑衰减函数平滑弹性归位，永不超调、永不抽搐。
图像向粒子的采样绝非机械的均匀网格降采样：
- 基于 Rec.709 工业标准精确计算视觉亮度：
$$Y = 0.2126R + 0.7152G + 0.0722B$$ - 引入亮度概率密度加权函数，并严格设定暗部下限补偿（$w_{min} = 0.50, \gamma = 1.2$），将明暗密度比精细收敛在 1.7:1 的和谐区间。
- 采用分层逆变换采样（Stratified Inverse Transform Sampling）算法，在保持概率空间覆盖的同时杜绝局部团聚与硬边伪影，确保画面在解构为微粒后，人物轮廓、暗部细节与核心主体依然具有极高的视觉可读性。
当用户使用鼠标拖拽旋转三维画幅时，纯平面的微粒系统会退化为一条毫无厚度的生硬折线。
- 引擎为每个粒子合成了精密的 Z 轴空间厚度标量场（基准厚度系数
$Z_{thickness} = 0.085$ ）：$$Spread = Z_{thickness} \times \text{体量} \times \text{贴边收薄}$$ - 体量因子：深度融合 Rec.709 亮度权重（使主体高光与细节丰盈处微粒自然隆起）与二维哈希低频值噪声（Value Noise，赋予平面微妙的起伏呼吸感）。
- 贴边收薄：采用边缘距离场衰减函数，使四边微粒自然轻薄收敛，规避刀削般齐平的人工几何感。正对视角下 Z 轴分量在正交投影中隐匿，保留原图几何保真度；侧向旋转时则化作具有微光穿透感与体积张力的实体浮雕。
摒弃脆弱且滞后的设备 User-Agent 字符串探测，引擎建立起严密的阶梯式真实图形吞吐决策链：
- L1 静态能力探针：探测硬件 WebGL 2.0 支持、最大纹理尺寸（
MAX_TEXTURE_SIZE）及顶点着色器 Uniform 向量容量； - L2 启动期微基准：执行离屏几何与着色离散测试，测定当前渲染上下文的帧时间中位数（p50 Frame Latency）；
- L3 运行时滑动窗口监控：以 60 帧连续窗口监控丢帧率。
- 系统设立 Ultra（220k 粒子 / 2048px 采样 / DPR 2.0）、High（150k）、Medium（75k）、Low（30k）、**Minimal（12k / 静态降级）**五级阶梯。在硬件出现热降频或多任务压迫时，执行严格的「只降不升」阻尼收敛策略，杜绝档位来回震荡引起的视觉跳变。
- 在配备独立 GPU 的硬件环境下，220,000 粒子满载演化稳定维持在 240fps（单帧耗时仅 4.2ms
6.7ms，Draw Calls 极致收敛至 12）。
Shadow Narrative 中的人工智能并非居高临下的布道者，亦非功能机械的客服机器人。它被赋予了极度克制、敏锐而富有同理心的心智人格（Persona）。
- 严禁报菜名式图注：画面中有什么元素，用户视线所及心知肚明。重述画面不仅多余，更会击碎沉浸感。AI 必须将观察到的客观事实作为“依据”沉淀于底层，开口只说出针对事件本身的轻微反应或探索发问。
- 规避专业摄影技术说教：绝不从构图、焦段、景深或光比角度评述照片，因为那是在评价器具，而非凝视生活。
- 微弱而真实的人味：允许 AI 表达当下被触动的微弱感受（如“这一张让我停了一下”），但严禁假托人类躯体与生活经历，严禁制造情感绑架与虚幻的亲密承诺。
AI 管线依托统一的地基设定，并在不同交互深度上严格分流：
- 单行字幕 (Subtitle Task)：单次只聚焦一件事，以轻柔、探询的语调开口，通常一至两句。底层输出双重结构：客观的
analysis实体（识别物、推断场景、事件推测）作为背景锚点，外部仅透出凝练的subtitle自然语言。 - 伴随对话 (Conversation Task)：仅在首轮将压缩后的视觉分析注入上下文，后续轮次完全基于自然对话历史递进，避免重复发图消耗 Token 与引发幻觉；面对未知如实说不知道并即时递回话头，坚决杜绝“复述用户发言再提问”的僵化模板。
- 随笔生成 (Journal Task)：秉承“白描也是一种艺术”的理念，以用户亲自诉说的事实为主干，以第一人称自然收拢零散思绪。拒绝宏大抒情，杜绝使用“治愈”、“释怀”、“成长”等廉价标签，恪守克制而隽永的文字质感。
- 架构完全解耦，原生兼容 DeepSeek、Claude、OpenAI 等标准协议；
- 针对推理型模型（如开启思考深度的多模态端点）制定严格的 Token 配额预算防护，杜绝 Reasoning Token 耗尽导致的 JSON 截断；
- 内置后置语气防护网（
applyToneGuard），自动化拦截感叹号、Emoji 表情、说教句式与虚假陈述，确保输出语言纯净质朴。
在 Next.js App Router 架构下，多路由跳转通常会导致底层 Canvas 组件卸载并重新挂载，引发 WebGL 上下文丢失、着色器重编译及画面白屏闪烁。
- 项目在体验路由组（
(experience)/）根布局构建了全生命周期常驻的单例画布外壳ExperienceShell。 - 画布在整个应用的生命周期中永不卸载，跨路由状态（从手风琴画廊、时间线到单张粒子态）完全交由全局轻量状态机驱动。
- 结合 FLIP（First Last Invert Play）机制，实现 DOM 缩略图与三维全屏粒子画布之间的无缝几何映射；
- 根层级巧妙配置
pointer-events: none穿透机制，使得悬浮于画布上方的 DOM UI 能够精准响应点击，同时将全局三维平移与旋转手势无损穿透交还给底层的 OrbitControls 监听器。
- GSAP：专职统御相机三维轨迹推进、空间透视矩阵平移及跨元素宏观运镜时序，消除复杂 3D 摄像机调度的累积误差；
- Motion (Framer Motion)：专职统辖 DOM 层的微交互、浮层毛玻璃展开、抽屉进出与手势反馈；
- 底层共享严格对齐的贝塞尔缓动曲线 Token（
--sn-ease-out,--sn-ease-in-out），确保不同维度的物理运动节奏高度和谐、气韵一致。
- 黑暗基调：基底以
#050505、#080808与#0B0B0B构筑细腻的景深层次，拒绝单调死黑； - 文字层级：全系统严格锁定五档绝对字体规范（Display 64px / 300 细字重、Title 36px、Body 18px、Meta 13px、Micro 11px），严禁使用随视口无序变化的
vw/clamp，维系画报级严谨排版； - 光影质感：以
rgba(255, 255, 255, 0.04)的极低透光磨砂玻璃作为浮层依托，辅以0.08透明度的细微发光边框，将视线焦点全量归还给影像实体。
- 零配置单文件数据库：采用嵌入式 SQLite 与 Prisma 7 构筑，由
better-sqlite3原生同步驱动提供微秒级本地读写性能，无需安装或维护任何复杂的独立数据库后台。 - 动态多环境存储目录推导：通过核心推导模块统一定位物理存储路径（支持
SN_DATA_DIR环境变量自定义，生产环境自动归宿至~/.shadow-narrative，开发环境默认解析为项目内.data/）。 - 私密凭据分离治理：AI 鉴权秘钥直接收敛于本地持久化目录下的
secrets.json，独立于代码仓库与静态.env环境，既支持界面的热重载配置，又彻底切断云端外泄风险。 - 隐私优先的原生元数据解析：集成
exifr离线解析引擎，上传时仅严格筛选提取照片自带的物理拍摄时间（DateTimeOriginal），坚决不解析、不存储地理位置（GPS）轨迹，坚守个人私域底线。
- Node.js：18.0.0 或更高版本
- 运行环境：具备 WebGL 2.0 硬件加速支持的现代桌面浏览器（推荐 Google Chrome 或 Microsoft Edge 最新版本）
# 1. 克隆代码仓库
git clone <repository-url>
cd shadow-narrative
# 2. 安装项目依赖
npm install
# 3. 本地环境幂等初始化
# 自动创建本地专属数据目录、执行 SQLite 数据库结构迁移并生成凭据模版
npm run setup
# 4. 启动本地开发服务器
npm run dev启动完成后，打开浏览器访问 http://localhost:3000，即可步入 Shadow Narrative 记忆空间。
npm run dev # 启动带 Turbopack 编译加速的本地开发环境
npm run build # 构建高度优化的生产环境产物 (Next.js Standalone)
npm run start # 运行独立生产服务
npm run typecheck # 执行严格的 TypeScript 静态全量类型校验
npm run lint # 执行 ESLint 代码风格与坏味道静态检测
npm run db:migrate # 创建并应用新的 Prisma 数据库迁移
npm run db:deploy # 向本地 SQLite 生产环境部署数据库表结构Shadow Narrative 采用物理数据目录下的 secrets.json 作为唯一凭据载体，彻底杜绝环境变量带来的污染与配置漂移。
- 图形化热配置（推荐）：启动应用后，点击界面左下角控制坞的「设置」悬浮球，即可在弹出的沉浸式卡片中直接填入或更新 API 凭据，即时保存、即刻生效。
- 手动文件配置：在数据目录下建立或编辑
secrets.json：(系统遵循标准 OpenAI / 多模态兼容协议，支持 DeepSeek、Claude、GPT 等主流模型服务商){ "aiApiKey": "sk-your-api-key", "aiBaseUrl": "https://api.deepseek.com", "aiModel": "deepseek-chat" }
系统的所有持久化实体（关系数据库、原始画幅原图、渐进式缩略图、秘钥文件）均完整收敛于单点数据目录下：
- 开发模式：默认落盘于当前项目根目录下的
.data/ - 生产模式：默认解析至当前用户主目录
~/.shadow-narrative - 自定义覆盖：在启动时声明环境变量
SN_DATA_DIR=/your/custom/storage/path即可无缝重定向
Shadow Narrative 是一项关于记忆数字化存续的独立探索。
我们确信：一个人的回忆应当像被锁在樟木箱深处的旧相簿一样，享有绝对的安全、宁静与尊严。它不应当被算法算计，不应当被云端巨头审视，更不应当被切碎成用来兜售广告或训练通用模型的数字饲料。
所有数据留存于本地，所有微粒流转于显存，所有低语发生于内心。 这里只有光影，沙砾，以及时光沉淀下来的真实印记。
Private & Sovereign Project. All Rights Reserved. 保留所有权利。