前端技术实现

书法字体动画

Emeritus字体是一种受传统Blackletter和Fraktur设计启发的黑体字型。其书法形态为微妙而富有表现力的动画概念奠定了基础。我们首先将每个字母解构为核心形状，仔细剥离终端以创建干净、可动画化的形态。

接着，每个形状都通过微妙的旋转和缩放进行单独动画处理。使用GSAP的drawSVG功能，我们为与字母终端路径相连的遮罩路径设置动画，以有机的方式展现它们。其结果是标题和页脚文本呈现出既有趣又优雅的动画效果，为首页和关于页面增添了动态节奏，同时与周围的WebGL元素相得益彰。

1
2

<path class="shape" d="M60.53 322.049H61.74H61.7L118.48 261.769V119.439H117.31L66.37 173.489V258.269C66.37 286.269 66.37 315.439 60.54 322.049H60.53Z" fill="currentcolor"/>
<path class="shape" d="M243.31 350.969C243.31 259.199 191.69 237.099 127.53 237.099V236.319C147.6 234.429 177.64 214.459 189.61 204.439H192.23C243.56 204.989 287.36 251.419 287.36 304.379L243.31 350.969Z" fill="currentcolor"/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/**
 * 书法动画
 */

calligraphyTl
  // 显示形状
  .fromTo(shape, {
    scale: 0,
    rotate: -20,
    transformOrigin: 'center',
  }, {
    scale: 1,
    rotate: 0,
    ease: 'expo.out',
  })
  // 绘制遮罩线条
  .fromTo(mask, {
    drawSVG: '0% 0%',
  }, {
    duration: 4,
    drawSVG: '0% 100%',
    ease: 'none',
  }, '-=2')
  // 隐藏形状
  .to(shape, {
    scale: 0,
    rotate: 20,
    ease: 'expo.in',
  });

剪辑路径动画

菱形图案在网站中创建了统一的视觉线索。您会在对角线切割、页面过渡、按钮和微妙的交互细节中看到它们。通过SVG剪辑路径实现，这些几何形式提供了一种简单而有效的方式来分层内容并将整个设计联系在一起。

基于滚动的时序动画

其余页面使用GSAP时间线动画实现，与ScrollTrigger紧密配合，实现流畅的滚动同步播放。SplitText动画添加了动态的排版运动，而粘性元素和微妙的视差（鼠标）效果则引入了深度和层次感。

WebGL技术

设置与系统

每个WebGL场景都在一个单一的画布上运行，我们使用观察器将其在各个部分之间移动。这种方法不是为每个场景创建新的渲染器，而是保持轻量级和无缝体验。

技术栈很直接：Three.js作为核心，pmndrs/postprocessing用于后期处理，n8ao用于环境光遮蔽通道。

此外，使用detect-gpu根据用户设备调整渲染，从而在低性能设备上保持流畅体验，同时在高性能机器上呈现更佳效果。

渲染与视觉方向

这次我没有编写任何自定义着色器😄。所有内容都使用Three.js出色的物理材质。挑战在于尽可能接近3D设计师提供的Octane渲染参考，然后我尝试直接在WebGL中尽可能接近地复现。

这里没有烘焙——整个想法是保持实时和动态，以便我们可以随时调整灯光。我们使用场景中的灯光来塑造氛围，然后添加环境贴图以带来那些通常只有在静态渲染中才能期望的真实反射和柔和照明。这样一切都保持灵活，我们可以实时调整，而不是被烘焙纹理锁定。

协作与迭代

由于每个场景都需要自己的氛围，我们使用Tweakpane GUI，让设计团队可以实时调整。所有内容都是可调整的，颜色、灯光、材质、变换等。由于配置可以导出和导入，我们可以在不接触代码的情况下来回传递预设。这变成了一个非常好的工作流程：更快的迭代，更多的创意控制，无需来回沟通。

后端架构

前端后端（BFF）

我们使用Vue/Nuxt构建了强大的基础，并创建了一个前端后端API层，简化了前端应用内的数据使用。BFF API层充当外部服务和前端之间的中介，在数据到达客户端组件之前进行聚合和规范化。这种方法减少了UI的复杂性，最小化了冗余请求，并确保了跨不同页面的更一致的数据流，最终实现了更流畅的用户体验和更清晰、更可扩展的代码库。

内容管理

对于内容管理，我们实施了Storyblok，这是一个无头CMS，使非技术团队成员能够管理和更新内容，而无需接触代码库。Storyblok的可视化编辑器和基于组件的结构与我们的Vue/Nuxt设置完美配合，实现了动态内容交付和快速迭代，同时保持了开发和内容操作之间的清晰分离。

托管部署

我们在Vercel上托管了网站，利用其与现代前端框架的无缝集成及其快速的全球CDN来高效交付资源。这种托管选择允许自动化部署、预览环境和即时回滚，从而简化了我们的发布流程并提高了可靠性。

团队协作

这个项目从第一天起就是真正的协作，即使在我们交谈时也是如此。我总是希望每个人都能在项目中发挥自己的特长并享受其中的乐趣。我很喜欢每个人都能提出想法，看到他们施展魔法真是太棒了。当然，由于每个人都非常忙于客户工作，我们遇到了一些挑战，但我们找到了实现目标的方法。我非常感谢这个优秀团队中的每一个人，帮助我将作品集变为现实。