Compare two looks side by side | Style Library 样式库

Ambient Glass

把长视频读成一篇文章

好的界面不抢内容。环境光取自视频，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Ambient Glass 环境玻璃

视频自己的颜色化成模糊的环境光，内容浮在磨砂玻璃岛上。

kind	Web · dark
bg / ink / accent	#0d0f14 / #f4f5f7 / #f4f5f7
display	-apple-system, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif
body	-apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif
radius	control 14px · island 22px · island large 24px
glass	28px · rgb(28 31 40 / .55)
shadow	0 1px 0 rgb(255 255 255 / .06) inset, 0 20px 40px -24px rgb(0 0 0 / .6)

Ambient colours cross-fade over ~1.5s when the video scene changes; never faster.
Islands do not move; only the field behind them breathes.
prefers-reduced-motion and prefers-reduced-transparency fall back to the solid Brass Reading surfaces.

Brass Reading

把长视频读成一篇文章

好的界面不抢内容。阅读比看快，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Brass Reading 黄铜阅读

夜里的安静书房：深纸底、衬线正文，金句用一抹黄铜标出，正在播放用薄荷绿。

kind	Web · dark
bg / ink / accent	#131416 / #f1f0ed / #f1f0ed
display	Newsreader, "Noto Serif SC", "Songti SC", serif
body	"Public Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif
radius	control 8px · panel 12px
glass	none
shadow	none

No decorative motion; the reading column never moves on its own.
Highlights are painted with ::highlight so they never shift layout.
金句 = faint brass wash plus a brass hairline underline snapped to the text baseline.

CompReel Gallery

Opus 5.5 code films

好的界面不抢内容。43 picks, embedded not stored，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

CompReel Gallery compreel 画廊

朴素快速的策展网格，暖白底，只有一个电光蓝。

kind	Web · both
bg / ink / accent	#f6f5f2 / #15151a / #2b46ff
display	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
body	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
radius	card 14px · cta 10px · chip 999px
glass	none
shadow	none

Essentially none. CTA hover = brightness(1.08).
Grid minmax(340px, 1fr), 20px gap, max width 1120px.

CutHub Mastering Room

素材台

好的界面不抢内容。00:12:04:18 · CHAPTERS，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

CutHub Mastering Room cuthub 调色间

暗色中性的调色间，只有流水线进度用 SMPTE 色。

kind	Web · both
bg / ink / accent	#0e0f12 / #ece9e2 / #ece9e2
display	Archivo, Inter, "PingFang SC", sans-serif
body	Inter, "PingFang SC", system-ui, sans-serif
radius	base 6px · md 4px · sm 2px
glass	none
shadow	0 1px 2px hsl(225 13% 2% / .6)

fade-in 0.5s with 10px rise; scale-in 0.3s from .95.
Accordion 0.2s.
Looping shimmer/float/glow effects are legacy; don't use them in new work.

Duowenwen Glass v2

多问问，我来讲

好的界面不抢内容。问下去，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Duowenwen Glass v2 多问问玻璃 v2

柔和蓝光场上的 Liquid Glass，大圆角、胶囊导航，只有一个蓝。

kind	Web · both
bg / ink / accent	#f5f7fb / #0b1020 / #3352e8
display	-apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Display", "Noto Sans SC", sans-serif
body	-apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif
radius	control 14px · card 28px · panel 36px · pill 999px
glass	24px · rgb(255 255 255 / .62)
shadow	inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(11 16 32 / .07)

Colour, background and filter transitions 0.2s ease.
Buttons press with :active scale(.98).
prefers-reduced-motion disables all transitions.

Magic Hour Twilight

18:42

好的界面不抢内容。今天的魔幻时刻，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Magic Hour Twilight 魔幻时刻暮光

疲惫生活里的精神角落：随时间变化的暮色天空，磨砂卡片，一颗金色太阳。

kind	Web · dark
bg / ink / accent	#0a1440 / #e9edff / #ffc86e
display	"Instrument Serif", "Noto Serif SC", "Songti SC", serif
body	-apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif
radius	card 20px · sheet 22px · pill 999px
glass	18px · rgba(5, 10, 40, .4)
shadow	none

