# 网页动画片

**Repository Path**: yangshare/web-animation

## Basic Information

- **Project Name**: 网页动画片
- **Description**: 尝试着用html+css生成生动的动画视频
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-06
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web Animation

[中文](README.md)

Natural-scene web animations built with HTML, CSS, SVG, and Canvas. Each animation lives in its own theme directory and can be previewed by opening its `index.html` directly. The repository also includes a Node.js script for exporting themes to MP4.

## Themes

Available themes:

- 海浪拍岸
- 海浪拍岸2
- 极光流动
- 流星划过
- 落叶纷飞
- 蒲公英飞散
- 蜻蜓点水
- 森林晨雾
- 沙漠热浪
- 水母漂游
- 藤蔓生长
- 星空漩涡
- 星空漩涡2
- 樱花飘落
- 萤火虫夜舞
- 萤火虫之夜
- 萤火之森
- 萤火之森2
- 雨滴涟漪
- 月下荷塘

## Structure

```text
web-animation/
├─ codes/
│  └─ YYYY-MM-DD/
│     └─ theme-directory/
│        ├─ index.html
│        ├─ style.css
│        └─ app.js
├─ scripts/
│  └─ export-video.mjs
├─ output/
│  ├─ frames/
│  │  └─ YYYY-MM-DD/
│  └─ videos/
│     └─ YYYY-MM-DD/
├─ package.json
├─ README.md
└─ README.en.md
```

Theme code is organized by date under `codes/YYYY-MM-DD/`. Exported artifacts are also placed under date-based directories in `output/`.

## Preview

No dependency installation is required for previewing. Open any theme's `index.html` in a browser.

Example:

```text
codes/2026-05-07/樱花飘落/index.html
```

## Export Video

MP4 export requires:

- Node.js 20+
- Chrome, Edge, or Chromium
- FFmpeg with an available H.264 encoder

Run:

```powershell
npm run export:video -- "codes/YYYY-MM-DD/藤蔓生长" --duration=12 --fps=30 --width=1080 --height=1920
```

Default output:

```text
output/videos/YYYY-MM-DD/藤蔓生长.mp4
```

Common options:

| Option | Description | Default |
| --- | --- | --- |
| `--duration=<seconds>` | Video duration in seconds | `8` |
| `--fps=<number>` | Frame rate | `60` |
| `--width=<pixels>` | Export viewport width | `1080` |
| `--height=<pixels>` | Export viewport height | `1920` |
| `--dpr=<number>` | Browser deviceScaleFactor | `1` |
| `--mode=<virtual\|realtime>` | Export timing mode | `virtual` |
| `--out=<file>` | MP4 output path | `output/videos/<date>/<theme>.mp4` |
| `--frames=<dir>` | PNG frame directory | `output/frames/<date>/<theme>` |
| `--keep-frames` | Keep PNG frames after encoding | Deleted by default |
| `--show-controls` | Keep page controls in the video | Hidden by default |
| `--browser=<file>` | Chrome/Edge/Chromium executable path | Auto-detected |
| `--ffmpeg=<file>` | FFmpeg executable path | Auto-detected |
| `--encoder=<name>` | H.264 encoder name | Auto-selected |
| `--crf=<number>` | `libx264` quality; lower is better | `18` |
| `--bitrate=<value>` | Bitrate for non-CRF encoders | `12M` |

Show all options:

```powershell
npm run export:video -- --help
```

## Timing Modes

`--mode virtual` advances `requestAnimationFrame`, CSS animations, and page time frame by frame. It is a good fit for most Canvas, SVG, and CSS animations in this repository and usually produces stable output.

`--mode realtime` records wall-clock playback. Use it for pages that depend on real timers, audio, external asynchronous state, or interaction-driven behavior.

## Environment Variables

If the script cannot auto-detect your browser or FFmpeg, add a `.env.local` file:

```text
WEB_ANIMATION_BROWSER=C:\Program Files\Google\Chrome\Application\chrome.exe
FFMPEG_PATH=C:\ffmpeg\bin\ffmpeg.exe
```

You can also pass paths with `--browser` and `--ffmpeg`.

## Add a Theme

Use the scaffolding script to quickly create a new theme skeleton:

```powershell
python .claude\skills\web-animation-theme\scripts\new_theme.py "Theme Name"
```

This generates `index.html`, `style.css`, and `app.js` under `codes/<today>/`.

Manual setup notes:

1. Place the theme directory under `codes/YYYY-MM-DD/`. The directory name is the theme identifier used in the export command.
2. Add at least `index.html`; most themes also use `style.css` and `app.js`.
3. Keep the page runnable from a local file path without a build step.
4. Mark export-only UI with `data-export-hide` so it is hidden by default during export.
5. Prefer responsive animation layouts so the same theme can export cleanly in portrait, landscape, and custom resolutions.

## Troubleshooting

If the script cannot find a browser, install Chrome, Edge, or Chromium, or pass the executable with `--browser`.

If the script cannot find FFmpeg, install FFmpeg and add it to `PATH`, or pass the executable with `--ffmpeg`.

If exported motion differs from browser preview, try `--mode realtime` or check whether the theme depends on real time, network resources, or user interaction state.

If the video file is too large, lower `--fps`, reduce the resolution or bitrate, or increase `--crf`.

## Contributing

Contributions are welcome for new animation themes, theme improvements, export tooling, and documentation. Before submitting changes, check that:

- The theme can be previewed by opening its `index.html`.
- The export command can generate an MP4 successfully.
- Temporary frames, generated videos, and local environment files are not committed.