ScrollHaus free templates
Seven scroll-animated website projects you can run, read and copy into Lovable, Bolt, Claude, Codex or any AI coding tool.
Watch the 30-second demo and browse the full library at scrollhaus.ai →
ScrollHaus is a library of animated, scroll-driven website templates. Every entry has a live preview and editable source, so you see the motion working before you build instead of starting from a blank prompt. This repository is the free sampler.
What's inside
| Project | Style | Live preview |
|---|---|---|
| Hanbit Korea | Travel | scrollhaus.ai/?site=hanbit-korea |
| Archer | Travel | scrollhaus.ai/?site=archer |
| Mirage | Portfolio | scrollhaus.ai/?site=mirage |
| Rune | Portfolio | scrollhaus.ai/?site=rune |
| Axiom R9 | Ecommerce | scrollhaus.ai/?site=axiom |
| Orven | Ecommerce | scrollhaus.ai/?site=orven |
| Morphos | 3D website | scrollhaus.ai/?site=morphos |
Each project lives in its own folder under sites/.
Two motion studies from the full library
These are live previews from the full library, included here so you can inspect the interaction before choosing a template. Their source files are not part of this free sampler.
| Study | What to look for | Live preview |
|---|---|---|
| MR. DAB | A playful 3D character, bold kinetic type, and scroll-led transitions | Explore MR. DAB · Watch the demo |
| ONI RONIN | A cinematic character-led landing page with layered scenes and scroll storytelling | Explore ONI RONIN · Watch the demo |
When comparing them, try both a desktop pointer and a phone: the interaction and motion should still make sense without hover. To build a similar page, start with a live preview, copy its available build prompt from Scrollhaus, then replace the visuals and copy with your own. The videos show the intended look; an AI builder's first output may need refinement.
Run one locally
Open a project folder and follow its package.json or included files. For the single-file builds, open index.html in a browser or serve the folder:
cd sites/mirage
python3 -m http.server 8000
Use one in an AI builder
- Open the live preview and scroll it to see the motion you want.
- Copy the project's
index.html(and its assets) from this repo. - Paste it into Lovable, Bolt, Claude or Codex and ask it to keep the layout and motion while you change the copy and brand.
Keep the build as one document. Splitting a scroll-driven page into components is the most common way the animation gets lost.
More
- Full library, with new sites twice a week: scrollhaus.ai
- Free animated backgrounds and video heroes: scrollhaus.ai/backgrounds
- Guides on scroll animation and AI website workflows: scrollhaus.ai/blog
- Ask an AI assistant to search the library through the ScrollHaus MCP server
The free projects are here to try. The rest of the collection is available with a paid plan on the website.
