这套方案适合什么项目
- 运动鞋服新品、限量系列和品牌活动页
- 需要双章节叙事的产品发布
- 已有视频素材并希望加入互动遮罩的页面
SITES · 电商与消费
运动产品沉浸式滚动落地页提示词
高端运动产品页可以使用强动效，但动效必须帮助用户理解产品。这个方案把首屏情绪、产品细节和下一步行动拆成两个滚动章节，并用遮罩与时间线控制转场。它适合拥有高质量视频素材和明确主推产品的发布活动。
实现工具与技术边界
- React
- Tailwind CSS v4
- GSAP
- React Player
DESIGN DECISIONS
真正决定结果的设计取舍
- 01
滚动时间线只控制视觉过渡，不延迟关键信息
- 02
视频设置海报和静态后备
- 03
产品名称、价格或购买动作持续可达
- 04
移动端降低遮罩复杂度并缩短滚动距离
PUBLIC PROMPT EXCERPT
公开提示词片段
这段内容只公开核心方向，足够判断提示词是否具体。组件清单、细节参数、响应式规则与完整验收要求继续由会员权限保护。
Create a high-end interactive product landing page with two scrolling sections. Use GSAP for controlled transitions and React Player for media. Preserve the product name, details and action even when animation is disabled.完成后应该得到什么
预期结果是一页具有发布会质感的产品页面。视觉会推动故事前进，但不会让用户为了找到商品信息而完成冗长滚动。
生成后不要跳过这些检查
- 减少动效设置下直接显示最终状态
- 视频失败时海报清楚可见
- 购买动作不依赖悬停或精确拖动
RELATED ASSETS
相关构建方案
围绕同一任务继续比较，不必退回搜索起点。
