LO2S × SNP & DashDigital：设计充满动感与活力的网站

SNP和DashDigital团队分享了他们如何通过动效、交互性和性能优化，将LO2S网站打造成一个充满活力的数字体验。

项目背景

LO2S希望建立一个不仅能展示其服务，更能体现其快节奏、运动驱动理念的网站。他们希望用户在浏览网站时能感受到其工作的能量。对我们来说，这意味着要将全屏视频、流畅过渡和交互式动效作为核心构建块。挑战不仅在于视觉抛光，还在于确保这些元素在底层保持高性能和无缝体验。

我们基于相当标准的技术栈构建了该网站：Next.js（Page Router）、GSAP、Strapi、AWS、CloudFront，还有一个关键补充：OGL。

为什么选择OGL？

这是我们首次在生产环境中实施OGL。LO2S网站不需要复杂的3D资源，因此OGL是实现高性能交互视觉效果的自然选择，无需额外开销。

沉浸式着陆体验 全屏视频作为入口点，四格悬停导航展示特色项目。这种设置使用户能够直接深入了解作品，同时保持着陆页的视觉冲击力。

双重作品视图 作品页面提供两种浏览方式：

带模糊效果的无限3D画廊 我们使用transform3d和原生JS而非WebGL实现了无限画廊。这保持了构建的轻量性，同时支持背景模糊。模糊效果通常会引发性能警告，但经过精心优化，该效果在不同设备上保持稳定。

交互式Logo着色器 我们构建了一个自定义着色器（灵感来自Studio 27b），使Logo感觉与品牌精髓保持一致。悬停时，字符移动和混合，创造出类似于现场活动中光线图案的连接感。

技术精炼 我们最初的文本失真测试看起来有锯齿。我们通过自定义aastep函数解决了这个问题，用于程序化抗锯齿。它分析纹理梯度并平滑像素过渡，确保排版缩放清晰，即使在失真下也能保持锐利。

一些虽小但关键的细节塑造了整体体验：

快速内容交付是不可妥协的要求。我们通过两种方式解决：

CDN交付：媒体通过AWS CloudFront提供服务，Strapi配置为自动将资源推送到S3存储桶。 视频优化：我们为客户提供了bash ffmpeg脚本，用于批量优化视频文件，在质量和加载速度之间取得平衡。

每个构建项目都是完善我们流程和构建策略的机会。对于LO2S，我们最初依赖Strapi的Sharp集成进行图像裁剪，这带来了两个痛点：

项目结束后，我们测试了imgproxy并发现它更适合我们的需求：

对我们来说，这是前进的方向：更清晰、更快、更可靠的图像工作流程。