The short answer
A SaaS landing page converts on five sections, in this order: a hero that states the outcome in one line, proof before the fold ends, features framed as jobs rather than a grid of icons, pricing you can read in ten seconds, and motion that guides rather than decorates. Below we tear down five kits from the HorizonX catalogue against that rubric, with what to copy from each and what to change for your product.
The rubric
Every page below is scored on the same six questions, so the comparison is fair and you can run it on your own page in ten minutes.
- Hero clarity: can a stranger say what the product does after reading the h1 and one line?
- Proof placement: is there a logo row, a number or a quote before the first scroll?
- Feature framing: jobs and outcomes, or icons and adjectives?
- Pricing legibility: plans, price, the difference between them, one CTA each.
- Motion discipline: does the animation move attention toward the CTA or away from it?
- Responsive and states: does the phone version keep the hierarchy, and do buttons have real states?
Teardown 1: Velto
Velto is a SaaS landing on Next.js 16 + React 19 + Tailwind v4 + GSAP where every scroll animation is scrubbed and bidirectional: scroll back up and the reveal cleanly un-plays.
- What it gets right: motion discipline. Scrubbed animation means the page never plays a reveal the user did not ask for, and never leaves a section half-animated when they scroll back. That is the difference between motion that feels like the product and motion that feels like a slideshow.
- Steal this: the bidirectional reveal pattern for feature sections. It is the single most requested fix on "AI-generated" pages, where entrance animations fire once and then the page goes dead.
- Change for your product: the hero copy. Templates ship with placeholder outcomes; write yours as "[what changes] for [who] without [the pain]".
Teardown 2: Vantro
Vantro is a conversion-focused SaaS landing for intelligent pipeline management, in HTML + CSS + GSAP.
- What it gets right: feature framing. The sections are organised around what a sales team does (pipeline, forecasting, analytics), not around a grid of icons. It reads like a product tour.
- Steal this: the structure of one job per section, each with its own proof element.
- Change for your product: because it ships as plain HTML + CSS, port it into your framework rather than iframing it. It is the most portable page in this teardown.
Teardown 3: Veyra
Veyra is an editorial AI strategy landing on React + Vite, with a cinematic sky, an adaptive capability orbit and configurable motion.
- What it gets right: hero clarity through restraint. Editorial typography and a single visual metaphor carry the first screen; there is no competing UI chrome.
- Steal this: configurable motion. The motion parameters are exposed so you can dial the choreography down for a B2B audience without rewriting it.
- Change for your product: the orbit works for capability-led positioning. If you sell a single feature, replace it with a product screenshot and keep the type.
Teardown 4: Motif
Motif is a shared-studio landing for independent minds: bold lime type on dark charcoal, and a membership that flexes with the work.
- What it gets right: pricing legibility. Membership tiers are part of the narrative, not an afterthought at the bottom.
- Steal this: a pricing section that explains who each tier is for in one line before showing the number.
- Change for your product: the palette is a brand statement. Swap tokens early, because lime-on-charcoal is memorable enough to become "that template" if you leave it.
Teardown 5: Good Move
Good Move is a classical-art landing for a momentum platform, delivered as a Figma file with prototyped animations.
- What it gets right: proof placement and tone. The classical imagery is an argument about seriousness, and the layout puts social proof high.
- Steal this: the tone-of-voice decision. A SaaS page does not have to look like every other SaaS page to convert; it has to be legible and trustworthy.
- Change for your product: it is Figma-first, so plan the code step. See Figma templates vs coded components for when that is the right order, and Figma templates for v0, Lovable and Bolt if an AI builder is doing the port.
Scorecard
| Kit | Stack | Hero clarity | Proof | Feature framing | Pricing | Motion discipline |
|---|---|---|---|---|---|---|
| Velto | Next.js 16 + React 19 + Tailwind v4 + GSAP | Strong | Present | Good | Good | Best in set |
| Vantro | HTML + CSS + GSAP | Good | Present | Best in set | Good | Good |
| Veyra | React + Vite | Best in set | Present | Good | n/a (positioning page) | Configurable |
| Motif | Vite + React + GSAP | Good | Present | Good | Best in set | Good |
| Good Move | Figma | Strong | Best in set | Good | Present | Prototyped |
"Present" means the section exists and is placed correctly; you still bring your own logos, numbers and quotes.
The five mistakes these kits avoid
- Hero that describes the category instead of the outcome. "AI-powered platform for teams" says nothing; every kit above leads with a concrete promise.
- Proof below the fold. Logos and numbers belong before the first scroll.
- Feature grids. Six icons with adjectives under them is the layout equivalent of lorem ipsum.
- Entrance animations that fire once. Scrubbed, reversible motion (Velto) or configurable motion (Veyra) is what a page that feels alive on the second scroll needs.
- Pricing that needs a calculator. One line per tier on who it is for, then the number.
Run the rubric on your current page before choosing a kit. If you score "Strong" on hero and proof already, you need a better features section, not a new page.
FAQ
Which SaaS landing page kit is best for a B2B product?
Vantro for feature framing and portability, Velto if you are on Next.js and want the motion already solved. Both are in the SaaS templates collection.
Do animated landing pages hurt conversion?
Undisciplined ones do: motion that plays where the user is not looking pulls attention away from the CTA. Scrubbed and reversible motion tied to scroll position tends to help, because it responds to the user instead of performing at them. Test it, and read the production readiness checklist for the runtime-quality gates.
Can I use these kits with Tailwind or shadcn/ui?
Velto is Tailwind v4 natively. Vantro is plain CSS and ports into any stack. Pair either with shadcn/ui for the application behind the landing; the React + Tailwind libraries roundup covers the combinations.
How do I adapt a kit without it looking like the template?
Swap tokens first (colour, type, radius), then imagery, then copy. Most "it looks like a template" complaints are about an unchanged palette and font, not the layout.
Are these included in a HorizonX membership?
Yes. Some carry a Premium badge with a separate monthly allowance per plan; details are on the pricing page. Every paid plan includes a commercial license for client work.