AI Can Build Pages Fast, but Scroll Animations Still Need These Off-the-Shelf Parts

Niko posted a Spanish tweet on X recommending three UI/UX resource sites. The wording was direct: if you’re a UI/UX designer, save these. The tweet also included a demo video.

Tweet link: https://x.com/nikosolenne/status/2121378167927480347

These three sites don’t solve the same problem. Scrolltide leans toward full sites and full pages, Snapblocks toward individual components, and Scrollshaders toward hero backgrounds. Taken together, they cover most common needs for “making a page move.”

Scrolltide: Breaking Scroll Websites into Copyable Prompts

When building 3D websites and scroll-driven pages, the annoying part is that assets are scattered. Templates, components, shaders, UI screens, and sections often have to be hunted down across different sites. Scrolltide’s approach is to bring them into one library and pair each template with a complete code prompt.

The numbers on the site are clear: 149 templates, 98 components, 55 shaders, 24 sections, and 14 UI screens. The tech stack covers React, Vite, Next.js, Tailwind, Framer Motion, GSAP, Three.js, WebGL, Shaders, and Lenis. The workflow is to copy a prompt, paste it into Claude, Cursor, or v0, and generate a page that runs.

On pricing, the site’s early access says $299 one-time. The tweet says “600+ prompts with full code,” which doesn’t match the numbers shown on the site. Before buying, it’s best to browse the library yourself, especially opening demos on your phone to check mobile behavior. Someone in the replies asked how well Scrolltide’s prompts cover mobile, and the tweet didn’t answer that.

Snapblocks: Just Add One Moving Component

Not every project needs a full-page rebuild. More often, the page is already built and just missing a button that reacts to scrolling, or a card with a nice feel when dragged. Snapblocks is aimed at exactly that scenario.

The site has 136 scroll-driven, cinematic React components. Categories include Scroll, 3D, Navigation, Text, Buttons, Cards, Backgrounds, Logos, Cursors, Loaders, and Controls. Each component page gives a complete rebuild prompt, with all files written out and versions pinned. Copy it into Claude Code, Cursor, Codex, or v0, and the agent will write the files and run the project.

It’s for people who already have a codebase. You don’t need to start from a template from scratch; you just need to drop a component into an existing layout. You can sign up for free on the site; see the Pricing page for specific pricing.

Scrollshaders: For Hero Backgrounds When You Don’t Want three.js

Many landing pages put their visual focus on the hero background. Live-action video is too heavy, and pure CSS gradients easily look templated. Scrollshaders offers WebGL shader backgrounds; the page claims 117 shaders across 11 shelves, including Mesh Gradients, Grain Gradients, Dither, Liquid Metal, Light & Rays, Fluted Glass, Halftone, Waves & Lines, 3D & Depth, Retro & ASCII, and Patterns & Grids.

Each shader comes with a React component, a plain HTML + JS snippet, seamless-loop MP4s at 1080p/720p/480p, and a 2560px PNG still. The code version doesn’t depend on three.js: a single WebGL2 fragment shader sits in one file, and it fills the parent container as long as the container has a height. The component pauses offscreen, pauses in background tabs, supports up to 2x pixel density on Retina, and shows a still frame for users who prefer reduced motion.

Pricing is $29 per month, $129 per year, or $239 lifetime. The license covers client websites, your own products, ads, demos, and social content; you cannot resell the shaders themselves as an asset pack.

Details to Check Before Buying

These three sites turn “motion parts” into products. AI writes pages faster and faster, but details like scroll pacing, shader texture, and component states still need ready-made references. What they save is time spent finding references and building scaffolding; they don’t make brand judgments for you.

Someone asked where these effects can be used. Portfolios, product landing pages, campaign pages, SaaS hero sections, and client pitches all work. Another commenter said they usually steal scroll ideas from sites they like and then rebuild them crudely. That’s exactly where this kind of library is valuable: it turns the rebuild process into executable prompts, so there’s less tuning by feel.

Bookmarking is fine, but pick one real page and try it first. Don’t buy all three at once and then only ever open the homepage.