Hero: 30-phrase daily rotation + themed-day overrides + slower drift

Three changes packaged together:

1. Daily phrase rotation. New src/lib/hero-phrases.ts holds 30 phrases
   in three groups (invitations, place/atmosphere, time/scope). Two
   phrases compute live counts from the manifest so they stay accurate
   as content grows ("12 dawn choruses", "150+ voices"). Picked
   deterministically per calendar day.

2. Themed-day overrides. New src/lib/themed-days.ts. Recurring
   anniversaries keyed by MM-DD (solstices, Earth Day, Halloween for
   the owls, etc.) and specific multi-day windows keyed by YYYY-MM-DD
   (Pt. Reyes Birding Festival, currently scheduled Apr 16-18 2027 —
   updated annually as new dates are announced). When a themed day
   matches today, its phrase replaces the rotation pick.

3. Shared daily-pick helper. New src/lib/daily-pick.ts factors out
   the FNV-1a + todayStr() + dailyPick() pattern that BirdOfTheDay
   already used. The hero rotation salts its pick with "hero" so the
   index varies independently of the bird-of-the-day picker.

4. Hero fog drift slowed by ~2x — back layer 60s -> 120s/cycle,
   mid-back 45s -> 90s/cycle. Was fine but borderline noticeable;
   doubled durations push it firmly into "atmosphere not motion".

Author: mogglemoss

src/components/Hero.tsx

@@ -1,11 +1,19 @@
+import { useMemo } from "react";
 import { motion, useReducedMotion } from "framer-motion";
+import { dailyPick } from "@/lib/daily-pick";
+import { HERO_PHRASES, resolvePhrase } from "@/lib/hero-phrases";
+import { pickThemedDay } from "@/lib/themed-days";
 
 /**
  * Restrained atmospheric band that sits below the sticky StickyTopBar.
  * Decorative-only: small caps label + display headline + coordinates +
  * four layers of rolling hills + tiny bird silhouettes. No interactive
  * controls — those live in StickyTopBar so they pin to the top on scroll.
  *
+ * The headline rotates daily through HERO_PHRASES; calendar-themed days
+ * (solstices, Earth Day, the Pt. Reyes Birding Festival window) override
+ * the rotation when they match. Pick is deterministic per calendar day.
+ *
  * The back two fog layers drift slowly horizontally (parallax depth);
  * the front two stay static so the foreground doesn't pull the eye away
  * from the title block above. Drift is disabled under
@@ -23,6 +31,15 @@ export function Hero() {
           transition: { duration: durationSec, ease: "linear" as const, repeat: Infinity, repeatType: "loop" as const },
         };
 
+  // Daily phrase: themed override beats rotation. Memoized once per mount —
+  // page won't shift the headline mid-session, only on a future day's load.
+  const phrase = useMemo(() => {
+    const themed = pickThemedDay();
+    if (themed) return themed.phrase;
+    const pick = dailyPick(HERO_PHRASES, "hero");
+    return pick ? resolvePhrase(pick) : "Pick a habitat.";
+  }, []);
+
   return (
     <section className="relative -mx-5 mb-2 overflow-hidden border-b border-(--color-line) bg-gradient-to-b from-(--color-bg) via-(--color-sand-50)/40 to-(--color-moss-50)/60 px-5 pb-24 pt-2 sm:pb-28 dark:via-(--color-sand-50)/30 dark:to-(--color-moss-50)/40">
       {/* Tiny decorative birds, upper-left */}
