The canonical UX reference for the DandyLine app's bottom navigation (TAB1-family). All four tabs, every animation, every easing curve — final and ready to port verbatim into React. Folded into V4-PORT-SPEC.md §1 + entered in biz-dev-decisions-log.md. HW#183 resolved.
Final notes · what this is
✅ The canonical reference for the DandyLine app's bottom navigation. Locked end-to-end — every SVG path, every keyframe, every easing curve is final and ready to port verbatim into React.
📐 Engineering port spec:dandyline-app/V4-PORT-SPEC.md §1 — points back to this file as the source of truth.
📜 Decision rationale:biz-dev-decisions-log.md 2026-05-03 entry — what was locked, why, what was rejected.
📋 Homework: HW#183 (Tab nav micro-interaction layer) marked ✅ RESOLVED in biz-dev-homework.html.
🔮 Phase 2 (not in this lock): the inline Plant Composer that appears AFTER the FAB is tapped (HW#187) and the long-press → full planting flow. V1 React port wires onPlant to the existing Create Vault modal as placeholder.
Tap any tab. Field's dot-breath + Plant FAB pulse + Gardener seeds drifting are always-on.
your field view
Field always-on
7 dots breathe in opacity (55% → 100% → 55%) on a 3.5s cycle, each dot offset so they pulse out of sync. Active state breathes at higher baseline (85% → 100%) so the active tab feels stronger.
Pressed on tap
Closed book + faint dandelion marks at rest. Tap → cover fades to 30% + pressed dandelion silhouettes appear inside both pages. Tap again to close. 400ms breath curve.
Plant FAB always-on + on tap
60px gold gradient with cream rim + outer halo ring. The shadow + halo both pulse on a 3.6s breath. Tap → scales to 0.92 + emits a gold-light seed that drifts upward.
Gardener always-on + on tap
Two tiny dandelion seeds drift upward + outward from above the head, rotating gently, fading in/out on a 5.5s loop (offset). On tap both re-trigger together with a slightly stronger arc. Reads as exhaling.
The full motion budget · what's in, what's not
Always-on motion (3 sources) — Field dot breath · Plant FAB pulse + halo · Gardener drifting seeds. These are signature; they tell you the bar is alive.
On-tap motion (every tab) — D-Ring ripple per MOTION-SPEC A2 + the Petal active indicator transition (700ms breath curve).
On-tap motion (specific) — Pressed book opens. Plant FAB scales + emits seed. Gardener seeds re-trigger.
NOT in — no traveling indicator between tabs (per HW#183 reversal lesson). No liquid blob. No hover-only animations (mobile-first). No icon swap on active.
If this feels right — say "lock it" and I'll fold the SVG paths + animation CSS verbatim into V4-PORT-SPEC.md §1 so the React port is mechanical.
2026-05-03 · v4 final iterations — Gardener seed positioning fixed: CSS transform on SVG <g> was overriding the SVG transform attribute, causing seeds to render at viewport (0,0) and be clipped. Resolved by wrapping each seed in an outer <g transform="..."> for positioning + inner <g class="seed-blow"> for animation. Then tuned final positions to translate(12.5, 13) and (14.5, 12.5) with opacity ramping fast (0.6 by 8% of cycle, 1.0 by 18%) so seeds appear from the mouth and float up to the top line of the nav (translate up to -13px).
2026-05-03 · v4 polish — Field opacity-only animation didn't paint reliably on SVG circles → wrapped each dot in <g class="dot dN"> so transform-based float animates correctly. Added overflow:hidden on Gardener SVG so seeds stay bounded (not bumping the nav top border). Tap ripple softened: 900ms (was 600ms), peak opacity 0.32 (was 0.55), 0.6px blur added.
2026-05-03 · v3 → v4 transition — Q5-v3 had 3 picker cards for Pressed icon variants and 4 picker cards for Gardener icon variants. Ashley picked: Closed-book-with-faint-dandelion-marks (Pressed) + Profile-with-drifting-seed (Gardener Variant B). v4 baked those choices in + addressed v3 feedback ("Field has no animation," "Plant needs more glow," "Gardener feels like rocket-ship," "clicks feel harsh").
2026-05-03 · v2 → v3 — Petal active indicator picked from 4 options (baseline / Petal / Sunrise / Pollen). Q5-v2 introduced the soft-A+B-combined exploration + DandyLine breath easing curve at 700ms (vs the snappy 250ms baseline).
2026-05-03 · v1 origin — Q5-v1 was the original 3-option side-by-side comparison for active-tab indicator (sliding underline / icon scale + glow / inactive drift). Ashley picked "do A & B together but softer" — that response triggered the Petal exploration in v2.