HH/.agents/skills/huashu-design/references/apple-gallery-showcase.md

Apple Gallery Showcase · 画廊展示墙动画风格

灵感来源：Claude Design 官网 hero 视频 + 苹果产品页「作品墙」式陈列 实战出处：huashu-design 发布 hero v5 适用场景：产品发布 hero 动画、skill 能力演示、作品集展示——任何需要把「多件高质量产出」同时展陈并引导观众注意力的场景

---

触发判断：什么时候用这个风格

适合：

• 有10张以上真实产出要同屏展示（PPT、App、网页、信息图）
• 观众是专业受众（开发者、设计师、产品经理），对「质感」敏感
• 希望传递的气质是「克制、展览式、高级、有空间感」
• 需要焦点和全局同时存在（看细节但不失整体）

不适合：

• 单产品聚焦（用 frontend-design 的产品 hero 模板）
• 情绪向/故事性强的动画（用时间轴叙事模板）
• 小屏幕 / 竖屏（倾斜视角在小画面上会糊）

---

核心视觉 Token

:root {
  /* 浅色画廊调板 */
  --bg:         #F5F5F7;   /* 主画布底 — 苹果官网灰 */
  --bg-warm:    #FAF9F5;   /* 温暖米白变体 */
  --ink:        #1D1D1F;   /* 主字色 */
  --ink-80:     #3A3A3D;
  --ink-60:     #545458;
  --muted:      #86868B;   /* 次级文字 */
  --dim:        #C7C7CC;
  --hairline:   #E5E5EA;   /* 卡片1px边框 */
  --accent:     #D97757;   /* 赤陶橙 — Claude brand */
  --accent-deep:#B85D3D;

  --serif-cn: "Noto Serif SC", "Songti SC", Georgia, serif;
  --serif-en: "Source Serif 4", "Tiempos Headline", Georgia, serif;
  --sans:     "Inter", -apple-system, "PingFang SC", system-ui;
  --mono:     "JetBrains Mono", "SF Mono", ui-monospace;
}

关键原则：

1. 绝不用纯黑底。黑底会让作品看起来像电影、不像「可以被采用的工作成果」
2. 赤陶橙是唯一色相accent，其他全部是灰阶 + 白
3. 三字体栈（serif英+serif中+sans+mono）营造「出版物」而非「互联网产品」的气质

---

核心布局模式

1. 悬浮卡片（整个风格的基本单元）

.gallery-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 6px;                          /* 内边距是「装裱纸」 */
  border: 1px solid var(--hairline);
  box-shadow:
    0 20px 60px -20px rgba(29, 29, 31, 0.12),   /* 主阴影，软且长 */
    0 6px 18px -6px rgba(29, 29, 31, 0.06);     /* 第二层近光，制造浮感 */
  aspect-ratio: 16 / 9;                  /* 统一 slide 比例 */
  overflow: hidden;
}
.gallery-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;                    /* 比卡片圆角略小，视觉嵌套 */
}

反面教材：不要贴边瓷砖（无padding无border无shadow）——那是信息图密度表达，不是展览。

2. 3D倾斜作品墙

.gallery-viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  perspective: 2400px;                   /* 深一些的透视，倾斜不夸张 */
  perspective-origin: 50% 45%;
}
.gallery-canvas {
  width: 4320px;                         /* 画布 = 2.25× viewport */
  height: 2520px;                        /* 留出pan空间 */
  transform-origin: center center;
  transform: perspective(2400px)
             rotateX(14deg)              /* 向后倾 */
             rotateY(-10deg)             /* 向左转 */
             rotateZ(-2deg);             /* 轻微倾斜，去掉太规整 */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 40px;
  padding: 60px;
}

参数 sweet spot：

• rotateX: 10-15deg（再多就像开酒会 VIP 背景板）
• rotateY: ±8-12deg（左右对称感）
• rotateZ: ±2-3deg（「这不是机器摆的」的人味）
• perspective: 2000-2800px（小于2000会鱼眼，大于3000接近正投影）

