---
id: seed:copy-patterns/mobile-app-landing
title: Mobile app landing page copy patterns
source_type: seed_copy
priority: hot
---

Mobile app landing pages convert on two clicks: App Store and Play Store. Everything above-the-fold exists to push toward those two buttons. Copy is short, the device mockup IS the demo, and the page is built around scroll-revealed feature shots.

**Hero patterns:**

- *Outcome + device mockup*: "Sleep like you mean it." (paired with a tilted phone showing the sleep-tracking UI)
- *Category-defining*: "The notes app that thinks with you."
- *Vertical-specific*: "Run training, written by the world's best coaches."
- *Comparison*: "Like Spotify, for podcasts."

Hero must include BOTH download badges (App Store + Google Play) as the primary CTA — never a single "Sign up" or "Download" button. If your app is iOS- or Android-only, say so plainly: "iOS only — Android coming Q3."

```html
<section data-amb-section="hero" class="hero-section">
  <div class="container">
    <div class="hero-content">
      <h1 class="hero-title">{outcome-led, 4–8 words}</h1>
      <p class="hero-description">{one-line audience + mechanism}</p>
      <div class="hero-store-badges">
        <a class="store-badge store-badge--apple" href="https://apps.apple.com/..." aria-label="Download on the App Store">
          <img src="https://placehold.co/160x52" alt="" />
        </a>
        <a class="store-badge store-badge--google" href="https://play.google.com/..." aria-label="Get it on Google Play">
          <img src="https://placehold.co/180x52" alt="" />
        </a>
      </div>
      <p class="hero-meta">Free. <span class="hero-meta-divider">·</span> 4.8 ★ from 12,000+ reviews</p>
    </div>
    <div class="hero-device-shot">
      <img class="hero-device-image" src="https://placehold.co/360x780" alt="App home screen" />
    </div>
  </div>
</section>
```

