Review Room
审片间浅蓝纸面、一个深蓝强调，玻璃卡时间轴；审片版必须谁都打得开。
Pale blue-white paper, one deep blue accent, a glass-card timeline; every review cut must open anywhere.
Review cut v3
v3 · 1080p30 · H.264 High 4:2:0
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | "Alibaba PuHuiTi 3.0", Inter, sans-serif |
|---|---|
| Body | Inter, "Alibaba PuHuiTi 3.0", sans-serif |
| super | 144px |
| chapter | 64px |
| body | 28px |
| label | 22px |
Chinese in Alibaba PuHuiTi (free for commercial use), Latin in Inter. Avoid PingFang SC for commercial delivery. Load PuHuiTi as woff2 or a system family name; Chrome rejects the TTF via file:.
Shape & surface
| radius · glass card | 24px |
|---|---|
| radius · chip | 12px |
| shadow | 0 12px 32px -16px rgb(26 29 38 / .18) |
| glass | 20px blur · rgb(255 255 255 / .72) |
Timelines are a row of horizontal glass cards.
Motion
- Enter 0.5s ease-out, stagger 0.08s, hold 2s.
- Review cuts carry a version plate and a non-empty first frame.
- Convert every PNG sequence to RGBA before encoding; mixed RGB/RGBA shifts ffmpeg overlays.
Film parameters
| Resolution | 1920×1080, 30 fps, silent PCM |
|---|---|
| Review encode | H.264 High, yuv420p, -movflags +faststart |
| Check | Scale HD to 720p and compare per-frame PSNR with the review cut; normal ≥ 36 dB |
| Alpha master | ProRes 4444 yuva444p12le; alphaextract YMIN must reach the floor (256 at 12-bit) |
| Backed master | yuv444p12le, no alpha channel |
| Handover | Animator package: project file, project tree and HD media only; notes go in layer comments, no README |
Do / Don't
Do
- Use the one deep blue only on the words and numbers that matter.
- Keep paper colour identical across opening, body and end card.
- Encode review cuts H.264 High yuv420p faststart so QuickTime and WeChat open them.
Don't
- Don't ship 4:4:4 review files; they won't open on phones.
- Don't mix RGB and RGBA frames in one sequence.
- Don't put README or notes files in the animator's project package.
Used in
- Client film, 2026
Sources
Internal delivery notes, client film, 2026
Updated 2026-10-13
Export
/* Review Room / 审片间 — Pale blue-white paper, one deep blue accent, a glass-card timeline; every review cut must open anywhere. */
:root {
--review-room-bg: #f4f6fb;
--review-room-surface: rgb(255 255 255 / .72);
--review-room-ink: #1a1d26;
--review-room-muted: #8a90a0;
--review-room-accent: #1f2ff0;
--review-room-accent-ink: #ffffff;
--review-room-line: #d9dde8;
--review-room-highlight: #1f2ff0;
--review-room-pal-paper: #f4f6fb;
--review-room-pal-surface: #ffffff;
--review-room-pal-ink: #1a1d26;
--review-room-pal-muted: #8a90a0;
--review-room-pal-line: #d9dde8;
--review-room-pal-deep-blue: #1f2ff0;
--review-room-pal-folder-blue: #4aa3f5;
--review-room-font-display: "Alibaba PuHuiTi 3.0", Inter, sans-serif;
--review-room-font-body: Inter, "Alibaba PuHuiTi 3.0", sans-serif;
--review-room-text-super: 144px;
--review-room-text-chapter: 64px;
--review-room-text-body: 28px;
--review-room-text-label: 22px;
--review-room-radius-glass-card: 24px;
--review-room-radius-chip: 12px;
--review-room-glass-blur: 20px;
--review-room-glass-fill: rgb(255 255 255 / .72);
--review-room-shadow: 0 12px 32px -16px rgb(26 29 38 / .18);
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #f4f6fb;
--color-surface: rgb(255 255 255 / .72);
--color-ink: #1a1d26;
--color-muted: #8a90a0;
--color-accent: #1f2ff0;
--color-accent-ink: #ffffff;
--color-line: #d9dde8;
--color-highlight: #1f2ff0;
--font-display: "Alibaba PuHuiTi 3.0", Inter, sans-serif;
--font-sans: Inter, "Alibaba PuHuiTi 3.0", sans-serif;
--radius-glass-card: 24px;
--radius-chip: 12px;
--shadow-look: 0 12px 32px -16px rgb(26 29 38 / .18);
--blur-glass: 20px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#f4f6fb",
"surface": "rgb(255 255 255 / .72)",
"ink": "#1a1d26",
"muted": "#8a90a0",
"accent": "#1f2ff0",
"accent-ink": "#ffffff",
"line": "#d9dde8",
"highlight": "#1f2ff0",
},
fontFamily: {
display: ["\"Alibaba PuHuiTi 3.0\", Inter, sans-serif"],
sans: ["Inter, \"Alibaba PuHuiTi 3.0\", sans-serif"],
},
borderRadius: {
"glass-card": "24px",
"chip": "12px",
},
backdropBlur: { glass: "20px" },
},
},
};