Sky colours (animated @property) and sun position transition over 2.5s ease.
Colour/background 1.2s; switch 0.2s.
Stars twinkle on a 5s loop. Everything slow and atmospheric.

SqueezeReel Workbench

视频压小，画质不丢

好的界面不抢内容。拖进来就好，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

SqueezeReel Workbench 轻舟工作台

白天的安静工作台：暖纸底，一个铜色只给按钮和进度。

kind	Web · both
bg / ink / accent	#f6f4f0 / #1c1b19 / #a5561d
display	Fraunces, "Songti SC", serif
body	Inter, "PingFang SC", system-ui, sans-serif
radius	card 12px · drop zone 14px · tag 6px
glass	none
shadow	none

Buttons and borders 120–140ms ease-out with a 1px press translate.
Progress bar width 400ms.
Engine stages use a 2.4s ease-in-out breath loader, never a percentage.

Thricegate Journal

三思而后答

好的界面不抢内容。Mixture of Agents，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Thricegate Journal 三思期刊

暖纸、宋体标题、一个赭石色，像一本安静的技术期刊。

kind	Web · both
bg / ink / accent	#faf8f4 / #22201c / #b4532a
display	"Noto Serif SC", "Songti SC", "Source Han Serif SC", serif
body	-apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif
radius	base 4px · media 8px
glass	none
shadow	none

Colour-only hover transitions.
Only keyframe: seal-pulse loader, 1.2s ease-in-out, opacity 1 → .35.
Reduced motion clamps transitions to 0.01ms.

Xiaojin Pixel Yard

小靳 Pro

好的界面不抢内容。今天想聊点什么？，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Xiaojin Pixel Yard 小靳像素小院

16 位农场小镇的立体模型，粗描边像素 UI，白天暖、夜里静。

kind	Web · both
bg / ink / accent	#1d1822 / #2a2130 / #d3a46a
display	-apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif
body	-apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif
radius	everything 0px
glass	none
shadow	0 -2px 0 #2a2130, 0 2px 0 #2a2130, -2px 0 0 #2a2130, 2px 0 0 #2a2130, 0 6px 0 rgba(42,33,48,.22)

Button press: translateY(2px), no easing.
Scene change: 4-step 2×2 dither wipe.
Characters are canvas-driven; data-still and reduced motion freeze them.

DATA CANAL30 fps

数据之渠

一条光纤串起每个方块

Data Canal 数据之渠

冷石板灰底、白字、蓝点缀，一条蓝青光纤的渠串起一个个风格统一的图标方块。

kind	Film · dark
bg / ink / accent	#2a2f3a / #ffffff / #176eff
display	"Noto Sans SC", Inter, sans-serif
body	Inter, "Noto Sans SC", sans-serif
radius	icon tile 28px · glass card 20px
glass	24px · rgb(20 23 31 / .55)
shadow	none

The canal is data, not water: discrete glowing grains, then a running river, then emergence.
A glowing lead orb travels and links the tiles; slow camera, macro shallow depth of field, circular match cuts.
Give durations room first, compress last; keyframes must cover the whole shot.

LAUNCHREEL BLUEPRINT124–136 bpm

From sketch to ship

step 02 · build

launchreel Blueprint launchreel 蓝图

品牌色染深的舞台，窗口推进到产品屏幕，行扫过，步骤标签。

kind	Film · dark
bg / ink / accent	#0C1630 / #F4F6FA / #6B95FF
display	"Space Grotesk", Inter, "Noto Sans SC", sans-serif
body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 124–136 bpm (picked per domain inside the range); hold 700ms.
Transitions: cut, zoom-through, wipe, flash-scan.

LAUNCHREEL BROADSHEET84–96 bpm

The weekly read

Issue 42 · one page per idea

launchreel Broadsheet launchreel 报纸

暖新闻纸，衬线标题，逐行打字，一点一页，像翻报纸一样溶解。

