> ## 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.

# Companion app

> Showcase your mobile app with an interactive device mockup, live battery telemetry, ANC readout and EQ presets.

# Companion app

If your product has a companion app, this section puts it in the story. A phone
mockup renders a live telemetry interface — battery, connection, ANC state — and a
row of EQ presets that respond to clicks.

![Companion app section](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/section-companion-app.png)

Companion app section with interactive device mockup

***

## Settings

### Copy

| Setting | Notes |
| - | - |
| **Badge** | Small pill above the heading, e.g. "Companion app" |
| **Heading (first line)** | First line of the heading |
| **Heading (accent line)** | Second line, rendered in the gradient accent |
| **Body** | Supporting paragraph |

### Store buttons

| Setting | Notes |
| - | - |
| **Show store buttons** | Show the App Store and Google Play links |
| **App Store URL** | Your App Store listing |
| **Google Play URL** | Your Play Store listing |
| **App Store button — small label** | e.g. "Download on the" |
| **App Store button — large label** | e.g. "App Store" |
| **Google Play button — small label** | e.g. "Get it on" |
| **Google Play button — large label** | e.g. "Google Play" |

### Device readout

| Setting | Notes |
| - | - |
| **Connection label** | e.g. "Connected" |
| **Tech label** | e.g. "Bluetooth 5.4" |
| **Battery percentage** | Starting value for the battery |
| **Battery label** | e.g. "Battery" |
| **Presets label** | Heading above the preset row |
| **Preset 1–4** | Names of your four presets |

### ANC readout

| Setting | Notes |
| - | - |
| **ANC row label** | e.g. "Adaptive ANC" |
| **ANC value** | e.g. "Active −42 dB" |

### The Point block

Each **Point** block is a feature bullet with an icon and text — one per capability of
your app.

***

## What actually moves

Nothing here is a static image. The mockup is alive.

| Element | Behaviour |
| - | - |
| **Battery** | Counts up on entry, then drifts slowly — a gentle loop, not a countdown |
| **Meter fill** | Animates from 0 to full with an easing curve when the section enters |
| **Presets** | Click one and the meter and readouts update to match |
| **Device** | Floats on a slow, low-amplitude sine wave |
| **Phone** | Rises into place on entry with a slight rotation |

> [!NOTE]
>
> The preset row is genuinely interactive. A shopper can click **Bass Boost** and watch
> the meter reshape. It costs almost nothing in performance and it makes the section
> feel like a product rather than a picture of a product.

***

## Mobile behaviour

Below 1024px the device mockup is still rendered, but the drift and count-up
animations are disabled along with the rest of the motion system. The presets remain
clickable — they are CSS state changes, not animation.

> [!WARNING]
>
> Make sure the app store links point to your **real listings**. This section is
> usually placed directly under the buy box, and a dead store link at that point in
> the funnel is expensive.

***

## Best practice

> **Show the app, do not describe it**
>
> The point of the mockup is to demonstrate the interface. Use a real screenshot
> or a faithful render as the device screen, and let the telemetry readouts do the
> persuading.

> **Only use this section if you have an app**
>
> A companion app section on a product without an app is noise. Hide the section
> entirely rather than filling it with placeholder copy.

> **Name your presets after real modes**
>
> "Bass Boost", "Vocal Clarity", "Deep Focus" — names that describe a listening
> outcome, not an EQ frequency. This is a product, not a mixing desk.

***

> **[Comparison table](https://varaahi.vritservicespro.com/sections/comparison-table.md)**
>
> The spec-by-spec argument.

> **[Bento features](https://varaahi.vritservicespro.com/sections/bento-features.md)**
>
> The flexible feature grid.


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