革新集体：用AI、GSAP与CSS黑科技打造极致视觉体验的新网站

设计理念

我们的旧网站已无法满足需求——导航复杂、结构过深、视觉风格与提案内容脱节。重新设计时我们回归本质：简洁布局、宽间距、极简结构，旨在创造开放、自信且流畅的体验。动画被刻意精简，以性能和清晰度优先。

作品展示策略

传统案例研究充满摘要和时间线，但用户实际行为是滚动、略读、快速决策。因此我们删除所有冗余内容：无介绍文案、无策略分析、无“经验总结”，仅保留干净视觉、简洁标题和无摩擦浏览。让作品自己说话。

导航设计

全局菜单采用结构式设计：整个布局向下推移为菜单腾出空间，而非浮动或淡入层。这是一个空间性而非纯视觉的手势。全宽面板从顶部精准滑入，无模糊、无视差，只有锐利对比和粗体排版，包含三个主要路径：我们的作品、关于我们、革新新星。

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

Webby奖项区域

• 使用v0 AI原型生成波浪线背景，通过“更粘稠”等模糊指令快速获得React Three Fiber代码
• AI擅长初步风格探索，但难以处理具体视觉bug和过度重构问题
• 最终手动修复多个v0无法处理的缺陷

鼠标跟随视频

• 视频跟随光标移动，在文本后方时触发颜色反转效果
• 放弃混合模式和背景滤镜方案，拆分为两个同步div：
  • <Inverter>：无内容幽灵div，仅承载backdrop-filter: invert(1)
  • <Video>：实际视频元素，使用z-index: -1置于文本下方
• 使用GSAP的quickTo实现双元素同步动画：

1
2

const moveX = gsap.quickTo([videoRef.current, inverter.current], "x", { /* ... */ });
const moveY = gsap.quickTo([videoRef.current, inverter.current], "y", { /* ... */ });

样式采用restyle.dev运行时CSS库（无需打包配置）

Nova方块区域

• 纯CSS 3D变换实现滚动驱动动画（无需WebGL/Three.js）
• 容器设置perspective，方块使用transform-style: preserve-3d
• 仅动画父级变换以优化性能

Safari渲染故障修复

• 出现z-fighting问题：随机渲染被遮挡面
• 解决方案：
  1. 手动剔除：根据网格象限仅渲染可见面
  2. 强制堆叠：基于行列分配特定z-index

1
2
3
4
5
6
7
8
9

// 根据位置分配z-index
const style = 
  vertical === "top" && horizontal === "left"
    ? { zIndex: -row - column }
    : vertical === "bottom" && horizontal === "right"
      ? { zIndex: -1 }
      : horizontal === "left"
        ? { zIndex: -column }
        : { zIndex: -row };

Firefox定位问题

• CSS Subgrid中position: sticky完全失效
• 解决方案：从粘性元素父级移除subgrid，直接应用网格样式
• 已通过CodePen最小案例复现并提交浏览器bug报告

结语

遇到怪异bug是开发现实的一部分，建议为时间线预留缓冲。发现边缘案例时，创建最小测试案例并报告bug，既能精准定位问题，也能推动Web生态进步。

准备好与我们合作了吗？我们始终寻找优秀公司和个人共同开发新项目。开始合作 →