革新集体：新网站，为视觉而设计

革新集体（Reform Collective）的新网站摒弃冗余，专注于清晰度、性能和结构——技术负责人详细介绍了如何利用AI、GSAP和CSS技巧将其变为现实。

设计理念

我们之前的网站已不再适用。它无法反映我们正在做的工作类型，更重要的是，它造成了使用障碍。导航复杂，结构过深，视觉风格与我们在提案或对话中向客户展示的内容不一致。

重新设计是一次重置。我们将网站精简到 essentials：简洁的布局、宽间距、极简结构。目标是创造一种开放、自信且易于浏览的体验。

我们还有意识地减少了动画使用。虽然仍然使用动效来支持交互，但我们不希望它主导体验。性能和清晰度是首要考虑。

作品展示方式的变革

我们做出的最深思熟虑的改变之一是如何展示我们的作品。传统的案例研究充斥着摘要、时间线和流程描述。我们意识到人们不再以这种方式消费作品集内容。

所以我们停止为阅读而写作，开始为被看见而设计。

我们删除了所有冗余内容：没有介绍文案，没有策略分解，没有"这是我们学到的"。只有干净的视觉效果、简洁的项目标题和无摩擦的浏览。如果作品不能自我表达，那它可能不够强大，不值得展示。

导航设计

我们设计了全局菜单，使其具有结构感。它不是浮动在网站上或作为图层淡入，而是将整个布局向下推，物理移动页面以腾出空间。这是一个刻意的姿态：空间的，而不仅仅是视觉的。

运动干净且具有建筑感：一个全宽面板从顶部滑下，精确地卡入位置。没有模糊，没有视差，没有视觉冗余。只有鲜明的对比、大胆的排版和三个主要路径：我们的作品、关于我们和革新新星。

技术细节（来自我们的首席工程师）

Webby奖章节

我从v0的AI原型开始制作波浪线背景。v0在解释模糊指令方面出奇地好。我最终得到了一个相当时髦的原型。因为它使用了react-three-fiber，我基本上可以直接复制粘贴到我们的代码中，安装依赖项，就完成了80%！

鼠标跟随器

我想要一个跟随光标的视频，出现在波浪背景上但在标题文本下方。当它经过文本后面时，文本颜色反转以保持可见。

“跟随鼠标"部分很容易！反转效果有点棘手。我的第一个想法是使用mix-blend-mode配合backdrop-filter。这似乎是个好主意，应该完美工作——或者至少，如果它真的有效的话我会这么说。

突破发生在我停止尝试让一个元素做所有事情时。我将效果分成两个完美同步的div：

• <Inverter>：一个没有内容的幽灵div。它唯一的任务是携带backdrop-filter: invert(1)来翻转文本颜色
• <Video>：包含实际视频。使用z-index: -1放置在较低的堆叠上下文中

我使用GSAP的quickTo来同步动画它们。对用户（就是你）来说，它显示为单个元素。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 同时动画两个引用，使它们显示为一个元素
const moveX = gsap.quickTo([videoRef.current, inverter.current], "x", { /* ... */ });
const moveY = gsap.quickTo([videoRef.current, inverter.current], "y", { /* ... */ });

// 在JSX中
<Wrapper>
    {/* 这里还有其他内容 */}
    <Video ref={videoRef} {...video?.data} />
    <Inverter ref={inverter} />
</Wrapper>

Nova方块章节

这个功能是一个滚动驱动的动画，其中3D方块网格从摄像机前缩放经过。有趣的是，这一切都是用纯CSS变换完成的——不需要WebGL或threejs。

设置涉及一个具有perspective的容器和一堆"block” div，每个都使用transform-style: preserve-3d。每个块包含几个子div，旋转到位形成立方体。

当然，这样做直接把我带入了浏览器bug的奇怪世界。

1. Safari的渲染故障

Safari疯狂地进行z-fighting。它会随机渲染应该被相邻立方体遮挡的面，看起来很糟糕。

修复最终是双重的：

• 手动剔除：作为优化，我已经只渲染基于立方体网格象限可见的面
• 强制堆叠：我根据每个立方体的行和列分配特定的z-index

2. Firefox的固定定位问题

我们的网站使用CSS子网格进行全局对齐。在Firefox中，position: sticky在子网格容器内完全失效。

在隔离问题并报告bug后，修复方法很简单：从粘性元素的父元素中移除subgrid，并直接应用网格样式。

遇到奇怪的bug令人沮丧，但当你构建很酷的东西时，这是交易的一部分。你只需要在时间表中为此做好计划。