@@ -40,7 +57,7 @@ export function Hero() {
           West Marin · Ear Training
         </p>
         <h1 className="mt-2 font-display text-4xl leading-[1.05] tracking-tight sm:text-5xl">
-          Pick a habitat.
+          {phrase}
         </h1>
         <p className="mt-2 font-mono text-[10px] tracking-[0.2em] text-(--color-ink-soft)" title="Paper Mill Creek Saloon, Forest Knolls">
           38°00′52″N · 122°41′44″W
@@ -59,9 +76,9 @@ export function Hero() {
         viewBox="0 0 800 100"
         preserveAspectRatio="none"
       >
-        {/* Back fog — palest, broad waves, slowest drift (60s/cycle).
+        {/* Back fog — palest, broad waves, slowest drift (120s/cycle).
             Path duplicated at +800 so the loop seam is invisible. */}
-        <motion.g {...drift(60)}>
+        <motion.g {...drift(120)}>
           <path
             d="M0,48 Q 100,22 200,48 T 400,48 T 600,48 T 800,48 L 800,100 L 0,100 Z"
             fill="oklch(93% 0.03 160 / 0.55)"
@@ -73,8 +90,8 @@ export function Hero() {
           />
         </motion.g>
         {/* Mid-back — phase-shifted so its peaks fall in back's valleys.
-            Faster drift (45s) than back layer for parallax depth. */}
-        <motion.g {...drift(45)}>
+            Faster drift (90s) than back layer for parallax depth. */}
+        <motion.g {...drift(90)}>
           <path
             d="M0,64 Q 80,42 180,62 T 380,62 T 580,62 T 800,64 L 800,100 L 0,100 Z"
             fill="oklch(85% 0.04 160 / 0.7)"

src/lib/daily-pick.ts

@@ -0,0 +1,39 @@
+/**
+ * Date-seeded deterministic picks. The same calendar day always returns
+ * the same result, so refresh-stability is automatic and there's no
+ * need for any persistence layer.
+ *
+ * Used by:
+ *   - BirdOfTheDay        (species pool, no salt)
+ *   - Hero phrase rotation (phrase pool, salt = "hero")
+ *   - anything else that wants "today's X" picked from a stable pool
+ */
+
+/** Deterministic FNV-1a-ish hash of a string → non-negative 32-bit int. */
+export function hashStr(s: string): number {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+
+/**
+ * "YYYY-M-D" — note: NOT zero-padded. Don't change the format casually;
+ * any existing date hashes (BirdOfTheDay, etc.) depend on it.
+ */
+export function todayStr(d: Date = new Date()): string {
+  return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+}
+
+/**
+ * Stable daily pick from a pool. The optional `salt` lets multiple
+ * pickers vary independently on the same date — pass different salts
+ * (e.g. "hero" vs "" for bird-of-the-day) so the indexes don't lock
+ * in lockstep.
+ */
+export function dailyPick<T>(pool: readonly T[], salt = ""): T | null {
+  if (pool.length === 0) return null;
+  return pool[hashStr(todayStr() + salt) % pool.length];
+}

src/lib/hero-phrases.ts

@@ -0,0 +1,63 @@
+/**
+ * The 30 phrases that rotate through the Hero section's headline slot.
+ * Picked deterministically per calendar day via dailyPick().
+ *
+ * Mix of:
+ *   - imperatives / invitations (1-10)
+ *   - place & atmosphere (11-20) — leans West-Marin-specific
+ *   - time, scope, meta (21-30) — counts read live from the manifest
+ *
+ * Phrases can be plain strings OR thunks that compute live values
+ * from the manifest (so habitat / species counts stay accurate as
+ * content grows).
+ */
+
+import { units, allSpeciesWithRecordings } from "./manifest";
+
+type Phrase = string | (() => string);
+
+const roundDown = (n: number, to: number) => Math.floor(n / to) * to;
+
+export const HERO_PHRASES: Phrase[] = [
+  // Invitations
+  "Pick a habitat.",
+  "Open your ears.",
+  "Listen, then look.",
+  "Whose call is that?",
+  "Know that one?",
+  "Can you place it?",
+  "Tune your ear.",
+  "Start anywhere.",
+  "Learn the locals.",
+  "Bring your morning ears.",
+
+  // Place & atmosphere
+  "The hills are talking.",
+  "The fog is talking.",
+  "The marsh is awake.",
+  "The redwoods speak first.",
+  "The wood is singing.",
+  "Quail country.",
+  "Wrentit weather.",
+  "Pasture light.",
+  "Coast to ridge.",
+  "From driveway to ridgetop.",
+
+  // Time, scope, meta — counts live from the manifest so they
+  // stay accurate as content grows.
+  () => `${units.length} dawn choruses.`,
+  () => `${roundDown(allSpeciesWithRecordings().length, 10)}+ voices.`,
+  "Two-note morning.",
+  "Dawn is loud.",
+  "Owl-light hour.",
+  "Coffee, then call notes.",
+  "Pre-dawn, post-coffee.",
+  "A song for every habitat.",
+  "Listen at home; watch in the field.",
+  "Your ears, the field guide.",
+];
+
+/** Resolve a phrase to a string (calling thunks if present). */
+export function resolvePhrase(p: Phrase): string {
+  return typeof p === "function" ? p() : p;
+}

src/lib/themed-days.ts

@@ -0,0 +1,60 @@
+/**
+ * Curated calendar-date overrides for the Hero phrase. When a themed day
+ * matches today's date, its phrase appears INSTEAD of the daily-rotation
+ * pick. Used for:
+ *
+ *   - Civic / nature dates that recur every year (Earth Day, solstices,
+ *     Halloween for the owls). Keyed by "MM-DD".
+ *   - Specific multi-day windows that move year-to-year (Pt. Reyes
+ *     Birding Festival, etc.). Keyed by "YYYY-MM-DD" range and need
+ *     manual annual updates.
+ */
+
+export interface ThemedDay {
+  phrase: string;
+  /** Optional: also pin the bird-of-the-day to this species id. */
+  speciesId?: string;
+}
+
+/** Anniversaries that fire every year. Keyed by "MM-DD". */
+export const THEMED_EXACT_DAYS: Record<string, ThemedDay> = {
+  "01-01": { phrase: "A new year of birds." },
+  "02-14": { phrase: "Send a love song." },
+  "03-20": { phrase: "First day of spring; first songs." },
+  "04-22": { phrase: "Earth Day. Listen up." },
+  "06-21": { phrase: "Solstice morning. Long, loud chorus." },
+  "10-31": { phrase: "Owls all night." },
+  "12-21": { phrase: "Solstice. The owls have it." },
+  "12-25": { phrase: "Even today, the birds are out." },
+};
+
+/**
+ * Multi-day windows. Update annually as event dates are announced.
+ * `from` and `to` are inclusive "YYYY-MM-DD" strings.
+ *
+ * Pt. Reyes Birding & Nature Festival — pointreyesbirdingfestival.org.
+ * Three-day weekend in mid-to-late April. Past:
+ *   2026: Apr 24–26
+ *   2027: Apr 16–18  ← scheduled
+ */
+export const THEMED_RANGES: Array<{ from: string; to: string; day: ThemedDay }> = [
+  { from: "2027-04-16", to: "2027-04-18",
+    day: { phrase: "The Pt. Reyes Birding Festival is on." } },
+];
+
+/** Pick today's themed override, if any. Returns null on a regular day. */
+export function pickThemedDay(d: Date = new Date()): ThemedDay | null {
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+
+  // Anniversaries first
+  const exact = THEMED_EXACT_DAYS[`${mm}-${dd}`];
+  if (exact) return exact;
+
+  // Then specific-year ranges
+  const today = `${d.getFullYear()}-${mm}-${dd}`;
+  for (const r of THEMED_RANGES) {
+    if (today >= r.from && today <= r.to) return r.day;
+  }
+  return null;
+}