LO2S × SNP & DashDigital：设计充满动感与能量的网站
SNP和DashDigital团队分享了他们如何通过动效、交互性和性能优化将LO2S网站打造成生动体验。
项目背景
LO2S希望打造一个不仅能展示服务，更能体现其快节奏、运动驱动理念的网站。他们希望用户在浏览时能感受到工作的能量。对我们而言，这意味着要将全屏视频、流畅过渡和交互式动效作为核心构建模块。挑战不仅在于视觉抛光，还要确保这些元素在底层保持高性能和无缝体验。
技术与工具
我们基于相当标准的技术栈构建网站——Next.js（Page Router）、GSAP、Strapi、AWS、CloudFront，并增加了一个关键工具：OGL。
为什么选择OGL？
- 与three.js相比更轻量
- 提供最大渲染控制权
- 在不需要复杂模型支持（GLTF/OBJ/FBX）时是理想选择
这是我们首次在生产环境中实施OGL。LO2S网站不需要复杂的3D资源，因此OGL是实现高性能交互视觉效果的自然选择，无需额外开销。
关键功能
沉浸式着陆体验
全屏视频作为入口点，四网格悬停导航展示特色项目。这种设置让用户可以直接深入了解作品，同时保持着陆页的视觉冲击力。
双重作品视图
作品页面提供两种浏览方式：
- 列表视图用于快速导航
- 动态卡片布局，项目动画前进和离开屏幕。这创造了比典型索引页面更接近电影序列的浏览节奏。
带模糊效果的无限3D画廊
我们使用transform3d和原生JS而非WebGL实现了无限画廊。这保持了构建的轻量，同时支持背景模糊。模糊效果通常会引发性能警告，但经过精心优化，该效果在不同设备上保持稳定。
交互式Logo着色器
我们构建了自定义着色器（灵感来自Studio 27b），使Logo感觉与品牌精髓保持一致。悬停时，字符移动和混合，创造出类似于现场活动光模式的连接感。
技术优化
我们最初的文本扭曲测试看起来有锯齿。通过自定义aastep函数进行程序化抗锯齿解决了这个问题。它分析纹理梯度并平滑像素过渡，确保排版缩放清晰，即使在扭曲下也能保持锐利。
视觉与交互元素
一些较小但关键的细节塑造了体验：
- 与Logo关联的页面过渡以实现连续性
- 应用于文本的扭曲着色器以实现响应式动效
- 实时适应布局的动态内容模块
- 从首次加载就设定基调的动画预加载器
架构与结构
快速内容交付是不可妥协的要求。我们通过两种方式解决：
CDN交付：媒体通过AWS CloudFront提供服务，Strapi配置为自动将资源推送到S3存储桶。
视频优化：我们为客户提供bash ffmpeg脚本，用于批量优化视频文件，在质量和加载速度之间取得平衡。
反思与学习
每次构建都是完善流程和构建策略的机会。对于LO2S，我们最初依赖Strapi的Sharp集成进行图像裁剪，这带来了两个痛点：
- 上传原始4K图像会减慢流程并偶尔失败
- Sharp自动生成多个图像尺寸，其中许多是不必要的
项目结束后，我们测试了imgproxy并发现它更适合我们的需求：
- 与CDN和缓存无缝协作
- 将处理与主应用隔离
- 允许根据用例配置图像格式
- 在基准测试中提供620+请求/秒，延迟约12.8毫秒
对我们来说，这是前进的方向——更清晰、更快、更可靠的图像工作流程。