我们走遍了所有的哈基米视频

哈基米你是不是自己都不知道自己咋来的？ 其实，我更想问的是：我到底是怎么被你洗脑的？

这是一个关于“哈基米”这一网络热梗的数据新闻/可视化叙事项目。本项目通过深入且生动的数据可视化，探索了“哈基米”从《赛马娘》的一句空耳，演变为“猫咪”代名词，进而泛化为万物皆可“哈基米”的互联网现象，以及其背后的商业化与文化传播逻辑。

本项目是同济大学艺术与传媒学院《融合媒体报道》课程的结课作品。

🚀 项目介绍

“哈基米”一词最早源于日语“はちみ”（hachimi），原意为蜂蜜水。在动画《赛马娘》中，角色东海帝王的一段哼唱使其走红。然而，在中文互联网上，它被重新赋予了“可爱小猫”的含义，并迅速病毒式传播。

本项目通过五个章节，利用多种可视化手段，带领读者回顾这一现象级热梗的“前世今生”：

1. 起源与误读：从《赛马娘》到猫咪视频，追溯梗的变迁。
2. 万能的哈基米：展示该梗如何适配各种场景（鬼畜、生活、美食等）。
3. 商业化狂欢：从线上热梗到线下的“哈基米豆浆”，以及其对资本市场（如九阳股份）的意外影响。
4. 听觉病毒：通过音频波形和互动组件，通过音频特征分析其“洗脑”的本质。
5. 语言的解放：分析“哈基XX”构词法的泛化与流行。

✨ 主要功能与亮点

• 沉浸式滚动叙事: 利用 Scrollama 实现流畅的滚动交互体验。
• 视频星空: 大规模视频数据的聚类可视化，展示“哈基米”相关视频的内容分布。
• 互动与3D展示:
  • 集成 3D 模型（如豆浆/牛奶盒），增强视觉冲击力。
  • 音乐点唱机 & 猜歌游戏: 互动式音频播放器，让用户亲身体验“洗脑”神曲。
• 不仅是图表:
  • K线图: 结合叙事展示股票市场波动。
  • 网络关系图: 展示词云与语义关联。
• 精致的 UI 设计: 采用现代化的磨砂玻璃、动态渐变和微交互动画。

🛠️ 技术栈

本项目借鉴了The Pudding的技术栈构建：

• 框架: SvelteKit -以此获得极佳的性能和开发体验。
• 构建工具: Vite
• 数据可视化:
  • D3.js - 强大的数据驱动文档库。
  • LayerCake - Svelte 专用的 D3 封装库，用于构建响应式图表。
• 3D渲染: @google/model-viewer - 轻松在 Web 上展示交互式 3D 模型。
• 滚动交互: Scrollama
• 部署: Vercel (以及 Vercel KV/Blob 用于数据存储)

📦 安装与运行

确保您的系统已安装 Node.js (推荐 v20.x).

1. 克隆项目

   git clone <repository-url>
   cd hachimi-project

2. 安装依赖

   npm install

3. 启动开发服务器

   npm run dev

4. 构建生产版本

   npm run build

👥 致谢

特别感谢同济大学艺术与传媒学院卞清老师对本项目的指导与支持。

---

Created with ❤️ by the Hachimi Project Team.