Avrel

About Avrel

A launch site for one product. The headphone on the home page is a live 3D model. As you scroll it turns, comes apart into eighteen parts and walks through seven chapters, each with a giant word, a short card and a demo figure. At the end it reassembles beside your wordmark, with three finish swatches that recolour it. Swap in your own model and the page tells the same story.

What you get

• Home, Specs, Reserve, Updates with post pages, a 404 and a buyer guide

• One .glb file that loads on the first scroll, with two transparent still images for reduced motion and browsers without WebGL

• Specs drawn as an engineering sheet: an exploded view with eight numbered callouts and leader lines, a front view with demo dimensions, a parts list and a datasheet

• Two CMS collections, Updates and FAQ, so it fits the Basic plan

• Desktop, tablet and phone layouts, a phone menu, and colour and text styles you change in one place

• Three code components: the chapter stage, a count-up figure and the phone menu

Good to know

• Fonts: Mona Sans and IBM Plex Mono, served by Framer

• The model is 209 KB and the 3D engine 179 KB as served

• The reserve form is a demo and sends nothing until you connect it

• The brand, the product, every date and every figure are fictional demo content, and each demo figure says so on the page

Refunds

If the template does not work as described, email studio@tryknowflow.com within 14 days for a fix or a refund. No refunds for a change of mind.