kind	Film · light
bg / ink / accent	#F5F1EA / #1B1915 / #2F6DF6
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 84–96 bpm (picked per domain inside the range); hold 1600ms.
Transitions: cut, dissolve, iris.

LAUNCHREEL CONFETTI132–148 bpm

Plans, but fun

3 friends joined

launchreel Confetti launchreel 彩纸

品牌色洗过的亮舞台，弹跳淡入字，卡片轮播，步骤标签弹出，甩镜。

kind	Film · light
bg / ink / accent	#E2EAFE / #121318 / #2F6DF6
display	Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: fade-up (ease-out).
Tempo 132–148 bpm (picked per domain inside the range); hold 600ms.
Transitions: cut, whip-pan, zoom, flash-scan.

LAUNCHREEL CONSOLE118–128 bpm

Ship the dashboard

KPI · roadmap · 4 nodes

launchreel Console launchreel 控制台

近黑控制台，Geist 一贯到底，遮罩上升标题，倾斜产品镜头，KPI 面板。

kind	Film · dark
bg / ink / accent	#0B0D12 / #ECEFF4 / #6B95FF
display	"Geist Mono", ui-monospace, monospace
body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 118–128 bpm (picked per domain inside the range); hold 900ms.
Transitions: cut, push, zoom.

LAUNCHREEL DARKROOM88–100 bpm

Made by hand

since 2019 · 4,200 makers

launchreel Darkroom launchreel 暗房

暖黑加颗粒和暗角，衬线逐字打出，图片成墙、快速蒙太奇。

kind	Film · dark
bg / ink / accent	#0B0A08 / #F2ECE1 / #6B95FF
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 88–100 bpm (picked per domain inside the range); hold 1400ms.
Transitions: cut, dip-to-black, focus-push, pixelate.

LAUNCHREEL HANZI POP128–140 bpm

一键开团

三步上手

launchreel Hanzi Pop launchreel 汉字波普

品牌色洗过的亮舞台，粗黑中文，快速淡入，卡片轮播，节点路线图，甩镜。中文优先。

kind	Film · light
bg / ink / accent	#E2EAFE / #121318 / #2F6DF6
display	Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: fade-up (ease-out).
Tempo 128–140 bpm (picked per domain inside the range); hold 700ms.
Transitions: cut, whip-pan, flash-scan.

LAUNCHREEL HARNESS112–124 bpm

$ open launchreel.ai

status: ready · 12ms

launchreel Harness launchreel 终端

终端片：近黑舞台，钩子像命令一样逐字打出，光标闪烁，结尾 $ open <domain>。

kind	Film · dark
bg / ink / accent	#0B0D12 / #ECEFF4 / #6B95FF
display	"JetBrains Mono", ui-monospace, monospace
body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 112–124 bpm (picked per domain inside the range); hold 1200ms.
Transitions: cut, flash-scan, wipe.

LAUNCHREEL INK SEAL80–90 bpm

慢慢来，比较快

三张卡 · 一页一事

launchreel Ink Seal launchreel 墨印

象牙宣纸，宋体，慢打字，装裱页面加三张卡，安静溶解。中文优先。

kind	Film · light
bg / ink / accent	#F7F2E8 / #221D16 / #2F6DF6
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 80–90 bpm (picked per domain inside the range); hold 1800ms.
Transitions: cut, dissolve, iris.

LAUNCHREEL LEDGER104–112 bpm

Every cent, accounted

$1.2M settled · 0 disputes

launchreel Ledger launchreel 账本

石白纸面，只用 Inter，稳定的遮罩上升，数字便当格滚动，三张玻璃卡。

kind	Film · light
bg / ink / accent	#F2F1ED / #15161A / #2F6DF6
display	Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 104–112 bpm (picked per domain inside the range); hold 1100ms.
Transitions: cut, dissolve, zoom.

LAUNCHREEL NEON136–150 bpm

Tonight, louder

#live · 128 bpm

launchreel Neon launchreel 霓虹

品牌色染的夜舞台，快速淡入，网站图片墙，功能标签，像素化和闪切。