*Animation Pattern (The Floating Device):*
- **Continuous Parallax Float:** The device mockup translates ±8px vertically on a 6-second sinusoidal loop using `transform: translateY()` driven by `requestAnimationFrame` (NOT CSS keyframes — keyframes don't pause when the tab is inactive, which kills battery on mobile visitors browsing your landing page).
- **Scroll-Synced Screen Swap:** As the user scrolls, the screen INSIDE the device frame crossfades through 3–5 feature shots. Use `IntersectionObserver` thresholds at 0.25 / 0.5 / 0.75 to switch the `<img>` source with a 200ms opacity transition.
- **Tilt-On-Cursor:** On desktop, the device tilts up to 8° on each axis tracking cursor position with spring physics (damping = 0.18). On mobile/touch devices, disable entirely — scroll is the input.

**Feature scroll-tell pattern:**

Alternating rows. Each feature gets one row: text on one side, animated phone shot on the other. Rows alternate left/right to create scroll rhythm. 3–5 features max — more than that and the page becomes a slog.

```html
<section data-amb-section="feature-1" class="feature-row-section">
  <div class="container">
    <div class="feature-row feature-row--text-left">
      <div class="feature-row-copy">
        <h2 class="feature-row-eyebrow">Focus mode</h2>
        <h3 class="feature-row-title">Block the noise. Keep what matters.</h3>
        <p class="feature-row-description">One swipe silences every notification except the people you choose.</p>
      </div>
      <div class="feature-row-shot">
        <img src="https://placehold.co/360x780" alt="Focus mode screen" class="feature-row-image" />
      </div>
    </div>
  </div>
</section>
```

*Animation Pattern (The Scroll-Reveal Demo):*
- **Sticky Phone, Scrolling Content:** The phone mockup uses `position: sticky; top: 20vh` while the text beside it scrolls. As each text block enters the viewport, the screen inside the phone switches to match. Library: GSAP ScrollTrigger with `scrub: 0.5` so the screen swap eases instead of snapping.
- **Hand-Drawn Annotation:** Arrows or circles drawn on top of the phone screen (SVG paths with `stroke-dasharray` + `stroke-dashoffset`) animate in alongside each feature. Highlights a specific UI element to anchor the copy to a real screen.

**Social proof block:**

Three signals, stacked:
1. **Rating + count:** "4.8 ★ from 12,000+ reviews" — pull from real App Store/Play Store data.
2. **Press logos:** TechCrunch, Wired, The Verge. Monochrome. Only the press the visitor recognizes.
3. **Featured-by badge:** "App Store Editor's Choice" or "Google Play Editors' Pick" if you have it — these are gold.

**App walk-through carousel:**

A 5–7 screen scroller below the feature rows. Shows the actual app screens in sequence with one-line labels. Useful for visitors who want to see "what does this look like inside" before downloading.

*Animation Pattern (The Card Stack Carousel):*
- **3D Stacked Cards:** Phone screens render in 3D space with `perspective: 1500px` on the parent. Active card sits at `translateZ(0)`, adjacent cards at `translateZ(-120px) translateX(±240px)`, all at 0.85 scale. Smooth spring interpolation on swap.
- **Drag-to-Scroll on Mobile:** Native touch drag with momentum decay. Don't add a custom inertial library if the platform's native one works — most mobile browsers handle this fine via CSS `scroll-snap`.

**Privacy / trust strip:**

Apps live and die on trust. Include 3–4 micro-trust signals near the download CTAs:
- "Your data stays on your device"
- "No ads. Ever."
- "End-to-end encrypted"
- "Independent. Self-funded."

Whichever applies. Phrase as ownership statements, not feature checkboxes.

**Pricing CTA:**

If the app is free or freemium, the pricing section can be replaced with a single line: "Free to download. Pro from $4.99/mo." Buyers know what to expect on the App Store — they don't need a pricing matrix on the marketing site. If you're paid-only ($X.99 one-time), pair the price with the badge: "$2.99 · One-time purchase."

**What to omit:**
- Detailed feature lists in bullet points. Use feature rows with screens instead — readers don't read bullet specs on mobile-app pages.
- "Sign up for our newsletter." You want app downloads, not newsletter subs. The post-download experience has email capture.
- Web app screenshots. If your app is mobile-only, every visual must be a mobile screen. A desktop browser frame undermines the pitch.
- Generic 3D animated mockups when you have the real product. The real app screen always beats a stylized illustration.

### Technical Performance Guardrails

| Metric / Rule | Target Limit | Tech Solution |
| :--- | :--- | :--- |
| **Mobile LCP** | < 2.5 s on 3G Fast | Inline hero CSS, preload the hero device image, defer all `<script>` below the fold. |
| **CLS** | < 0.05 | Reserve dimensions on every `<img>` (`width`/`height` attributes) — device mockups cause the worst CLS when they pop in. |
| **Battery on viewer's phone** | No `<video autoplay loop>` longer than 8s on the hero | Use a looping Lottie or a single optimized WebP/AVIF. Autoplay video drains 4–6% of a viewer's battery per minute. |
| **Bundle weight** | < 350 KB above the fold | Lazy-load the carousel JS, the feature-row scroll observer, and ALL fonts beyond the hero font. |
| **Reduced motion** | `prefers-reduced-motion: reduce` | Disable the floating device animation, the parallax tilt, and the scroll-synced screen swap. Use static screenshots instead. |

### What to Omit (Animation perspective)
* **Animated phone mockup with looping UI inside.** If the device is always animating, the eye never settles on the headline. Animate ON scroll-into-view, not continuously.
* **Heavyweight 3D scenes for the hero.** Three.js scenes routinely hit 600 KB+ and stall first paint. Stick to a single static device shot with subtle float — saves ~500 KB.
* **Fake app store star ratings.** If your real rating is 3.6, show 3.6 (and fix your app). Fabricated ratings are detectable and the Streisand effect on socials is brutal.
