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实现了无限画廊。这保持了构建的轻量性，同时支持背景模糊。模糊效果通常会引发性能警告，但经过精心优化，该效果在各种设备上保持稳定。
交互式标志着色器 我们构建了自定义着色器（灵感来自Studio 27b），使标志与品牌精髓保持一致。悬停时，字符移动和混合，创造出类似于现场活动中光模式的连接感。
技术精炼 我们最初的文本扭曲测试看起来有锯齿。我们通过自定义aastep函数实现程序化抗锯齿来解决这个问题。它分析纹理梯度并平滑像素过渡，确保排版在扭曲下也能清晰缩放并保持锐利。
视觉与交互元素
塑造体验的一些小而关键的部分：
- 与标志相连的页面过渡以实现连续性
- 应用于文本的扭曲着色器以实现响应式运动
- 实时适应布局的动态内容模块
- 从首次加载就设定基调的动画预加载器
架构与结构
快速内容交付是不可妥协的要求。我们通过两种方式解决：
CDN交付：媒体通过AWS CloudFront提供，Strapi配置为自动将资源推送到S3存储桶。
视频优化：我们为客户提供bash ffmpeg脚本，用于批量优化视频文件，在质量与加载速度之间取得平衡。
反思与学习
每次构建都是完善流程和构建策略的机会。对于LO2S，我们最初依赖Strapi的Sharp集成进行图像裁剪，这带来了两个痛点：
- 上传原始4K图像会减慢流程并偶尔失败
- Sharp自动生成多个图像尺寸，其中许多是不必要的
项目结束后，我们测试了imgproxy并发现它更适合我们的需求：
- 与CDN和缓存无缝协作
- 将处理与主应用隔离
- 允许根据用例配置图像格式
- 在基准测试中提供620+请求/秒和约12.8毫秒的延迟
对我们来说，这是前进的方向：更清晰、更快、更可靠的图像工作流程。