Home / Paywalls / Demo spec
Download raw .md

Demo spec — Paywall before/after ("Drift" sleep app)

Single self-contained interactive HTML file: demo.html in this folder. Purpose: the on-screen artifact for Act Four of the script — two iPhone-style mockups side by side, BEFORE (left) and AFTER (right), that Kris walks through on camera and viewers can open and click.

Layout

Soft neutral page background (like a design-showcase slide; the reference example used a soft lavender field with two white phone frames — use a soft deep-navy-tinted neutral here since Drift is a sleep app). Two phone frames (~390×844 proportions, rounded corners, status bar with 9:41). Under each phone: a small label chip — "BEFORE · fear added in 6 places" / "AFTER · fear removed in 6 places". Page must work down to mobile widths (stack vertically).

The app

"Drift" — sleep sounds & wind-down app. Night aesthetic: deep indigo background inside screens (#0F1330-ish), soft moon/stars motif (CSS/SVG only, no external assets), lavender/amber accents. Both screens same product, same prices.

BEFORE screen (every sin is one we observed in the wild; do not cartoonify — it should look like a real mediocre paywall)

  • Header: "Unlock Premium" + burst badge "80% OFF" + countdown "Expires in 04:59" (live ticking timer that RESETS to 04:59 when it hits zero — subtle lie-detector easter egg)
  • Three equal plan cards, NONE preselected: Weekly $2.98/wk · Monthly $8.98/mo with a "MOST POPULAR" badge · Yearly "$59.98/yr" (no per-month math anywhere)
  • Dense feature list of 8 plain checkmarks
  • Wall of small auto-renewal legalese text
  • CTA: grey-ish "CONTINUE" (dead-feeling until a plan is tapped)
  • Close: ghost-grey tiny "×" at 30% opacity top-left Interactions: plans are tappable (selection highlights, CTA becomes active) — demonstrating that even the before "works," it just bleeds trust.

AFTER screen

  • Header: "Try Drift free for 7 days" + one laurel line: "★ 4.8 · Editors' Choice" (small, single, believable)
  • Trial timeline (vertical, 3 nodes with icons): Today — Full access to everything · Day 5 — We email you a reminder · Day 7 — First charge, cancel anytime before
  • TWO plan cards: Yearly (preselected) "$4.99/mo · billed annually at $59.98" + badge "Best value — save 44%" with honest strikethrough "$107.76" (12× monthly math) · Monthly "$8.98/mo"
  • Reassurance line under plans: "Forget to cancel? We remind you first."
  • CTA: filled, prominent: "Start my free week — $0.00 due today" (updates if Monthly selected: same CTA, still $0.00 due today)
  • Below CTA: "Not now" plain text link + visible normal-contrast "×" Interactions: plan selection works; selecting a plan updates a tiny "then $X" microcopy under the CTA; timeline nodes gently pulse on load.

Annotation layer (the teaching device)

A toggle at top of page: "Show annotations" (default ON). When on, numbered pins (1–6) appear on both screens, matching the script's walkthrough order: 1 plans/default, 2 price framing, 3 timer (before only — pin says "deleted" on after side near timeline), 4 trial timeline, 5 CTA wording, 6 the exit. Clicking a pin opens a small card with 2–3 sentences of the lesson + the stat (e.g. "90% of multi-plan paywalls preselect — 54% choose annual. n=63, top iOS apps via Mobbin, Aug 2026"). Cards must cite stats EXACTLY as in the table below.

Stats allowed in annotations (verbatim numbers only — no invented figures)

  • 55% of 3-day-trial cancellations happen on Day 0 (RevenueCat 2026 telemetry)
  • Guess $86 vs actual $219 subscription spend (C+R Research 2022 survey, n=1,000)
  • 73% chose the 15¢ truffle; a 1¢ cut flipped 69% to the free Kiss (Shampanier, Mazar & Ariely 2007)
  • 52% vs 30% — 85¢/day vs $300/year (Gourville 1998)
  • RCT n=337,724: 7-day trial +5.59% subscriptions vs 30-day (Yoganarasimhan et al., Management Science)
  • Our audit, n=63 top iOS paywalls: 90% preselect a plan; 57% show per-month framing; only 9% of trial paywalls show a timeline; 63% make the close button subtle; .98 endings (48%) now beat .99 (41%)
  • Blinkist reports +23% trial starts and −55% complaints after making the charge date explicit (self-reported)

Footer

One line: "Built for the Build With Kris video 'Your Paywall's Real Enemy Isn't Price' — all stats sourced in the video description." Then a small "fear added vs fear removed" scoreboard: BEFORE 6/0 · AFTER 0/6.

Craft bar

  • No external assets/fonts/libraries; system font stack; inline SVG for icons.
  • Must look premium: consistent 4px spacing grid, soft shadows, believable iOS details. The two screens must be instantly readable as "same app, different choices."
  • Light/dark: page chrome adapts to prefers-color-scheme; the phone screens stay dark (it's a sleep app).