Skip to content
Silk UI
E-commerceNew

Vesper — VR & tech e-commerce

A neon-lit storefront for VR headsets and immersive products: a three.js neon world in the hero, a pinned scroll section that flies you through a tunnel of light, scroll-lit text, a velocity marquee, 3D tilt product cards, a working cart and a page for every product.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lenis
  • three.js
Live preview (opens in a new tab)Buy now $59$89

One-time payment · Instant download · All sales are final. By buying you agree to the License, Terms and Refund Policy.

silkui.com/page-preview/vesper
Vesper hero screenshot

Overview

Vesper is a neon-lit storefront for VR headsets, consumer tech and immersive products. Deep plum backgrounds, hot magenta light and glass cards, with a serif-italic accent word in the headlines.

It's a real shop, not just a landing page:

  • Hero: a three.js neon world (a glowing grid floor racing to the horizon, floating light rings and rising sparks) behind a graded VR portrait. The camera follows the cursor and dives forward as you scroll.
  • Portal: the screen stays in place while scrolling flies the camera through a curved tunnel of neon rings, with captions along the way and a burst of light at the end
  • Scroll effects: the About sentence lights up word by word, a giant word strip speeds up and leans with scroll speed, and product cards tilt in 3D with a glare
  • Experiences carousel: a 3D coverflow you can drag, swipe, click or use with the arrow keys; it advances on its own while in view
  • Feature spotlight: pick a viewing mode (mixed reality, full immersion, wide angle, 3D view) and the matching features light up around the headset
  • Shop: filter headsets, accessories and subscriptions, and add straight to the cart
  • Cart drawer: quantities, remove, subtotal and checkout; the cart is saved across reloads
  • A page for every product: photo gallery, colour and storage pickers with live price, quantity, specs, what's in the box and related products

Highlights

  • three.js hero: neon grid, floating rings and sparks that react to cursor and scroll
  • Pinned scroll scene that flies the camera through a tunnel of light
  • Scroll-lit text, velocity marquee and 3D tilt cards with glare
  • Working cart and product pages with options and live price

Screens

Scroll-lit about & carousel
Vesper scroll-lit about & carousel screenshot
Portal tunnel (scroll)
Vesper portal tunnel (scroll) screenshot
Tilt-card shop
Vesper tilt-card shop screenshot
Product page & cart
Vesper product page & cart screenshot

What's included

  • three.js neon hero
  • About & experiences carousel
  • Velocity marquee
  • Feature spotlight
  • Portal tunnel (scroll)
  • Shop with filters
  • Why choose us
  • Who it’s for
  • Testimonials & stats
  • Closing banner
  • Cart drawer

Getting started

  1. Install dependencies

    npm install

  2. Run the dev server

    npm run dev   # http://localhost:5190

  3. Build the static site

    npm run build   # writes the site to out/

Deploying

npm run build produces a plain static site in out/, including a page for every product, and runs on any static host. Connect the Checkout button to Stripe, Shopify or your own commerce backend.

License & credits

All photos are free Pexels images, graded to the Vesper palette and credited in the README. The brand, products, prices and reviews are fictional.