kind	Film · dark
bg / ink / accent	#0C1630 / #F4F6FA / #6B95FF
display	Sora, Inter, "Noto Sans SC", sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: fade-up (ease-out).
Tempo 136–150 bpm (picked per domain inside the range); hold 600ms.
Transitions: cut, pixelate, flash-scan, whip-pan.

LAUNCHREEL STUDIO116–124 bpm

Focus, shipped

roadmap · step 3 of 4

launchreel Studio launchreel 摄影棚

冷白摄影棚纸，倾斜产品镜头，列表行扫过，节点路线图逐步点亮。

kind	Film · light
bg / ink / accent	#F3F5F8 / #0E1320 / #2F6DF6
display	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 116–124 bpm (picked per domain inside the range); hold 900ms.
Transitions: cut, push, wipe.

REVIEW ROOM30 fps

Review cut v3

v3 · 1080p30 · H.264 High 4:2:0

Review Room 审片间

浅蓝纸面、一个深蓝强调，玻璃卡时间轴；审片版必须谁都打得开。

kind	Film · light
bg / ink / accent	#f4f6fb / #1a1d26 / #1f2ff0
display	"Alibaba PuHuiTi 3.0", Inter, sans-serif
body	Inter, "Alibaba PuHuiTi 3.0", sans-serif
radius	glass card 24px · chip 12px
glass	20px · rgb(255 255 255 / .72)
shadow	0 12px 32px -16px rgb(26 29 38 / .18)

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.

STAGE24–30 fps

一束光

act I · midnight indigo

Stage 舞台单光

一间暗室、一束会动的光：雾、尘、颗粒都被它照亮，三幕从靛紫到冷青到日出金。

kind	Film · dark
bg / ink / accent	#05040c / #f1eee8 / #8474ff
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	"Source Han Serif SC", "Noto Serif SC", serif
radius	screen 14px
glass	none
shadow	none

Words blur in one by one: blur 14px → 0, 0.16–0.2s apart, slight rise; emphasis words take the light colour.
World layer pushes 1.0 → 1.055 with drift ~(16, 9)px; text layer follows at half amplitude for parallax.
Transitions only hard cut, full-frame flash or wipe; never dissolve. Cuts snap to the music grid.

Ambient Glass

把长视频读成一篇文章

好的界面不抢内容。环境光取自视频，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Ambient Glass 环境玻璃

视频自己的颜色化成模糊的环境光，内容浮在磨砂玻璃岛上。

kind	Web · dark
bg / ink / accent	#0d0f14 / #f4f5f7 / #f4f5f7
display	-apple-system, "SF Pro Display", "PingFang SC", "Noto Sans SC", system-ui, sans-serif
body	-apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif
radius	control 14px · island 22px · island large 24px
glass	28px · rgb(28 31 40 / .55)
shadow	0 1px 0 rgb(255 255 255 / .06) inset, 0 20px 40px -24px rgb(0 0 0 / .6)

Ambient colours cross-fade over ~1.5s when the video scene changes; never faster.
Islands do not move; only the field behind them breathes.
prefers-reduced-motion and prefers-reduced-transparency fall back to the solid Brass Reading surfaces.

Brass Reading

把长视频读成一篇文章

好的界面不抢内容。阅读比看快，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Brass Reading 黄铜阅读

夜里的安静书房：深纸底、衬线正文，金句用一抹黄铜标出，正在播放用薄荷绿。

kind	Web · dark
bg / ink / accent	#131416 / #f1f0ed / #f1f0ed
display	Newsreader, "Noto Serif SC", "Songti SC", serif
body	"Public Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif
radius	control 8px · panel 12px
glass	none
shadow	none

No decorative motion; the reading column never moves on its own.
Highlights are painted with ::highlight so they never shift layout.
金句 = faint brass wash plus a brass hairline underline snapped to the text baseline.

CompReel Gallery

Opus 5.5 code films

好的界面不抢内容。43 picks, embedded not stored，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

CompReel Gallery compreel 画廊

朴素快速的策展网格，暖白底，只有一个电光蓝。

