director-vibes

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 15 Open GitHub ↗

A frontend demo showcasing iconic film directors' visual styles

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Director Vibes

> 用前端把电影大拿导演的视觉语言翻译成可交互网页体验。
> A front-end study of how five auteurs would design the same web page.

## 🙏 致谢与灵感来源

本项目的最初火花来自 [**@xiaoerzhan（小耳👂Jane）**](https://x.com/xiaoerzhan/status/2052262215370383754) 在 2026/05/07 发的一条推特——她贴出了一段为韦斯·安德森式精品酒店写的极致细致的设计 prompt，把"Anderson 美学"从模糊的视觉印象具象到了"分镜级别"的细节清单。

正是那条推文里关于"对称、Futura、章节卡、横向 pan wipe、机械点击"等等的具体描述，把"导演风格能不能用前端表达"这个问题从抽象拽到了可以动手做的层面——也由此被启发"**升维**"成本项目：不止韦斯·安德森一位，而是把库布里克、王家卫、塔伦蒂诺、宫崎骏的视觉语言一起拆解为可被 CSS / SVG / 动画引擎复刻的设计原语。

特别感谢小耳老师无意间投放的种子，没有那条推文就没有这个项目喵 ฅ'ω'ฅ

完整的灵感来源与升维分析见 [doc/00-inspiration.md](./doc/00-inspiration.md)。

---

顶部一个切换器，点一下整页色彩 / 字体 / 布局 / 动效 / 节奏全部切换到对应导演的视觉语言——同一份代码，五种感觉。

| 导演 | 视觉签名 | 招牌动作 |
|------|---------|----------|
| 🎀 **Wes Anderson** | 完美对称 + 章节卡叙事 | 章节卡 zoom-in、对称居中、对开式房门、迷你电梯滚动指示 |
| 🌃 **Stanley Kubrick** | 单点透视 + 缓慢推轨 | CSS 3D 走廊、对称对照面板、Overlook 红走廊 SVG |
| 🥢 **Wong Kar-wai (王家卫)** | Step printing + 霓虹拖影 | `steps()` 抽帧、红绿色彩位移、拖影 ghosts、时间凝固 hover |
| 🟡 **Quentin Tarantino** | 章节卡 + grindhouse 划痕 | 全屏 modal 章节卡、SVG turbulence 颗粒 / 划痕 / 漏光、speed zoom |
| ☁️ **Hayao Miyazaki (宫崎骏)** | 水彩天空 + 60-30-10 | 多层 radial-gradient 天空、SVG 飘云飞艇、`feTurbulence` 水彩纹理 |

## 快速开始

```bash
git clone <repo-url> director-vibes
cd director-vibes
pnpm install
pnpm dev          # http://localhost:4321
```

构建静态站：

```bash
pnpm build        # 输出到 dist/
pnpm preview      # 本地预览构建结果
```

环境要求：**Node ≥ 20.3.0**、**pnpm ≥ 10**。零外部素材依赖——全部用 CSS / SVG / Canvas 实现，仓库 < 20MB，clone 即跑。

## 技术栈

| 层 | 选型 | 理由 |
|----|------|------|
| 框架 | **Astro 6** | 默认零 JS、岛屿架构、内置 View Transitions |
| 样式 | **Tailwind 4 (`@tailwindcss/vite`)** | CSS-first 配置，与多主题 CSS 变量天然契合 |
| 动效 | **GSAP 3** + 原生 CSS animations | 只在必要时上 GSAP，减小 bundle |
| 交互岛 | **React 19**（仅 DirectorSwitcher） | 切换器需要状态；其他页面是纯 Astro 静态 |
| 视频 | 零视频 | 所有视觉用 CSS / SVG 实现 |

## 项目结构

```
director-vibes/
├── doc/                            研究文档与决策记录（先读这里）
│   ├── README.md                   项目愿景与文档导航
│   ├── 00-inspiration.md           灵感来源与升维分析
│   ├── 01-directors/               每位导演的视觉签名拆解
│   ├── 02-frontend-translation.md  ★ 视觉语言到 CSS 的可执行映射
│   ├── 03-tech-stack.md            技术栈选型理由
│   ├── 04-sources.md               研究信源（按主题分类）
│   ├── 05-proposal.md              首版方案与决策记录
│   └── 06-implementation-plan.md   7 个里程碑的实施步骤
├── src/
│   ├── pages/index.astro           单页主入口
│   ├── layouts/BaseLayout.astro    HTML 框架 + 字体加载
│   ├── components/
│   │   ├── DirectorSwitcher.tsx    React 切换器（hash 同步、scrollTo top）
│   │   ├── DirectorSwitcher.css
│   │   ├── anderson/               Wes Anderson 专题
│   │   ├── kubrick/                Stanley Kubrick 专题
│   │   ├── wkw/                    Wong Kar-wai 专题
│   │   ├── tarantino/              Quentin Tarantino 专题
│   │   └── miyazaki/               Hayao Miyazaki 专题
│   ├── lib/
│   │   └── director-config.ts      五位导演的元数据
│   └── styles/
│       ├── tokens.css              设计令牌（颜色 / 字体 / 缓动）
│       ├── globals.css             全局样式 + Tailwind 4 入口
│       └── directors/              五份导演主题（覆盖 CSS 变量）
├── public/                         favicon 等静态资源
├── astro.config.mjs
├── tsconfig.json
└── package.json
```

## 设计哲学

每位导演的视觉签名 = 一套**可被前端工程化复刻**的设计原语，由四层构成：

```
┌─────────────────────────────────────────┐
│  Layer 4 — 节奏 (Rhythm)                 │  滚动节拍 / 转场长度
│  Layer 3 — 运动 (Motion)                 │  缓动函数 / 推轨 / 抽帧
│  Layer 2 — 排版 (Typography & Layout)    │  字体阶 / 网格 / 对称规则
│  Layer 1 — 色彩 (Palette)                │  主色 / 辅助色 / 比例
└─────────────────────────────────────────┘
```

切换导演 = 切换四层的 CSS 变量 + 替换少量结构组件。

例：

| 视觉特征 | 前端映射 |
|----------|----------|
| Anderson 对称居中 | `display: grid; place-items: center;` + 容器 `max-width` |
| Kubrick 单点透视 | CSS 3D `perspective` + 灭点对齐的几何场景 |
| 王家卫 step printing | `animation-timing-function: steps()` + `mix-blend-mode` ghosts |
| Tarantino 章节卡 | 全屏黑底 + 黄色 `text-transform: uppercase` + SVG turbulence |
| 芬奇 低饱和 | 全局 `filter: saturate(0.65) hue-rotate(-8deg)` |

完整映射表见 [doc/02-frontend-translation.md](./doc/02-frontend-translation.md)。

## 性能与可达性

- 构建产出 < 1MB（不含 doc）
- 关闭动效：`prefers-reduced-motion: reduce` 时所有动画时长归零
- 键盘导航：切换器使用 `role="tablist"` + 标准焦点样式
- 颜色对比：每个导演主题均通过 WCAG AA
- 字体策略：`font-display: swap`，FOUT 而非 FOIT

## 部署

director-vibes

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README