9 components · new drops weekly
Components that movewhen you scroll.
Scroll-driven, cinematic React components. Copy the code, download the project, or hand your AI agent a prompt that rebuilds it exactly.
Works with Claude Code · Cursor · Codex · v0 — or just paste the code.
Aperture Zoom
ScrollA framed image that opens to full-bleed as you scroll, parting the headline.
Dot Field
BackgroundsA living field of dots that parts around the cursor and breathes.
Ink Reveal
ScrollA paragraph that fills in word by word as you scroll through it.
Stack Scroll
ScrollCards that pin and pile into a deck as you scroll.
Tilt Card
CardsA card that tilts in real 3D, with glare and layers that float apart.
Horizontal Rail
ScrollScroll down, travel sideways: a pinned rail of panels with parallax.
Magnetic Button
ButtonsA button that pulls toward the cursor and floods with colour from where you enter.
Scramble Text
TextHeadlines that decode themselves out of flickering glyphs.
Velocity Marquee
TextA ticker that races, reverses and leans with your scroll.
Pro
Unlock all 9 components — and every one after.
- Copy the prompt, the source or the whole project
- Tune every prop in the playground first
- Commercial and client work included
Tune it. Then take it three ways.
Every component runs live on its page. Set it up the way you want, then copy what suits your workflow.
Tune it live
Every prop is a slider, switch or colour on the page. The usage snippet rewrites itself with your values.
› paste prompt writing 9 files npm install · react 19 ✓ running at localhost:5173
Copy the prompt
Paste it into Claude Code, Cursor, Codex or v0 in an empty folder. It rebuilds the exact project, file for file.
stack-scroll/ ├─ src/ │ ├─ StackScroll.tsx │ ├─ StackScroll.css │ └─ App.tsx └─ package.json
Or take the code
The component file and its CSS, plain React and prefixed classes — or the whole Vite project as a zip.
runtime dependencies besides React
of prompts rebuilt and byte-checked before release
every animation on requestAnimationFrame — no layout thrash
prefers-reduced-motion honoured by every component
One plan, every component.
All 9 components — prompt, source and project — plus everything added while you're a member.
The library, three months at a time. Cancel anytime.
Billed $79 every 3 months. Cancel anytime.
- Open up to 10 new components a week, from the whole library
- Re-open anything you've unlocked, any time
- Full React + TypeScript source for every component
- A one-shot rebuild prompt for Claude Code, Cursor, Codex or v0
- A ready-to-run Vite project for every component
- Commercial license — client work included
Every component, unlimited, plus every drop for a year.
Billed $139 yearly.
- Unlimited — every component, any week
- Full React + TypeScript source for every component
- A one-shot rebuild prompt for Claude Code, Cursor, Codex or v0
- A ready-to-run Vite project for every component
- Commercial license — client work included
- Every new drop the day it lands
Pay once. Every component, forever — including future drops.
One payment. No renewals, ever.
- Unlimited — every component, any week
- Full React + TypeScript source for every component
- A one-shot rebuild prompt for Claude Code, Cursor, Codex or v0
- A ready-to-run Vite project for every component
- Commercial license — client work included
- Every new drop the day it lands
Prices in USD. Payments and invoices by Dodo Payments (merchant of record) — cards, UPI and local methods. Upgrade anytime: your old plan is stopped automatically, so you're never billed twice. All sales are final — no refunds, so try any component live first. Refund policy.
Questions, answered
What do I actually get?+
For every component: a one-shot rebuild prompt for your AI agent, the full React + TypeScript source (the component file and its CSS), and a ready-to-run Vite project with the exact example from the page. Free components need only an account; the rest come with any plan.
How does the prompt work?+
Open an empty folder in Claude Code, Cursor, Codex, v0 or Bolt and paste the prompt. It contains the complete source of a small Vite project, file by file, with instructions to reproduce it exactly. Before any prompt goes live we rebuild the project from it and check every file byte for byte.
Do I need Tailwind, Framer Motion or anything else?+
No. Every component is plain React 19 and CSS with no other runtime dependency. Each one's CSS uses its own short class prefix, so it sits happily next to Tailwind or any design system. They work in Next.js (they're marked "use client"), Vite, Remix and Astro islands.
3 months, Yearly or Lifetime?+
3 months ($79, renews every 3 months) opens up to 10 new components a week — anything you've opened stays open. Yearly ($139) and Lifetime ($249, paid once) have no limit and include every component we add. Upgrade at any time: your old plan stops automatically, so you're never billed twice.
What can I use the components for?+
Anything you build — your own sites and apps, client work, commercial products, unlimited projects, no credit needed. What you can't do is resell or redistribute the source itself, as a kit, template pack or library of your own. The License page has the details.
Can I cancel?+
Any time, from your account page. Your plan stays on until the end of the period you've paid for, then stops. Nothing you've already copied or downloaded is taken back.
Can I get a refund?+
No — we don't offer refunds; all sales are final. The code is delivered the moment you pay and can't be returned, which is why every component can be tried in full on its page first. Billing errors are different: if you were charged twice or the wrong amount, write to support@snapblocks.site and we reverse it the same day.
I paid but the library didn't unlock.+
It normally unlocks within seconds. If it doesn't, the welcome page checks with the payment provider directly and unlocks it for you — and every payment is reconciled again daily. If you're still locked out, email support@snapblocks.site with the address you paid with.
Are they accessible?+
Every component keeps its content as real, readable markup and honours prefers-reduced-motion — scroll effects render in their finished state and pointer effects stand still. Each page lists exactly what it does for keyboard and screen-reader users.
One new component, most weeks.
The drop, a short note on how it was built, and nothing else. Unsubscribe in one click.