Scroll EffectHow to make a video play along with the scroll on your website
From a product photo to a 3D video that takes itself apart piece by piece as you scroll, and reassembles when you scroll back up. The full process: generating the assets with AI, preparing the file and wiring it into the page.
Accepted payment methods
Secure payment by card or PayPal. Instant download after checkout.
What's inside
- 01
The three complete prompts: image, video and coding agent
- 02
How to build the page without writing a single line of code
- 03
A complete minimal implementation that works copied as-is
- 04
The five silent failures that cost you days
Who it's for
For anyone who wants this effect on a product page. If you code, the implementation is explained line by line. If you don't, there's the procedure to have an agent build it for you and the way to check it did it right.
What it isn't
- It isn't a four-hour course. It's 25 pages with no filler.
- It doesn't include the project files: it includes the prompts, the commands and the code inside the document.
- And this can be done for free. The guide lists the no-cost alternative for every step, with its real limits. What you pay for is not losing the days I lost.
Format
- PDF file
- 25 pages
- Spanish
- Instant download
Secure payment
Card or PayPal, processed by Stripe and Payhip. Your details never touch this site.
Instant download
The file lands in your inbox and downloads right away — no waiting, no account needed.
From any country
Visa, Mastercard, Maestro, American Express, Discover and PayPal. VAT included in the price.
Frequently asked questions
What is the scroll effect?
It is the technique Apple uses in its launches: you scroll down the page and the product spins, opens or comes apart at the pace of your scroll, and scrolling back up puts it together again. It is called scroll-scrubbing or scroll-linked video. It looks like real-time 3D, but underneath there is an ordinary video and about forty lines of JavaScript.
Do I need to know how to code?
No. The guide explains how to ask a terminal coding agent, such as Claude Code or Codex CLI, to build it and how to check what it writes. If you code, you get the code explained and a minimal version that works by copying it as is.
Which tools does it use and what do they cost?
ChatGPT for the exploded product image, ElevenLabs to turn it into video, ffmpeg to prepare the file and a terminal agent to write the page. None of the paid tools is required: every step comes with a free alternative, such as Gemini or Grok for the image and Kling AI for the video, with their real limits.
Does it work on mobile and iPhone?
Yes. A whole part covers the finishing touches: iPhone, mobile, edges, server and accessibility. It also covers the video weight, how it affects loading speed and when not to use the effect.
Does it work for any product?
Yes. The example is a made-up controller brand, but the method works just as well for sneakers, a watch, a coffee machine, an engine or a building cross-section. All you need is one product photo.
Get it now
Instant download after checkout. No sign-up, no subscription.
Accepted payment methods