Build a scroll animation for your site with an AI agent
The hero pins and the page tells a story as the visitor scrolls: a route map that draws itself station by station, your photo turned into a particle portrait, your own film that plays forwards and back with the scroll, or a 3D product that turns to each spec. Each ships as a page, a paste-in embed and a video of the same scripted scroll.
Free skills to start. Pro is $99 a year for every skill, or $19 a month for 10. See pricing
Skills that make a scroll animation
4 skills
Scroll Route Hero
Motion Heroes · One HTML page + embed · MP4 + poster
An animated website hero with a travel-poster map beside the headline. As the visitor scrolls, the hero pins and the route draws itself station by station. Lamps pop on, names light up, a ticket stub shows where the journey is now and its counters run up. You give it your stations, colors, fonts, logo and words. It builds one self-contained page plus a paste-in embed and checks it at four widths. It also records a smooth 1080p video of the same scroll story for launch posts.
How it works
How to make a scroll animation with a skill
- Step 1
Install a scroll skill
Copy the install prompt from a skill page and paste it into your agent. The first time, your agent opens a browser tab so you can approve it.
curl -fsSL https://lookbk.dev/cli.js | node - add scroll-route-hero - Step 2
Bring the one thing it animates
The route hero takes three to nine stations, the film hero a short clip, the portrait hero a photo or logo and the turntable hero a 3D model or one of its built-in shapes. Add your colors, fonts, headline and buttons.
Make a Scroll Route hero for Nocturne, our night train from Lisbon to Tallinn: eight stops with their times, 3,480 km and 59 hours on the ticket stub, cream, deep teal and mustard, and a 'Choose a cabin' button. Record a video for the launch post. - Step 3
Scroll it, then paste it in
Your agent checks the hero at four widths for overflow and contrast, and records a video of a scripted scroll in headless Chrome. Ask for changes, then paste the embed into your site.
One HTML page + embed · MP4 + poster
About
About these skills
Compare with asking your AI directlyWhy use a skill for a scroll animation instead of a plain prompt?
| What you compare | Asking your AI directly | Using a Lookbk skill |
|---|---|---|
| Pinning | Scroll listeners that jitter or lose their place on a phone | The hero pins while the story plays, and the skill checks it at four widths for overflow and contrast |
| Your material | A stock animation with your name pasted on | It animates your own stations, clip, photo or 3D model, in your colors, fonts and words |
| When it fails | A blank space where the animation should be | A still picture shows for reduced motion and when scripts, WebGL or the network fail |
| A video of it | Screen-record it by hand and hope the scroll is smooth | A recorder replays a scripted scroll frame by frame, so the video is the same on any machine |
PlansFree skills stay free. Pro is $19 a month, or $99 a year.
Pro monthly
$19/month
10 Pro skills a month. Billed monthly.
Pro yearly
Best value$99/year
About $8.25 a month.
Founding Lifetime
Founding offer$199once
First 100 seats at $199, then $299.
Prices are in US dollars. Sales tax or VAT is added at checkout where it applies.
Just need one skill? A single Pro skill is $6.90. Every purchase comes with a 7-day works-or-refund promise. Compare all plans
FAQ
Scroll animation skills: FAQ
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesWhat these skills don’t do
- Draw a real geographic map or track a live route. The route hero draws a stylised map of three to nine stations.
- Run the route or portrait hero inside a scrolling panel or an iframe. There you set them to follow a clock instead of the scroll.
- Load in under a second on mobile data when it scrubs a film. Scroll Film Hero plays a sequence of stills, a few megabytes in all.
How do I add a scroll animation to my site with an AI agent?
Install one of the four skills, tell your agent what the hero is for and give it the material: stations, a clip, a photo or a model. It writes a self-contained page and a paste-in embed in your colors and words, and checks them at four widths.
What is the difference between these four heroes?
Each scrolls a different thing. Scroll Route Hero draws a route on a stylised map. Scroll Film Hero scrubs a short clip of yours. Particle Portrait Hero turns a photo or logo into a point cloud. Product Turntable Hero turns a 3D product and stops at each spec.
Does the animation work without scrolling or without JavaScript?
Each hero shows a still picture for visitors who ask for reduced motion and when the scripts fail. The 3D ones also fall back to a still when WebGL or the network fails.
Can I use it on a page I already have?
Yes. Each skill writes a paste-in embed next to its full page, so you can drop the hero onto the top of a site you already built. It builds the first screen only, not the page below.
Which agents are they written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Can I try one for free?
Not yet: none of the 4 scroll animation skills is free. Every one has a live preview, though, so you see what it makes before you pay, and Lookbk has 8 free skills in other collections.
What does it cost?
Free skills cost nothing. A single Pro skill is $6.90, yours to keep with a year of updates. Pro is $99 a year for every Pro skill, or $19 a month for 10 Pro skills a month, and Founding Lifetime is $199 once for the first 100 members, then Lifetime is $299. If a skill doesn’t work with your agent, email support@lookbk.dev within 7 days of buying and we fix it or refund you.
Can I use what I make commercially?
Yes. Anything your agent makes with a Lookbk skill is yours, including for client and commercial work. You can’t resell or republish Pro skill packages. Free skills are open source under the MIT License.
Related tasks
More jobs your agent can do
Find the right skill for your next scroll animation
Free skills stay free. Pro is $99 a year for every skill, or $19 a month for 10 skills a month.