项目背景

LO2S委托SNP与DashDigital构建一个不仅能展示服务、更能体现其快节奏品牌精神的网站。团队将全屏视频、流畅过渡和交互动效作为核心构建模块，在保证视觉表现力的同时确保性能与流畅度。

技术与工具

• 技术栈：Next.js（Page Router）、GSAP、Strapi、AWS、CloudFront
• 关键选择：采用轻量级OGL替代three.js，在无需复杂3D模型支持的场景下实现高性能渲染控制

核心功能

沉浸式着陆体验

全屏视频作为入口，四网格悬停导航展示重点项目，用户可快速切入内容的同时保持视觉冲击力。

双模式作品浏览

• 列表视图：快速导航
• 动态卡片布局：项目以电影序列式动画进出屏幕，创造浏览节奏感

无限3D画廊与模糊效果

使用transform3d和原生JS实现无限画廊，通过精细化优化确保背景模糊效果跨设备稳定运行。

交互式Logo着色器

受Studio 27b启发的自定义着色器，悬停时字符产生光影混合效果，模拟现场活动的光线连接感。

技术优化

• 文字抗锯齿：通过自定义aastep函数分析纹理梯度，实现程序化抗锯齿
• 页面过渡：与Logo动画联动保持连续性
• 实时布局：动态内容模块支持实时布局适配

架构与性能

• CDN分发：通过AWS CloudFront交付媒体资源，Strapi自动推送资源至S3存储桶
• 视频优化：提供ffmpeg批处理脚本帮助客户平衡画质与加载速度

经验总结

项目初期使用Strapi的Sharp集成时发现：

• 4K原图上传易导致流程卡顿
• 自动生成的多尺寸图片存在冗余

后期测试imgproxy方案优势显著：

• 与CDN和缓存无缝协作
• 处理过程与应用解耦
• 支持按场景配置图像格式
• 基准测试显示620+请求/秒，延迟约12.8ms

这一方案为团队提供了更清洁、高效、可靠的图像处理工作流。