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

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

项目背景

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

网站基于标准技术栈构建：Next.js（Page Router）、GSAP、Strapi、AWS、CloudFront，并额外采用OGL。

这是团队首次在生产环境中使用OGL。LO2S网站不需要复杂3D资产，因此OGL成为实现高性能交互视觉的自然选择。

全屏视频作为入口点，四网格悬停导航展示特色项目。这种设置让用户直接深入作品，同时保持落地页的视觉冲击力。

工作页面提供两种浏览方式：

使用transform3d和原生JS而非WebGL实现无限画廊，保持轻量级构建的同时支持背景模糊。通过精细优化确保模糊效果在各设备上稳定运行。

基于Studio 27b灵感开发自定义着色器，使Logo与品牌本质对齐。悬停时字符移动混合，创造类似现场活动光模式的连接感。

初始文本扭曲测试显示锯齿问题，通过自定义aastep函数实现程序化抗锯齿。该函数分析纹理梯度并平滑像素过渡，确保字体缩放清晰且扭曲后仍保持锐利。

塑造体验的关键细节：

快速内容交付是不可妥协的要求，通过两种方式实现：

每个项目都是优化流程的机会。LO2S项目中最初使用Strapi的Sharp集成进行图像裁剪，但发现两个痛点：

项目后测试imgproxy发现更符合需求：

这为团队指明了更清洁、快速、可靠的图像工作流方向。