ORIVA: a concept audio store with a listening room and a three-step checkout

VITON¹³ builds concept sites to show its range in genres where it has no client project to point to. ORIVA is one of them: an online store for a fictional acoustic atelier that sells headphones, speakers, amplifiers, vinyl and accessories. The brand, the products, the prices and the boutiques are invented, and the site is written in Russian.

The store had to work from start to finish, not just look premium. A buyer should be able to narrow the catalogue, pick a colour on the product page, apply a promo code, get through a checkout that checks every field and see an order confirmation. A visitor who is not ready to buy should be able to find a boutique and book a listening session.

18 pages: home, catalogue, product, cart, checkout, order confirmation, account, wishlist, journal, boutiques, atelier, delivery, support, contacts, privacy, terms, cookies and a 404. The catalogue holds 13 products and filters them by category, price, colour and flags, with sorting and chips that show the active filters. The product page has a gallery with a lightbox, colour and quantity, accordions, reviews and related items.

The cart accepts 2 demo promo codes and shows a progress bar towards free delivery from 30,000 roubles, a demo threshold. Checkout has three steps with validation: contacts, delivery and payment. The demo account covers sign-in and registration, orders, the wishlist, addresses and warranties. Boutiques in 6 cities sit on an interactive map with a city filter and booking for a listening session.

The listening room is a player drawn as a spinning record with a tonearm: a list of 5 tracks, a seek bar, volume and auto-advance. The tracks, about 16 MB in total, are stored on the site under the Pixabay licence. A journal, a delivery, payment and returns page, a support FAQ and the legal pages complete the set.

The home page opens on a video hero and continues as a scroll story with counters. Motion runs on GSAP with ScrollTrigger and Lenis smooth scrolling, with soft easing throughout. The key path is catalogue, product, checkout: the cart slides in as a drawer, search opens as an overlay and a cookie banner appears on the first visit.

The site is plain HTML, CSS and JavaScript with no build step. The header, footer and overlays are rendered from one shared script, so every page stays identical. Accounts, carts and bookings are kept in the browser’s localStorage, and nothing is sent anywhere. The map is built with Leaflet on OpenStreetMap/CARTO tiles; photos are stock photography from Unsplash and video comes from Pexels, both loaded by direct CDN links.

What exists now is a working concept: 18 pages, 13 products, boutiques in 6 cities and a listening room with 5 tracks, usable from the catalogue to the order confirmation without a server. The checks of 22 September 2026 across 17 pages found one H1 on each of them, alt text on 100% of images and 0 broken internal links.

Lighthouse gave the home page SEO 100 and accessibility 99 on both mobile and desktop, and performance 97 on desktop against 66 on mobile. The mobile score is held back by weight: the page sends 12.8 MB to a phone, including a full-HD hero video and images, and LCP comes in at 7.3 s.

ORIVA is a concept built by VITON¹³ to show range, not a commissioned project. The atelier, its products, prices, reviews and boutiques are fictional. The site has no domain, no visitors, no search traffic and no sales, so it proves nothing about conversion or revenue. Photos and video are licensed stock photography and video from Unsplash and Pexels.

The Lighthouse figures are lab measurements of the home page on one day, not data from real users. A score of 100 for SEO covers the basics only: canonical URLs, Open Graph, JSON-LD, sitemap.xml and robots.txt are not in place. Checkout takes no payment and sends nothing: orders and accounts exist only in the visitor’s browser.