Atomic
一个面向 SaaS 分析产品的动效驱动营销网站，在您滚动时将页面的故事娓娓道来。
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
概览
Atomic 是一款 SaaS 分析产品的落地页，围绕一个承诺而构建：您始终了解企业中正在发生的事情。该页面有一项艰巨的任务。它必须在一次滚动中说服访客，让他们觉得该产品很有现代感且值得注册。我将其构建为一个单页体验，在您向下移动时，每个部分都会以动画形式就位，整个页面以社交证明结束。
问题
落地页在最初几秒钟内就会受到评判。大多数营销模板感觉都是静态且可互换的，一旦团队寻求“高级”动画，滚动就会变得卡顿，加载时间也会膨胀。简报的要求是击中大多数网站错失的痛点：动效要有真正的电影感，同时又不会与访客发生冲突或掩盖信息。
我的角色与方法
我端到端地负责了这个项目：布局、视觉设计、文案结构和动画。我没有在页面上散布特效，而是将整个滚动视为单一的精心编排序列，并构建每个部分以在正确的时刻展示自身。我一直坚持的原则是，动效必须为宣传服务。它应该首先将视线吸引到标题，然后是产品，最后是证明，而不是为了装饰而装饰。
技术栈
主要功能
图集
挑战与解决方案
文本动画的时机是最棘手的部分。SplitText 会测量标题并将其拆分成多行，但如果在 Web 字体加载完成之前运行，布局就会移动并且拆分会中断。我将每个文本动画都控制在 document.fonts.ready 之后，因此拆分只有在真正的字体就位后才会发生。这消除了闪烁和重排。
协调三个动画系统是另一大挑战。GSAP 的平滑滚动引擎、Framer Motion 的进度条以及 Locomotive 都试图掌控滚动位置。我将 GSAP ScrollSmoother 设为唯一可信数据源，并在其输出值之上分层构建其余动画，从而保持各部分完全同步。在触屏设备上，我特意调低了平滑滚动的强度，以确保手机端操作灵敏流畅，避免出现卡顿感。
成果
最终呈现出一个高加载性能且具备生产级滚动编排效果的着陆页——这种动效许多营销网站都在尝试，但极少能处理得干净利落。它既是一个实用的产品页面，也是一个无需牺牲性能的高级前端动效参考范例。