kind	Web · both
bg / ink / accent	#f6f5f2 / #15151a / #2b46ff
display	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
body	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
radius	card 14px · cta 10px · chip 999px
glass	none
shadow	none

Essentially none. CTA hover = brightness(1.08).
Grid minmax(340px, 1fr), 20px gap, max width 1120px.

CutHub Mastering Room

素材台

好的界面不抢内容。00:12:04:18 · CHAPTERS，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

CutHub Mastering Room cuthub 调色间

暗色中性的调色间，只有流水线进度用 SMPTE 色。

kind	Web · both
bg / ink / accent	#0e0f12 / #ece9e2 / #ece9e2
display	Archivo, Inter, "PingFang SC", sans-serif
body	Inter, "PingFang SC", system-ui, sans-serif
radius	base 6px · md 4px · sm 2px
glass	none
shadow	0 1px 2px hsl(225 13% 2% / .6)

fade-in 0.5s with 10px rise; scale-in 0.3s from .95.
Accordion 0.2s.
Looping shimmer/float/glow effects are legacy; don't use them in new work.

Duowenwen Glass v2

多问问，我来讲

好的界面不抢内容。问下去，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Duowenwen Glass v2 多问问玻璃 v2

柔和蓝光场上的 Liquid Glass，大圆角、胶囊导航，只有一个蓝。

kind	Web · both
bg / ink / accent	#f5f7fb / #0b1020 / #3352e8
display	-apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Display", "Noto Sans SC", sans-serif
body	-apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif
radius	control 14px · card 28px · panel 36px · pill 999px
glass	24px · rgb(255 255 255 / .62)
shadow	inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(11 16 32 / .07)

Colour, background and filter transitions 0.2s ease.
Buttons press with :active scale(.98).
prefers-reduced-motion disables all transitions.

Magic Hour Twilight

18:42

好的界面不抢内容。今天的魔幻时刻，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Magic Hour Twilight 魔幻时刻暮光

疲惫生活里的精神角落：随时间变化的暮色天空，磨砂卡片，一颗金色太阳。

kind	Web · dark
bg / ink / accent	#0a1440 / #e9edff / #ffc86e
display	"Instrument Serif", "Noto Serif SC", "Songti SC", serif
body	-apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif
radius	card 20px · sheet 22px · pill 999px
glass	18px · rgba(5, 10, 40, .4)
shadow	none

Sky colours (animated @property) and sun position transition over 2.5s ease.
Colour/background 1.2s; switch 0.2s.
Stars twinkle on a 5s loop. Everything slow and atmospheric.

SqueezeReel Workbench

视频压小，画质不丢

好的界面不抢内容。拖进来就好，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

SqueezeReel Workbench 轻舟工作台

白天的安静工作台：暖纸底，一个铜色只给按钮和进度。

kind	Web · both
bg / ink / accent	#f6f4f0 / #1c1b19 / #a5561d
display	Fraunces, "Songti SC", serif
body	Inter, "PingFang SC", system-ui, sans-serif
radius	card 12px · drop zone 14px · tag 6px
glass	none
shadow	none

Buttons and borders 120–140ms ease-out with a 1px press translate.
Progress bar width 400ms.
Engine stages use a 2.4s ease-in-out breath loader, never a percentage.

Thricegate Journal

三思而后答

好的界面不抢内容。Mixture of Agents，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Thricegate Journal 三思期刊

暖纸、宋体标题、一个赭石色，像一本安静的技术期刊。

kind	Web · both
bg / ink / accent	#faf8f4 / #22201c / #b4532a
display	"Noto Serif SC", "Songti SC", "Source Han Serif SC", serif
body	-apple-system, "PingFang SC", "Noto Sans SC", system-ui, sans-serif
radius	base 4px · media 8px
glass	none
shadow	none

Colour-only hover transitions.
Only keyframe: seal-pulse loader, 1.2s ease-in-out, opacity 1 → .35.
Reduced motion clamps transitions to 0.01ms.

Xiaojin Pixel Yard