3. 2×2 四角汇聚（选择场景）

.grid22 {
  display: grid;
  grid-template-columns: repeat(2, 800px);
  gap: 56px 64px;
  align-items: start;
}

每张卡片从对应角落（tl/tr/bl/br）向中心滑入 + fade in。对应的 cornerEntry 向量：

const cornerEntry = {
  tl: { dx: -700, dy: -500 },
  tr: { dx:  700, dy: -500 },
  bl: { dx: -700, dy:  500 },
  br: { dx:  700, dy:  500 },
};

---

五种核心动画模式

模式 A · 四角汇聚（0.8-1.2s）

4 个元素从视口四角滑入，同时缩放 0.85→1.0，对应 ease-out。适合「展示多方向选择」的开场。

const inP = easeOut(clampLerp(t, start, end));
card.style.transform = `translate3d(${(1-inP)*ce.dx}px, ${(1-inP)*ce.dy}px, 0) scale(${0.85 + 0.15*inP})`;
card.style.opacity = inP;

模式 B · 选中放大 + 其他滑出（0.8s）

被选中的卡片放大 1.0→1.28，其他卡片 fade out + blur + 向四角漂回：

// 被选中
card.style.transform = `translate3d(${cellDx*outP}px, ${cellDy*outP}px, 0) scale(${1 + 0.28*easeOut(zoomP)})`;
// 未选中
card.style.opacity = 1 - outP;
card.style.filter = `blur(${outP * 1.5}px)`;

关键：未选中的要 blur，不是纯 fade。blur 模拟景深，视觉上把被选中的「推出来」。

模式 C · Ripple 涟漪展开（1.7s）

从中心向外，按距离 delay，每张卡片依次淡入 + 从 1.25x 缩到 0.94x（「镜头拉远」）：

const col = i % COLS, row = Math.floor(i / COLS);
const dc = col - (COLS-1)/2, dr = row - (ROWS-1)/2;
const dist = Math.sqrt(dc*dc + dr*dr);
const delay = (dist / maxDist) * 0.8;
const localT = Math.max(0, (t - rippleStart - delay) / 0.7);
card.style.opacity = easeOut(Math.min(1, localT));

// 同时整体 scale 1.25→0.94
const galleryScale = 1.25 - 0.31 * easeOut(rippleProgress);

模式 D · Sinusoidal Pan（持续漂移）

用正弦波 + 线性漂移组合，避免 marquee 那种「有起点有终点」的循环感：

const panX = Math.sin(panT * 0.12) * 220 - panT * 8;    // 横向左漂
const panY = Math.cos(panT * 0.09) * 120 - panT * 5;    // 纵向上漂
const clampedX = Math.max(-900, Math.min(900, panX));   // 防止露边

参数：

• 正弦周期 0.09-0.15 rad/s（慢，约30-50秒一个摆动）
• 线性漂移 5-8 px/s（比观众眨眼慢）
• 振幅 120-220 px（大到能感觉，小到不会晕）

模式 E · Focus Overlay（焦点切换）

关键设计：focus overlay 是一个平面元素（不倾斜），浮在倾斜画布之上。被选中的 slide 从瓦片位置（约400×225）缩放到屏幕中央（960×540），背景画布不倾斜变化但变暗到 45%：

// Focus overlay (flat, centered)
focusOverlay.style.width = (startW + (endW - startW) * focusIntensity) + 'px';
focusOverlay.style.height = (startH + (endH - startH) * focusIntensity) + 'px';
focusOverlay.style.opacity = focusIntensity;

// 背景卡片变暗，但依然可见（关键！不要100%遮罩）
card.style.opacity = entryOp * (1 - 0.55 * focusIntensity);   // 1 → 0.45
card.style.filter = `brightness(${1 - 0.3 * focusIntensity})`;

清晰度铁律：

• Focus overlay 的 <img> 必须 src 直连原图，不要复用 gallery 里的压缩缩略
• 提前 preload 所有原图到 new Image()[] 数组
• overlay 自身 width/height 按帧计算，浏览器每帧 resample 原图

