AI写页面很快，滚动动画还得靠这些现成零件

Niko 在 X 上发了一条西班牙语推文，推荐三个 UI/UX 资源站。原话很直接：如果你是 UI/UX 设计师，把这几个存下来。推文里还带了一段演示视频。

推文链接：https://x.com/nikosolenne/status/2121378167927480347

这三个站解决的不是同一件事。Scrolltide 偏整站和整页，Snapblocks 偏单个组件，Scrollshaders 偏 hero 背景。放在一起看，基本覆盖了“让页面动起来”的常见需求。

Scrolltide：把滚动网站拆成可复制的提示词

做 3D 网站和滚动驱动页面，麻烦的地方在于素材分散。模板、组件、shader、UI 屏、section 经常要在不同站里找。Scrolltide 的思路是把它们收进一个库，然后给每条模板配完整代码提示词。

站内数字写得很清楚：149 个模板、98 个组件、55 个 shader、24 个 section、14 个 UI 屏。技术栈覆盖 React、Vite、Next.js、Tailwind、Framer Motion、GSAP、Three.js、WebGL、Shaders、Lenis。用法是复制一条提示词，粘进 Claude、Cursor 或 v0，生成一个能跑的页面。

价格方面，站内早期访问写的是 299 美元一次性买断。推文说“600+ prompts with full code”，站内展示的数字对不上。购买前最好自己翻一遍库，尤其是用手机打开 demo 看移动端表现。有网友在回复里问 Scrolltide 的提示词对移动端覆盖如何，推文没有回答这个问题。

Snapblocks：只补一个会动的组件

不是每个项目都需要重做整页。更多时候，页面已经搭好，只缺一个会跟滚动反应的按钮，或者一张拖拽时有质感的卡片。Snapblocks 就是冲这个场景去的。

站内有 136 个滚动驱动、带电影感的 React 组件。分类包括 Scroll、3D、Navigation、Text、Buttons、Cards、Backgrounds、Logos、Cursors、Loaders、Controls。每个组件页面给一条完整重建提示词，文件写全，版本固定。复制后粘进 Claude Code、Cursor、Codex 或 v0，agent 会写文件并跑起项目。

它适合已有代码库的人。你不需要从零起一个模板，只需要把某个组件塞进现有布局。站内可以免费注册，具体价格看 Pricing 页。

Scrollshaders：hero 背景不想上 three.js 就用它

很多落地页的视觉重点在首屏背景。实拍视频太重，纯 CSS 渐变又容易像模板。Scrollshaders 提供的是 WebGL shader 背景，页面标称 117 个 shader，分 11 个 shelf，包括 Mesh Gradients、Grain Gradients、Dither、Liquid Metal、Light & Rays、Fluted Glass、Halftone、Waves & Lines、3D & Depth、Retro & ASCII、Patterns & Grids。

每个 shader 给 React 组件、纯 HTML 加 JS 片段、1080p/720p/480p 无缝循环 MP4，以及 2560px PNG still。代码版不依赖 three.js，一个 WebGL2 fragment shader 放在一个文件里，父容器给高度就能填满。组件会离屏暂停、后台标签页暂停、Retina 最高 2 倍像素密度，对减少动态效果的用户显示静帧。

定价是月付 29 美元、年付 129 美元、终身 239 美元。许可覆盖客户网站、自有产品、广告、演示、社交内容，不能把 shader 本身当素材包转售。

购买前该看的细节

这三个站把“动效零件”做成了商品。AI 写页面越来越快，但滚动节奏、shader 质感、组件状态这些细节，仍然需要现成参考。它们省的是找参考和搭脚手架的时间，不负责替你做品牌判断。

有网友问这些效果能用在哪。作品集、产品落地页、活动页、SaaS 首屏、客户提案都能用。也有网友说自己平时会从喜欢的网站偷滚动创意，然后重建得很糙。这类库的价值就在这里：把重建过程写成可执行的提示词，少一点靠感觉硬调。

收藏可以，先挑一个真实页面试。别一次买三个，最后只打开过首页。