Animated website examples your agent can build: scroll stories, parallax and full pages
Every example here is a real recording, not a mock-up: the card plays the 1080p video each skill recorded of its own example page as it scrolls. Each one is a skill, so your agent can build the same page or scroll story with your words and links, check it at four screen widths and hand you a page to put live.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
Animated websites, from whole pages to scroll stories
From the Lookbk catalog only, and only whole pages and scroll-driven sections, not single animated heroes; those are in the hero section examples. The Scroll Films pages share one layout on different footage, so two of the 8 stand in for the series. Each pick records a 1080p video of its example page scrolling, and that recording is what its card plays. All of them are Pro skills. The install steps below use Mono Editorial Landing, a free landing page that doesn’t animate.
- Cliff Villa Scroll PageClaude CodeCodexCursor+3 more agents
01 · Scroll Films · Pro
Cliff Villa Scroll Page
Scroll-driven landing page on generated footage · pinned film that scrubs with the scroll · 1080p video of the scroll
A whole landing page told as you scroll, on ten seconds of generated footage of a villa over a sea cliff at blue hour. The film loops behind a headline that rises word by word, then pins in a small window that opens to full screen while it plays forward and back with the scroll, under three captions. A sideways row of frames, a marquee, counters and a spotlight that follows the pointer finish the page.
Worth knowing: The page is paced for its film: you write the words and links, not the footage, colors or the order of the sections.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Cliff Villa Scroll Page makes - Glass Monolith Scroll PageClaude CodeCodexCursor+3 more agents
02 · Scroll Films · Pro
Glass Monolith Scroll Page
Scroll-driven landing page on generated footage · pinned film that scrubs with the scroll · 1080p video of the scroll
The same scroll-driven page for AI products and developer tools, on footage of a frosted glass monolith with cyan and magenta light ribbons spiralling round it. The Scroll Films series has 8 of these pages, each on its own film, from coffee and fragrance to cabins under the aurora.
Needs: Node.js 18+, Chrome, and ffmpeg for the video; the page needs a web server (a local one is included)
See what Glass Monolith Scroll Page makes - Dark Glass LandingClaude CodeCodexCursor+3 more agents
03 · Landing Pages · Pro
Dark Glass Landing
A whole landing page in one dark glass system · real backdrop blur, pointer-lit edges, volumetric light · two layouts for every section · two art directions with different skeletons · 1080p video of the scroll
A complete landing page in a dark glass system: translucent panels with real backdrop blur over slow volumetric light, a hairline edge on every panel that lights up where the pointer is, and a product window that tilts back in perspective and lands flat. Every section has at least two layouts, so two pages don’t share a skeleton.
Worth knowing: Dark only: the build refuses a light background.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the video
See what Dark Glass Landing makes - Paper Technical LandingClaude CodeCodexCursor+3 more agents
04 · Landing Pages · Pro
Paper Technical Landing
A whole landing page in an engineering-paper design system · SVG technical drawing that plots itself · dimensioned section heads · pinned anatomy index · tokens and rules included · 1080p video of the scroll
A landing page built like a drawing sheet. Your product is a technical drawing that plots itself stroke by stroke, every section heading gets a dimension line that grows as you scroll, and an anatomy section pins the drawing beside an index and lights the part you are reading.
Worth knowing: Light only, and the drawings are 2D line drawings made from parts, not photos.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the video
See what Paper Technical Landing makes - Motion Sections KitClaude CodeCodexCursor+3 more agents
05 · Page Kits · Pro
Motion Sections Kit
Animated landing-page sections you compose in page.json · rolling prices, comparison table, pinned quote stack, counters with real meters, editorial and terminal FAQs · two styles with their own layouts · 1080p video of the scroll
Landing-page sections that share one motion language, in any order: a headline that rises word by word, stats that count up as they arrive, testimonials as a pinned stack of letters that lift off as you scroll, pricing digits that roll like an odometer and a closing film frame that opens out to the edges.
Worth knowing: Seven section types in two styles, paper and graphite; the buttons link to your own sign-up pages.
Needs: Node.js 18+, and Chrome for the checks; ffmpeg only for the video
See what Motion Sections Kit makes - Scroll WorldClaude CodeCodexCursor+3 more agents
06 · Motion Heroes · Pro
Scroll World
three.js miniature-world scroll story · page + embed · 1080p story clip
Scrollytelling in 3D: the section pins while a macro lens travels through a model maker’s miniature village built in three.js, stopping at three stations where your copy is painted, gilded or handwritten into the place.
Worth knowing: The section pins for three screen heights.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Scroll World makes - Scroll ExpandClaude CodeCodexCursor+3 more agents
07 · Motion Heroes · Pro
Scroll Expand
WebGL cut-paper scroll story hero · page + embed · 1080p video
Parallax as a tunnel book: a printed card splits along a die-cut seam round every word of the headline, then the camera pushes through into a diorama of eight cut-paper sheets whose soft shadows slide with the parallax.
Worth knowing: Two scenes ship, a lakeside sauna and a courtyard; another scene means editing the shader.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Scroll Expand makes - Sticky StackClaude CodeCodexCursor+3 more agents
08 · Motion Heroes · Pro
Sticky Stack
Editorial scroll story, 2D canvas · page + embed · 1080p story
A pinned scroll story on a desk: printed plates land one by one under a warm lamp and push the earlier ones up the desk, and every earlier running head stays readable, so the pile is the table of contents and the progress bar at once. Plain 2D canvas.
Worth knowing: Up to seven chapters.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Sticky Stack makes - Scroll Film HeroClaude CodeCodexCursor+3 more agents
09 · Motion Heroes · Pro
Scroll Film Hero
Scroll-scrubbed film hero · page + embed + frames · 1080p video
Scrolling plays your own film: the section pins and your clip scrubs forward and back, with callouts and counting stats at up to six stops. The pick here that takes your own footage.
Worth knowing: It is a sequence of stills cut from your video, so every frame is a download: 2.5 to 4.5 MB on desktop at the defaults.
Needs: Node.js 18+, Chrome (or Chromium/Edge), ffmpeg, and your own video (or the built-in stand-in footage)
See what Scroll Film Hero makes
Scrollytelling examples
Scrollytelling ties a story to the scrollbar: a section pins, and scrolling moves the story on instead of the page, until the last step lets the page go. It suits anything with an order, such as a journey, a process or chapters, and reads badly when the steps could come in any order.
01
Pin and scrub
The section sticks while the scroll position drives a film or a timeline, as in Scroll Film Hero and the Scroll Films pages. Scrolling back plays it backwards.
02
Stations
The story rests at a few fixed stops with a line of copy each, as Scroll World does at its three stations. Give every stop its own words.
03
A stack that keeps its past
Each step lands on top of the last and the earlier ones stay in view, as in Sticky Stack, so readers always see how far they have come.
04
Let go at the end
A pinned section has to release the page when its story ends. Visitors who ask for reduced motion should get the finished picture without the ride.
Parallax website examples
Parallax moves layers at different speeds so that a flat page reads as deep. The classic version slides a background picture more slowly than the text; the examples here build the depth itself, so near things really do pass faster than far ones.
01
Layered sheets
Scroll Expand pushes the camera through eight cut-paper sheets, and their shadows slide with the parallax.
02
A real 3D camera
Scroll World moves a lens through a three.js model, so props near the lens pass faster than the hills behind them, with a shallow depth of field.
03
Keep the shift small
Large parallax moves can make some visitors feel unwell. Keep the layers’ speeds close together and turn the effect off for reduced motion.
04
Move the pictures, not the words
Copy that drifts is harder to read. Let the layers behind move and keep the text where the reader left it.
Install
Install a pick with your agent
Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Mono Editorial Landing, which is free; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Mono Editorial Landing" skill from Lookbk (https://lookbk.dev/skills/mono-editorial-landing). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add mono-editorial-landing 2. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add mono-editorial-landing2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/mono-editorial-landing
- Codex
- ~/.agents/skills/mono-editorial-landing
- Cursor
- ~/.agents/skills/mono-editorial-landing
3. Ask for the result
Describe it in plain words, for example:
Build a Mono Editorial landing page for quietly.example from our README, with a waitlist form.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesWhat makes a good animated website?
Motion that follows the reader: things arrive as they come into view, a pinned section tells one story and then lets go, and every word stays readable at every moment. It still has to work on a phone and for visitors who ask for reduced motion.
Do these use GSAP or a scroll library?
No. The Scroll Films pages and the landing pages draw every frame from the scroll position with a small runtime inlined in the page, and the scroll heroes run on canvas, raw WebGL or three.js. There is nothing to add to your build.
Can I use my own video?
In Scroll Film Hero, yes: it scrubs your own clip. The Scroll Films pages are paced for their own generated footage, so you change the words and links, not the film.
How do I see the scroll before I install?
Each card plays the 1080p video the skill recorded of a scripted scroll through its example page. The skill’s own page has the same video and more about what you can change.