A five-page HTML template for AI image generation products.

Most AI landing templates are one page of static sections. Vayra ships five — a landing page, a gallery with a working filter, a pricing page with a live calculator, an about page, and a contact page — and the interactive parts are real, not screenshots.

→ Open the live demo

What's in it

Five pages, not one section stack index · gallery · pricing · about · contact. Shared shell, page-scoped CSS and JS, so editing one page can't break another.

A WebGL hero that carries the product The hero renders your output on a GL plane with a shader crossfade between slides. For an image-generation product the gallery is the hero, so it isn't decoration — and it degrades to a static image when WebGL is unavailable.

A pricing calculator that computes Move the sliders — renders per month, longest edge, upscales, batch size, license, API mode — and the credit total and recommended tier update live. It's plain JavaScript you can retune in one file.

A gallery with a real filter and a viewer Filter by mode, open any entry, and read its generation record: model, steps, seed, dimensions, prompt. The data lives in one array — swap it for yours.

Motion you can turn off A cursor/motion toggle is built in and respects prefers-reduced-motion. Readers who don't want the effects get a page that still works.

Built to be edited

• Zero build step. Open index.html in a browser. No npm, no bundler, no framework.
• CSS custom properties for color, type scale, and spacing — retheme from one file.
• Explicit component boundaries. Class names are namespaced and the CSS is split by concern (tokens / parts / sections / per-page).
• GSAP 3.15 + Lenis 1.3 via CDN, pinned to exact versions.
• Responsive at 1440 / 768 / 375. No horizontal overflow at any of the three.
• W3C validator: 0 errors. Browser console: 0 errors.

What you get

template/          5 HTML pages + assets (CSS, JS, images, favicon)
documentation/     Setup and customization guide (English, beginner-friendly)
LICENSES.md        Full license texts for every third-party dependency
changelog.txt      Version history

Please read before buying

• This is a front-end template. There is no backend, no account system, and no image generation. The contact form validates input on the client and does not send mail — wire it to your own endpoint or form service.
• All copy, imagery, and generation records in the demo are sample content placed to show the layout. Replace them with yours.
• Images are .webp. The pages reference them by path, so dropping in your own files is a filename change.
• GSAP and Lenis load from a CDN. Vendor them locally if you need offline or self-hosted delivery.

Licenses

Third-party licenses are reproduced in full in LICENSES.md.