Skip to main content

​
Acoustic architecture

The Acoustic architecture section is VARAHI’s signature. As the shopper scrolls, a canvas scrubs through a numbered sequence of product internals, while annotation cards appear alongside explaining each layer.
Acoustic architecture section

Scroll-scrubbed exploded-view sequence

​
Why it exists

A premium product is made. Most stores show a photo of the finished object and a paragraph about it. VARAHI shows the exploded view and lets the shopper take it apart by scrolling. It is the single strongest differentiator in the theme, and it is the section shoppers screenshot and share.

​
Settings

​
The Annotation card block

Cards are positioned automatically along the sequence, alternating sides, and each one fades in as its corresponding frame passes.

​
How the frames work

Frames are numbered image assets in your theme’s assets/ folder:
The section reads arch-seq-01.jpg as the base and counts up to the number you set in Sequence frames. It never requests a frame that does not exist, and the poster image is loading="lazy".
Keep your frame count in sync with the files you upload. If you set 20 but only have 16 frames, the last four scrub positions will show a blank canvas. If you set fewer frames than you have, the extra files are simply never requested.
The default is 16 frames rather than 26. Each frame is roughly 30–45 KB, so 16 frames is about 500 KB of optional payload — and because the sequence is lazy and viewport-gated, it is only downloaded when a shopper actually scrolls to it.

​
Crafting good frames

The sequence reads as a disassembly, so it should follow a physical logic.
A reliable way to produce a consistent sequence is to render your 3D model once per frame from a fixed camera, then apply exactly the same export settings to every frame. Small per-frame adjustments in a photo editor are what break the illusion.

​
Performance behaviour

This is the heaviest section in the theme, so it is carefully gated:
  1. The sequence only initialises when the section is within 600px of the viewport.
  2. Frames load lazily, one at a time, as the scroll position advances.
  3. The whole thing is disabled on mobile, where scroll-scrubbing a canvas is expensive and hard to control precisely.
On mobile the section still renders — with the poster image and the annotation cards in a static, stacked layout. The shopper sees the story; they just do not scrub it.

​
A no-code alternative

If producing a frame sequence is out of scope, set Sequence frames to 0. The section then renders your Fallback diagram image with the annotation cards laid out below it — a clean, static teardown that still tells the engineering story.

Hero Product

Where the teardown usually begins.

Performance

How VARAHI keeps this section affordable.