小靳 Pro

好的界面不抢内容。今天想聊点什么？，其余交给留白。

开始使用了解更多

本月进度62%

12:04 · 1,280 字

Xiaojin Pixel Yard 小靳像素小院

16 位农场小镇的立体模型，粗描边像素 UI，白天暖、夜里静。

kind	Web · both
bg / ink / accent	#1d1822 / #2a2130 / #d3a46a
display	-apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif
body	-apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif
radius	everything 0px
glass	none
shadow	0 -2px 0 #2a2130, 0 2px 0 #2a2130, -2px 0 0 #2a2130, 2px 0 0 #2a2130, 0 6px 0 rgba(42,33,48,.22)

Button press: translateY(2px), no easing.
Scene change: 4-step 2×2 dither wipe.
Characters are canvas-driven; data-still and reduced motion freeze them.

DATA CANAL30 fps

数据之渠

一条光纤串起每个方块

Data Canal 数据之渠

冷石板灰底、白字、蓝点缀，一条蓝青光纤的渠串起一个个风格统一的图标方块。

kind	Film · dark
bg / ink / accent	#2a2f3a / #ffffff / #176eff
display	"Noto Sans SC", Inter, sans-serif
body	Inter, "Noto Sans SC", sans-serif
radius	icon tile 28px · glass card 20px
glass	24px · rgb(20 23 31 / .55)
shadow	none

The canal is data, not water: discrete glowing grains, then a running river, then emergence.
A glowing lead orb travels and links the tiles; slow camera, macro shallow depth of field, circular match cuts.
Give durations room first, compress last; keyframes must cover the whole shot.

LAUNCHREEL BLUEPRINT124–136 bpm

From sketch to ship

step 02 · build

launchreel Blueprint launchreel 蓝图

品牌色染深的舞台，窗口推进到产品屏幕，行扫过，步骤标签。

kind	Film · dark
bg / ink / accent	#0C1630 / #F4F6FA / #6B95FF
display	"Space Grotesk", Inter, "Noto Sans SC", sans-serif
body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 124–136 bpm (picked per domain inside the range); hold 700ms.
Transitions: cut, zoom-through, wipe, flash-scan.

LAUNCHREEL BROADSHEET84–96 bpm

The weekly read

Issue 42 · one page per idea

launchreel Broadsheet launchreel 报纸

暖新闻纸，衬线标题，逐行打字，一点一页，像翻报纸一样溶解。

kind	Film · light
bg / ink / accent	#F5F1EA / #1B1915 / #2F6DF6
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 84–96 bpm (picked per domain inside the range); hold 1600ms.
Transitions: cut, dissolve, iris.

LAUNCHREEL CONFETTI132–148 bpm

Plans, but fun

3 friends joined

launchreel Confetti launchreel 彩纸

品牌色洗过的亮舞台，弹跳淡入字，卡片轮播，步骤标签弹出，甩镜。

kind	Film · light
bg / ink / accent	#E2EAFE / #121318 / #2F6DF6
display	Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: fade-up (ease-out).
Tempo 132–148 bpm (picked per domain inside the range); hold 600ms.
Transitions: cut, whip-pan, zoom, flash-scan.

LAUNCHREEL CONSOLE118–128 bpm

Ship the dashboard

KPI · roadmap · 4 nodes

launchreel Console launchreel 控制台

近黑控制台，Geist 一贯到底，遮罩上升标题，倾斜产品镜头，KPI 面板。

kind	Film · dark
bg / ink / accent	#0B0D12 / #ECEFF4 / #6B95FF
display	"Geist Mono", ui-monospace, monospace
body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 118–128 bpm (picked per domain inside the range); hold 900ms.
Transitions: cut, push, zoom.

LAUNCHREEL DARKROOM88–100 bpm

Made by hand

since 2019 · 4,200 makers

launchreel Darkroom launchreel 暗房

暖黑加颗粒和暗角，衬线逐字打出，图片成墙、快速蒙太奇。

