component · documentation

TuxMobileFrame

Stylized device chrome for marketing screenshots and stakeholder reviews. Single component, two platforms — pass platform="ios" for iPhone 16 Pro shape or platform="android" for Pixel 9 shape. Both share the same :width pivot so they sit cleanly side-by-side in cross-platform mockups.

flagship · iOS

iPhone — Dynamic Island + status bar + home indicator

Default 280px wide; everything (bezel, screen radius, side buttons, island, indicator) scales from that single number. Drop any element into the slot — an image, a live TUX composition, or a placeholder.

9:41

corridor · landscape

FM-60 / Wellborn

38%compliance Q1
  • Last inspected · 12 May
  • Treatment · rumble strips
  • Beacon battery · 18%
<tux-mobile-frame platform="ios" :width="280" color="natural">
  <img src="/screenshots/landscape-mobile.png" alt="" />
</tux-mobile-frame>

ios · variants

Four iPhone bezel colors

Real iPhone 16 Pro finishes (natural / black / white) plus a TTI maroon for branded marketing surfaces.

9:41
natural
9:41
black
9:41
white
9:41
maroon

flagship · Android

Pixel — center punch-hole camera + gesture nav

Pixel 9 proportions; navStyle switches between gesture pill (Android 12+) and three-button (legacy). :notch="false" hides the center punch-hole for surfaces that prefer a clean top edge.

9:41

corridor · landscape

FM-60 / Wellborn

38%compliance Q1
  • Last inspected · 12 May
  • Treatment · rumble strips
  • Beacon battery · 18%
<tux-mobile-frame platform="android" :width="280" color="obsidian">
  <img src="/screenshots/landscape-mobile.png" alt="" />
</tux-mobile-frame>

android · variants

Three Pixel finishes + maroon

9:41
obsidian
9:41
porcelain
9:41
hazel
9:41
maroon

android · nav options

Gesture · three-button · none

Gesture (default, modern Android), three-button (legacy / accessibility-preferred users), or none (kiosk / fullscreen contexts).

9:41
gesture
9:41
three-button
9:41
none

cross-platform mockup

Side-by-side comparison

Both platforms share the same width / scale pivot — pass the same :width to each and they pair cleanly. The canonical "here's the app on iOS and Android" marketing layout.

9:41
iOS
9:41
Android
<div class="flex gap-6">
  <tux-mobile-frame platform="ios" :width="240" />
  <tux-mobile-frame platform="android" :width="240" />
</div>

when to reach for which

Frame vs runtime chrome

  • Marketing / docs screenshot → TuxMobileFrame. Static frame around a slot; doesn't react to platform APIs.
  • Tauri Mobile app chrome (runtime) → TuxAppFrame + TuxTabBar + useTuxPlatform(). The platform-awareness doctrine lives in design/platform-awareness.md.
  • Both on the same page (marketing site showing what the live app looks like) — perfectly fine; they don't conflict.