3D首个作品集，使用 Antigravity 构建

Source: Dev.to

介绍

这是谷歌 AI 主办的 新年新你作品集挑战赛 的参赛作品。

我叫 Aayush Bisht，是一名专注于构建交互式、视觉丰富的 Web 体验的 MERN‑stack 开发者，致力于将扎实的工程实现与深思熟虑的设计相结合。我喜欢在前端性能、动画和系统架构的交叉点工作，因为微小的细节——如运动、时机和交互——可以彻底改变产品的感受。

在这个项目中，我希望超越传统作品集的形式，探索 Gemini 3 与 Google Antigravity 等现代工具如何在整个开发过程中支持创意和技术决策。与其仅仅使用 AI 生成代码，我更倾向于让它帮助思考结构、动画流程以及交互设计。

该作品集大量依赖滚动驱动的动画、3D 交互和视口感知的过渡。为获得最佳体验，请在完整的浏览器窗口中查看。

实时作品集：

---

技术栈

• Next.js 14（App Router）
• React 18 + TypeScript
• Tailwind CSS
• GSAP + ScrollTrigger
• Framer Motion
• Spline（3D 设计与运行时）
• Lenis（平滑滚动）
• Radix UI + 自定义 UI 组件
• 部署于 Google Cloud Run

Gemini 3 的角色

Gemini 3 在整个开发过程中被使用——不是用来生成最终代码，而是帮助推理复杂系统。主要贡献包括：

• 探索将滚动位置映射到 3D 变换的方法。
• 推理单个 3D 对象如何能够表示多个作品集章节。
• 评估动画节奏以及章节之间的过渡。
• 思考 React 状态、GSAP 时间线与 Spline 对象之间的交互模式。
• 在实现之前对想法进行压力测试。

许多架构决策——尤其是动画序列和基于状态的变换——都是通过与 Gemini 的迭代对话不断完善的。

反重力的作用

反重力加速了 Gemini 启发的想法的实现：

• 重构大型动画编排器。
• 在不破坏现有行为的情况下迭代滚动触发逻辑。
• 在众多交互组件之间保持一致性。
• 安全地尝试替代动画流程。

这使得项目能够有机演进而不失结构。

键盘隐喻

在作品集的核心是一把 Spline 设计的机械键盘，用作动态视觉隐喻。键盘随着用户滚动会经历多个状态的转换：

每个键帽映射到真实的技能，并响应悬停和按压事件，在 3D 场景中实时更新文字。所有转换均通过 GSAP 时间线编排，直接绑定到滚动位置。

模型优先方法

与其把 3D 模型仅视作背景视觉，不如围绕它设计整个网站。布局、章节流、滚动行为以及交互都被塑造以支持键盘随时间的转换和响应。

Gemini 帮助解答了以下问题：

• 单个 3D 对象如何代表作品集的多个章节？
• 在技能、项目和联系之间切换时，哪些转换感觉自然？
• 空间变化（缩放、旋转、位置）应如何映射到滚动进度？
• 交互应位于何处——UI、3D 场景，还是两者兼有？

这些讨论定义了一个系统，使每个章节对应一个独特的键盘状态，拥有各自的转换逻辑和交互规则。

工具分配

• GSAP – 负责滚动驱动动画的精确编排。
• Framer Motion – 管理 UI 级别的交互（例如按钮悬停、模态窗口过渡）。
• Spline – 提供空间深度和交互式 3D 元素。

每个工具都在其擅长的领域使用，形成统一的体验，界面中看不出任何“AI 功能”。然而，AI 几乎影响了所有决策：动画流程、交互感受以及整体复杂度的管理。

结论

该项目展示了 Gemini 3 和 Antigravity 等 AI 工具可以提升创造力，而非取代它。通过使用 AI 来推理建筑和动画挑战，最终的作品集显得有目的性、连贯且技术上坚实——将 3D 模型从装饰元素转变为体验的结构支柱。