The Evolution of Web Design — 互联网时代演进
一次沉浸式的 Web 设计历史演进交互体验。从 1980 年代的 DOS 终端到 AI 原生时代，通过滚轮穿越互联网设计的整个历史。
本项目是一个基于 React + Vite + TailwindCSS + Framer Motion 构建的单页沉浸式网站，以鼠标滚轮为驱动，呈现 Web 设计在不同年代的风格演变。
每个 Section 在视觉风格上有明显差异，并详细还原了各个时代的设计语言：
| 时代 | 风格 | 核心特征 |
|---|---|---|
| 1980s — Terminal | DOS 终端 | 黑底绿字、CRT 扫描线、闪烁光标、等宽字体 |
| 1990s — GeoCities | 个人网站 | 高饱和渐变、像素字体、访客计数器、粗边框按钮 |
| 1990s — Gray Box Industrial | 灰色工业风格 | Windows 95/98 经典 UI、左侧导航、outset 边框、table 布局、IE 6.0 窗口、信息高密度 |
| 2000s — Web Portal | 门户网站 | 灰色背景、蓝色链接、方形导航、表格布局、强边框、新闻列表/下载中心/论坛 |
| 2010s — Flat Design | SaaS 初创 | 紫色渐变背景、毛玻璃卡片、大 Hero、扁平 UI |
| 2020s — Minimalism | Claude/Notion | 大量留白、柔和背景、极简排版、微妙阴影、对话 UI |
| Future — Beyond | 未来 AI | 暗色 + 发光球体、预测未来趋势 |
- 框架: React 19 + TypeScript
- 构建工具: Vite 8
- 样式: TailwindCSS 4 + CSS 自定义动画
- 动画: Framer Motion 12
- 字体: Inter (现代), JetBrains Mono (等宽), Press Start 2P (像素)
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 构建生产版本
pnpm build
# 预览生产版本
pnpm previewsrc/
├── components/
│ ├── Hero.tsx # Present — AI Era
│ ├── Era1980s.tsx # 1980s DOS 终端
│ ├── Era1990s.tsx # 1990s GeoCities
│ ├── Era1990sGray.tsx # 1990s 灰色工业
│ ├── Era2000s.tsx # 2000s 门户网站
│ ├── Era2010s.tsx # 2010s 扁平化设计
│ ├── Era2020s.tsx # 2020s 极简主义
│ ├── Ending.tsx # 未来 AI
│ └── TimelineIndicator.tsx # 侧边时代指示器
├── hooks/
│ └── useScrollProgress.ts # 滚动进度 Hook
├── App.tsx # 主组件
├── index.css # 全局样式 & 关键帧动画
└── main.tsx # 入口
- 滚动驱动:
data-era属性标记每个 Section，滚动时useScrollProgressHook 实时计算当前所处时代 - 平滑导航: 右侧
TimelineIndicator圆点导航，支持点击跳转 - 渐进动画: 每个 Section 使用 Framer Motion
whileInView实现渐入、位移、缩放 - CSS 动画:
@keyframes定义 scanline / blink / marquee / float 等复古效果
本项目既是互联网考古学的视觉展现，也是一次 Award-winning 级别的交互设计实践。从机械工业 UI 到现代极简，每个细节都力求还原时代特征，同时保证现代浏览器的流畅体验和可读性。