---

时间轴架构（可复用骨架）

const T = {
  DURATION: 25.0,
  s1_in: [0.0, 0.8],    s1_type: [1.0, 3.2],  s1_out: [3.5, 4.0],
  s2_in: [3.9, 5.1],    s2_hold: [5.1, 7.0],  s2_out: [7.0, 7.8],
  s3_hold: [7.8, 8.3],  s3_ripple: [8.3, 10.0],
  panStart: 8.6,
  focuses: [
    { start: 11.0, end: 12.7, idx: 2  },
    { start: 13.3, end: 15.0, idx: 3  },
    { start: 15.6, end: 17.3, idx: 10 },
    { start: 17.9, end: 19.6, idx: 16 },
  ],
  s4_walloff: [21.1, 21.8], s4_in: [21.8, 22.7], s4_hold: [23.7, 25.0],
};

// 核心 easing
const easeOut = t => 1 - Math.pow(1 - t, 3);
const easeInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;
function lerp(time, start, end, fromV, toV, easing) {
  if (time <= start) return fromV;
  if (time >= end) return toV;
  let p = (time - start) / (end - start);
  if (easing) p = easing(p);
  return fromV + (toV - fromV) * p;
}

// 单一 render(t) 函数读时间戳、写所有元素
function render(t) { /* ... */ }
requestAnimationFrame(function tick(now) {
  const t = ((now - startMs) / 1000) % T.DURATION;
  render(t);
  requestAnimationFrame(tick);
});

架构精髓：所有状态由时间戳 t 推导，没有状态机、没有 setTimeout。这样：

• 播放到任意时刻 window.__setTime(12.3) 立刻跳转（方便 playwright 逐帧截）
• 循环天然无缝（t mod DURATION）
• Debug 时能冻结任意一帧

---

质感细节（容易被忽略但致命）

1. SVG noise texture

浅色底最怕「太平」。叠加一层极弱的 fractalNoise：

<style>
.stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.078  0 0 0 0 0.078  0 0 0 0 0.074  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  z-index: 30;
}
</style>

看上去没区别，去掉就知道有了。

2. 角落品牌标识

<div class="corner-brand">
  <div class="mark"></div>
  <div>HUASHU · DESIGN</div>
</div>

.corner-brand {
  position: absolute; top: 48px; left: 72px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

只在作品墙 scene 显示，淡入淡出。像美术馆展签。

3. 品牌收束 wordmark

.brand-wordmark {
  font-family: var(--sans);
  font-size: 148px;
  font-weight: 700;
  letter-spacing: -0.045em;   /* 负字距是关键，让字紧凑成标志 */
}
.brand-wordmark .accent {
  color: var(--accent);
  font-weight: 500;           /* accent字符反而细一点，视觉差 */
}

letter-spacing: -0.045em 是苹果产品页大字的标准做法。

---

常见失败模式

症状	原因	解法
看起来像 PPT 模板	卡片没有 shadow / hairline	加上两层 box-shadow + 1px border
倾斜感廉价	只用了 rotateY 没加 rotateZ	加 ±2-3deg rotateZ 打破工整
Pan 感觉「卡顿」	用了 setTimeout 或 CSS keyframes 循环	用 rAF + sin/cos 连续函数
Focus 时字看不清	复用了 gallery 瓦片的低分图	独立 overlay + 原图 src 直连
背景太空	纯色 #F5F5F7	叠加 SVG fractalNoise 0.5 opacity
字体太"互联网"	只有 Inter	加 Serif（中英各一）+ mono 三栈

---

引用

• 完整实现样本：/Users/alchain/Documents/写作/01-公众号写作/项目/2026.04-huashu-design发布/配图/hero-animation-v5.html
• 原始灵感：claude.ai/design hero 视频
• 参考审美：Apple 产品页、Dribbble shot 集合页

遇到「多件高质量产出要陈列」的动画需求，直接从此文件 copy 骨架，换内容 + 调 timing 即可。