kind	Film · dark
bg / ink / accent	#0B0A08 / #F2ECE1 / #6B95FF
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 88–100 bpm (picked per domain inside the range); hold 1400ms.
Transitions: cut, dip-to-black, focus-push, pixelate.

LAUNCHREEL HANZI POP128–140 bpm

一键开团

三步上手

launchreel Hanzi Pop launchreel 汉字波普

品牌色洗过的亮舞台，粗黑中文，快速淡入，卡片轮播，节点路线图，甩镜。中文优先。

kind	Film · light
bg / ink / accent	#E2EAFE / #121318 / #2F6DF6
display	Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: fade-up (ease-out).
Tempo 128–140 bpm (picked per domain inside the range); hold 700ms.
Transitions: cut, whip-pan, flash-scan.

LAUNCHREEL HARNESS112–124 bpm

$ open launchreel.ai

status: ready · 12ms

launchreel Harness launchreel 终端

终端片：近黑舞台，钩子像命令一样逐字打出，光标闪烁，结尾 $ open <domain>。

kind	Film · dark
bg / ink / accent	#0B0D12 / #ECEFF4 / #6B95FF
display	"JetBrains Mono", ui-monospace, monospace
body	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 112–124 bpm (picked per domain inside the range); hold 1200ms.
Transitions: cut, flash-scan, wipe.

LAUNCHREEL INK SEAL80–90 bpm

慢慢来，比较快

三张卡 · 一页一事

launchreel Ink Seal launchreel 墨印

象牙宣纸，宋体，慢打字，装裱页面加三张卡，安静溶解。中文优先。

kind	Film · light
bg / ink / accent	#F7F2E8 / #221D16 / #2F6DF6
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: typewriter (out-cubic).
Tempo 80–90 bpm (picked per domain inside the range); hold 1800ms.
Transitions: cut, dissolve, iris.

LAUNCHREEL LEDGER104–112 bpm

Every cent, accounted

$1.2M settled · 0 disputes

launchreel Ledger launchreel 账本

石白纸面，只用 Inter，稳定的遮罩上升，数字便当格滚动，三张玻璃卡。

kind	Film · light
bg / ink / accent	#F2F1ED / #15161A / #2F6DF6
display	Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 104–112 bpm (picked per domain inside the range); hold 1100ms.
Transitions: cut, dissolve, zoom.

LAUNCHREEL NEON136–150 bpm

Tonight, louder

#live · 128 bpm

launchreel Neon launchreel 霓虹

品牌色染的夜舞台，快速淡入，网站图片墙，功能标签，像素化和闪切。

kind	Film · dark
bg / ink / accent	#0C1630 / #F4F6FA / #6B95FF
display	Sora, Inter, "Noto Sans SC", sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 12px · screen 18px
glass	none
shadow	none

Entrance: fade-up (ease-out).
Tempo 136–150 bpm (picked per domain inside the range); hold 600ms.
Transitions: cut, pixelate, flash-scan, whip-pan.

LAUNCHREEL STUDIO116–124 bpm

Focus, shipped

roadmap · step 3 of 4

launchreel Studio launchreel 摄影棚

冷白摄影棚纸，倾斜产品镜头，列表行扫过，节点路线图逐步点亮。

kind	Film · light
bg / ink / accent	#F3F5F8 / #0E1320 / #2F6DF6
display	Geist, Inter, "Noto Sans SC", system-ui, sans-serif
body	Inter, "Noto Sans SC", system-ui, sans-serif
radius	card 14px · screen 18px
glass	none
shadow	none

Entrance: mask-rise (out-expo).
Tempo 116–124 bpm (picked per domain inside the range); hold 900ms.
Transitions: cut, push, wipe.

REVIEW ROOM30 fps

Review cut v3

v3 · 1080p30 · H.264 High 4:2:0

Review Room 审片间

浅蓝纸面、一个深蓝强调，玻璃卡时间轴；审片版必须谁都打得开。

