VR Headset Comparison Website Template
VANTA XR is a two-route product archive for comparing premium spatial-computing headsets. The home route is a single-viewport carousel where each device owns the whole screen, and a second route at /discover runs a continuous editorial field guide down the page.
It is the template to fork when you have a small number of products that deserve to be looked at rather than scanned. Instead of an ecommerce grid where every item is a thumbnail with a price, each product gets a full viewport, its own gradient, and an oversized masked title.
The shipped content compares three headsets — Apple Vision Pro, Meta Quest 3 and PICO 4 Ultra — as a demonstration of the format. It is a Next.js 16 project, forkable on the Pro and Max plans.
Two routes, two ways to look at the same products
The home route is a carousel that fills the viewport. Each headset claims a dark-to-luminous gradient of its own, an oversized condensed title masked into the layout, and a centered transparent product render. Moving between products recolors the entire screen. There is no scrolling on this route — it is a rack you flip through.
The /discover route takes the same products and does the opposite: a continuous scroll where each product gets a full section, with curved color transitions blending one product background into the next, product facts pulled out beside the render, and a full-width looping video footer at the end. A discover index navigation lets you jump between sections.
Splitting the two modes is the smart part of this template. The carousel is for someone who already knows what they want to look at; the field guide is for someone comparing. Most product sites try to be both at once and end up serving neither.
What the two routes contain
The product data — names, facts, prices and descriptions — lives in lib/headsets.ts and feeds both routes, so adding a product updates the carousel and the field guide together:
- Brand intro sequence on first load
- Home route — single-viewport carousel, one product per screen
- Per-product dark-to-luminous gradient that recolors the viewport
- Oversized condensed masked titles and gradual-spacing type effects
- Centred transparent product renders
- Reveal portrait — an interactive image reveal component
- /discover route — a continuous scrolling field guide with a section index
- Curved color transitions between product sections
- A pulled-out price and facts list per product
- Full-width looping video footer closing the discover route
Design notes
Dark to luminous, per product. Each device is assigned a gradient that runs from near-black up into its own accent, and because only one product is on screen at a time, that gradient becomes the identity of the moment rather than a decoration in a corner.
Type is oversized and condensed, masked into the composition so the render can sit in front of it. A bubble-text and a gradual-spacing component handle the letter-level animation. Because the titles are so large, the layout has very little else on it — the restraint is what keeps it from looking like a poster template.
Reduced-motion preferences are respected: the template disables the heavy animation when a visitor has asked their system for less motion. That is not a common courtesy in cinematic templates and it is worth preserving when you adapt it.
The stack under the hood
The newest Next.js in the library, paired with Tailwind v3 rather than v4.
- Next.js 16 with the App Router
- React 19 and TypeScript
- Tailwind CSS v3 with a tailwind.config.ts
- Framer Motion 12 for the carousel and type effects
- lucide-react for interface icons
- Local video assets for the discover footer
Adapting it with a Siteglade prompt
The one requirement worth planning for is transparent product renders. The composition puts the product in front of a masked title over a gradient, and that only works with cut-out imagery. If your product photography has backgrounds, budget time for that.
A prompt with the right level of detail: "Rebuild this as an archive for Foldwell, comparing three of our espresso machines: the Foldwell One, Foldwell Duo and Foldwell Pro. Keep both routes and the reduced-motion handling. Give each machine its own gradient in copper, slate and forest green. Replace the headset facts with brew pressure, boiler type, footprint and price. Rewrite the discover intro around choosing a machine for a small kitchen."
Media Studio inside Siteglade can generate product imagery if you need something to prototype with, and image generation is included on every plan. For a real launch, use your own renders — a generated stand-in is fine for layout work and wrong for a live product page.
What to change first
A comparison page is only as good as the facts it compares, so start there:
- The product data in lib/headsets.ts — names, facts and prices, with nothing you cannot verify
- Transparent product renders, one per item
- The per-product gradients, which are the visual identity of each screen
- The discover intro, which is where you explain how to choose
- The looping video footer, or remove it if you have no footage
| Property | Value |
|---|---|
| Template name in the picker | VR Headset Archive |
| Framework | Next.js 16, App Router |
| Builder category | Scrollytelling |
| Plan required to fork | Pro or Max |
| Routes | Home carousel and /discover field guide |
| Palette | Per-product dark-to-luminous gradients |
| Products shipped | Three |
| Accessibility | Reduced-motion preferences disable heavy animation |
Frequently asked questions
Does it work with more or fewer than three products?
Yes. Both routes are generated from the product array in lib/headsets.ts, so adding a fourth item gives it a carousel screen and a discover section automatically. Two to six is the range where a full viewport per product still makes sense.
Can I sell from this template?
It is built as an archive and buyer guide rather than a store, so there is no cart. Most people link each product to wherever it is actually sold. Ask the agent if you want purchase links wired into the carousel and the field guide.
Do I need transparent product images?
For the intended look, yes — the renders sit in front of masked type over a gradient, which needs cut-outs. If yours have backgrounds, ask the agent to switch to a framed image treatment instead of a floating render.
Why does it use Tailwind v3 when other templates use v4?
It ships with a tailwind.config.ts on the v3 line. That is only worth knowing if you plan to hand-write utility classes or copy components between templates; the agent handles the difference on its own.