跳到主要内容
Scrolltide

Scrolltide:滚动驱动的电影感网页模板与设计提示词库

网页设计提示词滚动动画前端模板

收录滚动驱动网页模板、组件与着色器的提示词库。复制一段提示词粘贴进 AI,就能生成真正会动的网站,而不是一眼看出是 AI 做的页面。

★ 9 最近更新: 2026-11-08 scrolltide.co
访问网站

详细介绍

Scrolltide 是什么

Scrolltide 是一个面向 AI 建站工作流的素材库,核心不是给你一堆 Figma 文件,而是给你一段可以直接喂给 AI 的提示词。复制提示词,粘贴到 Claude、Cursor 或其他编码 AI 里,输出的就是带滚动驱动动效的完整页面。

官方定位很直白:让你的网站看起来不像 AI 做的。这个痛点确实存在——大部分 AI 生成的落地页都是同样的居中大标题加三张卡片,Scrolltide 想解决的就是这个。

库里有什么

站点目前分成三块内容:

  • 页面模板:143 套,覆盖 Hero Section、完整落地页、作品集、电商、3D 网站背景等场景,大部分标注为 Premium。
  • 组件:85 个,可以单独取用塞进已有项目,比如玻璃态标签页、变形导航栏、卡片手风琴、粒子地球、发光圆环按钮。
  • 着色器:55 个 GPU 动画背景,渐变、极光、液态金属、火焰等风格,交付形式包括 MP4、静帧和可嵌入组件。

每一条都有实时预览,可以先看动效再决定要不要。

技术栈与交付方式

模板基于 React、Vite、Next.js、Tailwind CSS,动效层用 Framer Motion、GSAP 和 Lenis 做平滑滚动,3D 与背景部分用 Three.js、WebGL 和自定义 Shader。买断后拿到的是可读的源码,不是压缩过的黑盒。

适合谁

适合独立开发者、设计工程师和接私活的团队——尤其是需要快速做出"有质感"的营销页但又不想从零调动画的人。如果你只写静态页面,或者项目对性能预算卡得很死,需要自己评估这些滚动动效的代价。