kind	Film · light
bg / ink / accent	#f4f6fb / #1a1d26 / #1f2ff0
display	"Alibaba PuHuiTi 3.0", Inter, sans-serif
body	Inter, "Alibaba PuHuiTi 3.0", sans-serif
radius	glass card 24px · chip 12px
glass	20px · rgb(255 255 255 / .72)
shadow	0 12px 32px -16px rgb(26 29 38 / .18)

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.

STAGE24–30 fps

一束光

act I · midnight indigo

Stage 舞台单光

一间暗室、一束会动的光：雾、尘、颗粒都被它照亮，三幕从靛紫到冷青到日出金。

kind	Film · dark
bg / ink / accent	#05040c / #f1eee8 / #8474ff
display	"Source Han Serif SC", "Noto Serif SC", "Songti SC", serif
body	"Source Han Serif SC", "Noto Serif SC", serif
radius	screen 14px
glass	none
shadow	none

Words blur in one by one: blur 14px → 0, 0.16–0.2s apart, slight rise; emphasis words take the light colour.
World layer pushes 1.0 → 1.055 with drift ~(16, 9)px; text layer follows at half amplitude for parallax.
Transitions only hard cut, full-frame flash or wipe; never dissolve. Cuts snap to the music grid.

把长视频读成一篇文章

Ambient Glass 环境玻璃

把长视频读成一篇文章

Brass Reading 黄铜阅读

Opus 5.5 code films

CompReel Gallery compreel 画廊

素材台

CutHub Mastering Room cuthub 调色间

多问问，我来讲

Duowenwen Glass v2 多问问 玻璃 v2

18:42

Magic Hour Twilight 魔幻时刻 暮光

视频压小，画质不丢

SqueezeReel Workbench 轻舟 工作台

三思而后答

Thricegate Journal 三思 期刊

小靳 Pro

Xiaojin Pixel Yard 小靳 像素小院

Data Canal 数据之渠

launchreel Blueprint launchreel 蓝图

launchreel Broadsheet launchreel 报纸

launchreel Confetti launchreel 彩纸

launchreel Console launchreel 控制台

launchreel Darkroom launchreel 暗房

launchreel Hanzi Pop launchreel 汉字波普

launchreel Harness launchreel 终端

launchreel Ink Seal launchreel 墨印

launchreel Ledger launchreel 账本

launchreel Neon launchreel 霓虹

launchreel Studio launchreel 摄影棚

Review Room 审片间

Stage 舞台 单光

把长视频读成一篇文章

Ambient Glass 环境玻璃

把长视频读成一篇文章

Brass Reading 黄铜阅读

Opus 5.5 code films

CompReel Gallery compreel 画廊

素材台

CutHub Mastering Room cuthub 调色间

多问问，我来讲

Duowenwen Glass v2 多问问 玻璃 v2

18:42

Magic Hour Twilight 魔幻时刻 暮光

视频压小，画质不丢

SqueezeReel Workbench 轻舟 工作台

三思而后答

Thricegate Journal 三思 期刊

小靳 Pro

Xiaojin Pixel Yard 小靳 像素小院

Data Canal 数据之渠

launchreel Blueprint launchreel 蓝图

launchreel Broadsheet launchreel 报纸

launchreel Confetti launchreel 彩纸

launchreel Console launchreel 控制台

launchreel Darkroom launchreel 暗房

launchreel Hanzi Pop launchreel 汉字波普

launchreel Harness launchreel 终端

launchreel Ink Seal launchreel 墨印

launchreel Ledger launchreel 账本

launchreel Neon launchreel 霓虹

launchreel Studio launchreel 摄影棚

Review Room 审片间

Stage 舞台 单光

Duowenwen Glass v2 多问问玻璃 v2

Magic Hour Twilight 魔幻时刻暮光

SqueezeReel Workbench 轻舟工作台

Thricegate Journal 三思期刊

Xiaojin Pixel Yard 小靳像素小院

Stage 舞台单光

Duowenwen Glass v2 多问问玻璃 v2

Magic Hour Twilight 魔幻时刻暮光

SqueezeReel Workbench 轻舟工作台

Thricegate Journal 三思期刊

Xiaojin Pixel Yard 小靳像素小院

Stage 舞台单光