FINDING YOUR DIRECTION

0%

Scrollhaus AI / Animated website library

Animated website templates with working scroll previews.

Explore more than 100 scroll-driven website directions with working motion previews. Select a page, inspect how its sections move, then use the available source and build instructions in Lovable, Bolt, Claude, Codex or another AI coding tool.

Browse website templates, visual build prompts, animation effects and moving backgrounds. Read practical guides in the Journal or see how the workflow works.

Choose a direction by opening its live preview and scrolling through the whole page. Check the layout at phone and desktop widths, then confirm whether that particular build offers portable HTML or a full-project handoff. Adapt the copy, media and brand only after the motion and section structure work in your AI builder. For launch, test performance, keyboard access and reduced-motion behaviour before publishing. Read the scroll performance guide for practical checks.

Selected builds and resources are free. Compare paid plans for premium source and creative access. New two-month memberships include five premium prompt copies per UTC day; yearly and lifetime plans include unlimited premium prompt copies. Existing subscribers keep their original terms.

What is in the animated website templates collection

Each template is a complete web page design, not a single effect: a hero, content sections and scroll effects such as parallax, pinned scenes and smooth reveals already working together. The collection covers landing page, portfolio, product, app and creative studio layouts, so a designer or founder can find a direction close to their brand.

These are not WordPress themes. A template is source you adapt with an AI coding tool: the layout, motion design, hover effects and interaction are customizable elements you change in code. Open a preview on a phone to check the responsive layout and loading speed before you download or copy anything, and explore the free animated website templates first to see how a visitor experiences the page.

Choose a template for your AI website workflow

Use the Bolt.new animated template guide for a focused build brief. Start with vibe coding website templates for a step-by-step landing-page workflow or the website templates with source code guide to check portable HTML and project handoffs. Compare GetLayers alternatives and MotionSites alternatives using the same free-example test.

Frequently asked questions

What is included with each website?

Every available build includes a working motion preview and clear build direction. Portable entries also include the original HTML, CSS, animation code, hosted asset paths, and a builder-ready prompt.

Which websites can I use for free?

Open the Free to build filter to see the current free collection. Paid access unlocks premium websites and creative resources. Selected templates, effects and interactive backgrounds, plus the OpenHero videos and stills, remain free.

Can I preview a website before choosing it?

Yes. Live previews are available from each accessible website card, so you can check the layout, scrolling, and motion before taking the source into your builder.

Will it look the same in Lovable, Bolt, Claude, or Codex?

The supplied prompt asks the builder to preserve the original structure, styles, assets, and animation together. AI tools can still reinterpret instructions, so compare the result with the Scrollhaus preview before publishing.

Can I change the copy, colors, and branding?

Yes. First reproduce the original accurately, then replace the words, colors, type, imagery, and brand details in deliberate steps. This keeps the motion system intact while the design becomes yours.

Where do the images and videos come from?

The previews use Scrollhaus-hosted media. Copied builds can use those supplied URLs while you prototype; for a customer launch, move final assets to the customer’s own production storage.

How does paid access connect to my account?

Use the same email address at checkout and when creating or logging into your Scrollhaus account. Once Stripe confirms the payment, the matching Supabase account receives the appropriate access.

Can I get help with a custom website or project direction?

Yes. Book a one-to-one consultation for project planning, design direction, motion review, or a custom build discussion using the consultation section below.