用途:为“Bakery Facilities”这类高端烘焙解决方案公司制作单页、滚动电影感的 B2B 落地页。技能自带完整渲染的参考实现 example.html,应先复制它,再替换文案与数据;如用户明确要求,可忠实移植到 React 技术栈,但不得重写 CSS 或另创视觉语言。
主要能力:Hero 为滚动驱动的全屏视频滑块,3 个堆叠 video 幻灯片,按 SCROLL_PER_SLIDE_VH=150 计算局部进度,用三次缓动后以 clip-path: ellipse() 做椭圆转场;标题与副标题用 GSAP SplitText 逐字入场。页面还包含固定导航栏(滚动后变黑)、右侧浮动导航、产品瀑布流画廊、滚动逐词揭示的 About 段落、合作伙伴跑马灯、Partnering With Us 卡片区与页脚。
技术栈与用法:默认输出单文件 example.html(原生 HTML/CSS/JS),仅远程引用 3 个 CloudFront 视频与 picsum.photos 图。若用户要求工程形式,则移植为 React 18 + Vite + TypeScript + Tailwind + GSAP(ScrollTrigger + SplitText)+ Lottie,禁用 Framer Motion。字体通过 Google Fonts 导入,颜色系统以 CSS 变量锁定,金色 #CB9D06 为唯一彩色强调色。
限制:命名颜色、字体、视频 URL、断点与动画参数均锁定;不得替换视频与图片主机;不得使用远程头像服务;所有动效必须用 GSAP 与 Lottie。具体收费、价格与平台信息暂未提供。