launching

backend/app/services/plans.py

@@ -7,6 +7,8 @@ from sqlalchemy.orm import Session
 from app.config import settings
 from app.models import Subscription, Workspace
 
+ANNUAL_DISCOUNT = 0.25  # annual billing: 25% off the monthly price
+
 
 @dataclass(frozen=True)
 class Plan:
@@ -31,24 +33,25 @@ PLANS: dict[str, Plan] = {
         tagline="For trying Notestack on your archive",
         price_monthly_usd=0,
         sources=1,
-        indexed_posts=50,
-        audio_minutes=10,
-        video_minutes=3,
-        launch_kits=5,
+        indexed_posts=5,
+        audio_minutes=3,
+        video_minutes=1,
+        launch_kits=2,
         voice_cloning=False,
         brand_kit=False,
         features=(
-            "1 source, 50 indexed posts",
+            "1 source, your 5 latest posts",
             "Grounded research chat with citations",
-            "10 min of audio overviews a month",
-            "5 Launch Kits a month",
+            "3 min of audio overviews a month",
+            "1 min of video a month",
+            "2 Launch Kits a month",
         ),
     ),
     "writer": Plan(
         id="writer",
         name="Writer",
         tagline="For writers publishing every week",
-        price_monthly_usd=19,
+        price_monthly_usd=25,
         sources=3,
         indexed_posts=500,
         audio_minutes=60,
@@ -89,9 +92,17 @@ PLANS: dict[str, Plan] = {
 }
 
 
+def annual_prices(plan: Plan) -> tuple[float, float]:
+    """(effective monthly price, total billed per year) on annual billing."""
+    per_month = round(plan.price_monthly_usd * (1 - ANNUAL_DISCOUNT), 2)
+    return per_month, round(per_month * 12, 2)
+
+
 def plan_dict(plan: Plan) -> dict:
     data = asdict(plan)
     data["features"] = list(plan.features)
+    data["price_annual_monthly_usd"], data["price_annual_usd"] = annual_prices(plan)
+    data["annual_discount"] = ANNUAL_DISCOUNT
     return data
 
 

docs/DESIGN.md

@@ -205,12 +205,12 @@ signatures so the schema contract is fixed early.
 
 | | Free | Writer | Studio |
 | --- | --- | --- | --- |
-| Price (when billing turns on) | $0 | $19/mo | $49/mo |
+| Price (when billing turns on) | $0 | $25/mo ($18.75/mo billed annually) | $49/mo ($36.75/mo billed annually) |
 | Sources | 1 | 3 | 10 |
-| Indexed posts | 50 | 500 | 5,000 |
-| Audio overview minutes / mo | 10 | 60 | 240 |
-| Video render minutes / mo | 3 | 30 | 120 |
-| Launch Kits / mo | 5 | 50 | unlimited |
+| Indexed posts | 5 | 500 | 5,000 |
+| Audio overview minutes / mo | 3 | 60 | 240 |
+| Video render minutes / mo | 1 | 30 | 120 |
+| Launch Kits / mo | 2 | 50 | unlimited |
 | Voice profile | yes | yes | yes |
 | Voice cloning (with consent) | no | yes | yes |
 | Brand kit, no watermark | no | yes | yes |

frontend/src/components/PricingTiers.tsx

@@ -8,9 +8,15 @@ type Plan = {
   name: string;
   tagline: string;
   price_monthly_usd: number;
+  price_annual_monthly_usd?: number;
+  price_annual_usd?: number;
   features: string[];
 };
 
+type Cycle = "monthly" | "annual";
+
+const ANNUAL_DISCOUNT = 0.25;
+
 // Mirrors backend app/services/plans.py so the page renders before (or without) the API.
 const FALLBACK: Plan[] = [
   {
@@ -19,17 +25,18 @@ const FALLBACK: Plan[] = [
     tagline: "For trying Notestack on your archive",
     price_monthly_usd: 0,
     features: [
-      "1 source, 50 indexed posts",
+      "1 source, your 5 latest posts",
       "Grounded research chat with citations",
-      "10 min of audio overviews a month",
-      "5 Launch Kits a month",
+      "3 min of audio overviews a month",
+      "1 min of video a month",
+      "2 Launch Kits a month",
     ],
   },
   {
     id: "writer",
     name: "Writer",
     tagline: "For writers publishing every week",
-    price_monthly_usd: 19,
+    price_monthly_usd: 25,
     features: [
       "3 sources, 500 indexed posts",
       "60 min of audio overviews a month",
@@ -55,9 +62,22 @@ const FALLBACK: Plan[] = [
   },
 ];
 
+function money(n: number): string {
+  return Number.isInteger(n) ? `$${n}` : `$${n.toFixed(2)}`;
+}
+
+function annualMonthly(plan: Plan): number {
+  return plan.price_annual_monthly_usd ?? Math.round(plan.price_monthly_usd * (1 - ANNUAL_DISCOUNT) * 100) / 100;
+}
+
+function annualTotal(plan: Plan): number {
+  return plan.price_annual_usd ?? Math.round(annualMonthly(plan) * 12 * 100) / 100;
+}
+
 export default function PricingTiers() {
   const [plans, setPlans] = useState<Plan[]>(FALLBACK);
   const [billingEnabled, setBillingEnabled] = useState(false);
+  const [cycle, setCycle] = useState<Cycle>("monthly");
 
   useEffect(() => {
     api<{ billing_enabled: boolean; plans: Plan[] }>("/api/billing/plans")
@@ -72,33 +92,46 @@ export default function PricingTiers() {
 
   return (
     <div className="pricing">
-      {!billingEnabled && (
-        <p className="pricing-note">
-          <span className="badge">Early access</span>
-          <span className="muted">Every plan is free while we are in early access. No card needed.</span>
-        </p>
-      )}
+      <div className="pricing-top">
+        {!billingEnabled && (
+          <p className="pricing-note">
+            <span className="badge">Early access</span>
+            <span className="muted">Every plan is free while we are in early access. No card needed.</span>
+          </p>
+        )}
+        <div className="cycle-toggle" role="radiogroup" aria-label="Billing cycle">
+          <button type="button" role="radio" aria-checked={cycle === "monthly"} className={cycle === "monthly" ? "on" : ""} onClick={() => setCycle("monthly")}>
+            Monthly
+          </button>
+          <button type="button" role="radio" aria-checked={cycle === "annual"} className={cycle === "annual" ? "on" : ""} onClick={() => setCycle("annual")}>
+            Annual <span className="save mono">Save 25%</span>
+          </button>
+        </div>
+      </div>
       <div className="pricing-grid">
         {plans.map((plan) => {
           const featured = plan.id === "writer";
+          const free = plan.price_monthly_usd === 0;
+          const annual = cycle === "annual" && !free;
           return (
             <article key={plan.id} className={`card tier${featured ? " tier-featured active" : ""}`}>
               {featured && <span className="badge tier-flag">Most popular</span>}
               <h3>{plan.name}</h3>
               <p className="muted tier-tagline">{plan.tagline}</p>
               <p className="tier-price">
-                {billingEnabled || plan.price_monthly_usd === 0 ? (
-                  <>
-                    <span className="tier-amount">${plan.price_monthly_usd}</span>
-                    <span className="muted">/month</span>
-                  </>
+                {free ? (
+                  <span className="tier-amount">Free</span>
                 ) : (
                   <>
-                    <span className="tier-amount">$0</span>
-                    <span className="muted tier-strike">${plan.price_monthly_usd}/month later</span>
+                    {annual && <span className="tier-was muted">{money(plan.price_monthly_usd)}</span>}
+                    <span className="tier-amount">{money(annual ? annualMonthly(plan) : plan.price_monthly_usd)}</span>
+                    <span className="muted">/month</span>
                   </>
                 )}
               </p>
+              <p className="mono muted tier-billing">
+                {free ? "Free forever" : annual ? `${money(annualTotal(plan))} billed yearly` : "Billed monthly"}
+              </p>
               <ul className="tier-features">
                 {plan.features.map((f) => (
                   <li key={f}>
@@ -108,7 +141,7 @@ export default function PricingTiers() {
                 ))}
               </ul>
               <Link to="/auth?mode=signup" className={`btn ${featured ? "btn-primary" : ""} tier-cta`}>
-                {billingEnabled && plan.price_monthly_usd > 0 ? `Choose ${plan.name}` : "Start free"}
+                {billingEnabled && !free ? `Choose ${plan.name}` : "Start free"}
               </Link>
             </article>
           );

frontend/src/styles/showcase.css

@@ -519,3 +519,68 @@
 .demo-unmute:hover {
   background: var(--blue);
 }
+
+/* Pricing: billing cycle toggle */
+.pricing-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.pricing-top .pricing-note {
+  margin: 0;
+}
+
+.cycle-toggle {
+  display: inline-flex;
+  padding: 4px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.cycle-toggle button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 16px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-2);
+  font: 600 0.875rem var(--font-body);
+  cursor: pointer;
+}
+
+.cycle-toggle button.on {
+  background: var(--blue);
+  color: var(--white);
+  box-shadow: var(--glow-sm);
+}
+
+.cycle-toggle .save {
+  padding: 1px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--blue-60);
+  font-size: 0.65rem;
+  color: var(--white);
+}
+
+.cycle-toggle button.on .save {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+
+.tier-was {
+  margin-right: 8px;
+  font-size: 1.1rem;
+  text-decoration: line-through;
+  text-decoration-color: var(--blue);
+}
+
+.tier-billing {
+  font-size: 0.72rem;
+  margin-top: -4px;
+}

renderer/src/compositions/LandingDemo.tsx

@@ -23,6 +23,37 @@ const SCENES = [
 ] as const;
 const XFADE = 0.5; // seconds of overlap between scenes
 
+// Narration clip lengths (public/demo-vo/durations.json) so the music can duck under the voice.
+const VO_SECONDS: Record<(typeof SCENES)[number]["id"], number> = {
+  warp: 3.79, paste: 3.27, orbit: 6.3, research: 4.29, audio: 3.74, launchkit: 6.53, launchpad: 3.22, outro: 2.48,
+};
+
+/** Frame ranges where the narrator is speaking, in composition time. */
+const VO_WINDOWS: [number, number][] = (() => {
+  let cursor = 0;
+  return SCENES.map((scene) => {
+    const start = cursor + scene.vo;
+    cursor += scene.len - XFADE;
+    return [Math.round(start * 30), Math.round((start + VO_SECONDS[scene.id]) * 30)] as [number, number];
+  });
+})();
+
+const MUSIC = 0.5;
+const MUSIC_DUCKED = 0.17;
+
+/** Music level: full between lines, eased down around each line (0.3 s ramps). */
+function musicVolume(frame: number): number {
+  const ramp = 9;
+  let level = MUSIC;
+  for (const [a, b] of VO_WINDOWS) {
+    if (frame >= a - ramp && frame <= b + ramp) {
+      const into = interpolate(frame, [a - ramp, a, b, b + ramp], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+      level = Math.min(level, MUSIC - (MUSIC - MUSIC_DUCKED) * into);
+    }
+  }
+  return level;
+}
+
 export const DEMO_DURATION = S(SCENES.reduce((n, s) => n + s.len, 0) - XFADE * (SCENES.length - 1));
 
 const BLUE = theme.blue;
@@ -518,7 +549,7 @@ export function LandingDemo() {
   let cursor = 0;
   return (
     <AbsoluteFill style={{ backgroundColor: theme.black }}>
-      <SoundTrack src={staticFile("demo-vo/ambience.wav")} volume={0.32} />
+      <SoundTrack src={staticFile("demo-vo/music.wav")} volume={musicVolume} />
       {SCENES.map((scene, i) => {
         const from = cursor;
         cursor += S(scene.len - XFADE);