> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Acoustic architecture

> A scroll-scrubbed, frame-by-frame product teardown — the section that makes a VARAHI store feel like no other theme.

# 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](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/section-architecture.png)

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

| Setting | Type | Notes |
| - | - | - |
| **Eyebrow** | Text | Small mono label above the heading, e.g. "Precision internal engineering" |
| **Heading** | Text | Section heading |
| **Subheading** | Text | Supporting line under the heading |
| **Sequence frames** | Number | How many frames to scrub through. Default `16` |
| **Fallback diagram image** | Image picker | Shown if the sequence cannot load, and as the poster frame |
| **Image alt text** | Text | Alt text for the fallback image and the sequence |

### The Annotation card block

| Setting | Notes |
| - | - |
| Label | Small mono eyebrow, e.g. "01 / ACOUSTICS" |
| Title | The card heading, e.g. "Dual Resonance Chambers" |
| Text | The body copy |
| Icon | Optional Material Symbols icon name |

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:

```text theme={"system"}
assets/arch-seq-01.jpg
assets/arch-seq-02.jpg
...
assets/arch-seq-16.jpg
```

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"`.

> [!WARNING]
>
> **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.

> [!NOTE]
>
> 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.

| Guidance | Why |
| - | - |
| Keep the background and lighting identical across frames | The product should appear to rotate, not to transform |
| Keep the subject at a consistent scale and position | A jump in scale reads as a glitch |
| Make the changes between frames small and legible | Big jumps are unreadable at scroll speed |
| Label frames 01, 02, 03 in order | The annotation cards reference the layer numbers |
| Export at 1400 — 783 | Matches the canvas aspect ratio — no letterboxing |

> [!TIP]
>
> 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.

> [!NOTE]
>
> 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](https://varaahi.vritservicespro.com/sections/hero-product.md)**
>
> Where the teardown usually begins.

> **[Performance](https://varaahi.vritservicespro.com/going-further/performance.md)**
>
> How VARAHI keeps this section affordable.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.