// v5 — Featured showcase (single hero case study) // Replaces multi-card "Recent Work" with one carefully composed showcase: // · inline video player as primary action (watch the film) // · strategy laid out on the right (unstable idea · audience · system) // · orthogonal artifact tiles below (brand · DS · dashboard · mobile · research) // · "See the full case study" as the secondary action const FEATURED = { slug: "outdoorsy", client: "Outdoorsy", year: "2022–24", role: "Host platform · brand · cross-platform design system", title: "A category-defining platform rebuilt around the people who make it possible.", film: { duration: "3:42", chapters: [ { t: "00:00", label: "Cold open · the host" }, { t: "00:42", label: "The unstable idea" }, { t: "01:18", label: "Audience problem" }, { t: "02:05", label: "The system" }, { t: "03:08", label: "Artifacts" }] }, href: "showcase.html", strategy: [ { id: "unstable", label: "The unstable idea", body: "A marketplace whose supply side — the hosts — wasn't centered anywhere in the brand or the product. Growth depended on them, but the experience didn't feel built for them." }, { id: "audience", label: "The audience problem", body: "Hosts running real businesses on the platform, plus the internal product, design, and engineering teams who had been shipping out of separate playbooks across Android, iOS, and web." }, { id: "system", label: "The system I shaped", body: "A warmer host-centered brand refresh, a cross-platform design system with shared tokens and patterns, and prototyped host tooling — delivered as DRI inside the team, not next to it." }], artifacts: [ { id: "brand", label: "Brand refresh", note: "Photography · Art Direction · Voice", kind: "brand", img: "src/assets/od-art-1-brand.jpg" }, { id: "system", label: "Design system", note: "Tokens · components · docs", kind: "system", img: "src/assets/od-art-2-system.jpg" }, { id: "dashboard", label: "Host dashboard", note: "Earnings · reservations", kind: "dashboard", img: "src/assets/od-art-3-dashboard.jpg" }, { id: "mobile", label: "Mobile experience", note: "iOS · Android · parity", kind: "mobile", img: "src/assets/od-art-4-mobile.jpg" }, { id: "research", label: "Host research", note: "Field · diary · interviews", kind: "research", img: "src/assets/od-art-5-research.jpg" }] }; // ===================================================================== // FILM POSTER — bespoke SVG for the inline video player // Outdoorsy mood: mountain road, RV, copper sun, dusty grain // ===================================================================== const V5FilmPoster = () => ; // ===================================================================== // ARTIFACT TILE — small thumbnail used in the orthogonal row below // ===================================================================== const V5ArtifactTile = ({ kind }) => { if (kind === "brand") return ( ); if (kind === "system") return ( ); if (kind === "dashboard") return ( ); if (kind === "mobile") return ( ); if (kind === "research") return ( ); return null; }; // ===================================================================== // LAYER ICONS — matches the small visual marks from the reference // ===================================================================== const V5StratIcon = ({ kind }) => { const C = { width: 28, height: 28, viewBox: "0 0 24 24", "aria-hidden": "true" }; if (kind === "unstable") return ( ); if (kind === "audience") return ( ); if (kind === "system") return ( ); return null; }; // ===================================================================== // MAIN — V5Featured // ===================================================================== const V5Featured = () => { const [playing, setPlaying] = React.useState(false); const [seconds, setSeconds] = React.useState(0); const [duration, setDuration] = React.useState(222); // 3:42 fallback until metadata loads const total = duration; const ref = useRef(null); const videoRef = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) {setSeen(true);io.disconnect();} }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); const togglePlay = () => { const v = videoRef.current; if (!v) return; if (v.paused) {v.play().catch(() => {});} else {v.pause();} }; const fmt = (s) => `${String(Math.floor(s / 60)).padStart(1, "0")}:${String(s % 60).padStart(2, "0")}`; const pct = seconds / total * 100; return (

{/* Vertical rail — DESIGN · RESEARCH · SYSTEMS · SIGNAL */} {/* Section header — Featured eyebrow */}

01 Featured project · 2026 selection

—

One project carries the practice better than a chronology. A category-defining marketplace, rebuilt around the people whose work the rest of the platform depends on — brand, product, design system, and host tooling, shaped end to end.

{/* Main showcase row — film / narrative */}

{/* LEFT — inline video player */}

Outdoorsy product designer view — Bonfire Design System

{/* Actual video — sits above the poster image, uses the still as its poster frame */}

{/* Play overlay — primary action */} {/* Slate corner — top-left */}

{playing ? "PLAYING" : "READY"} CASE FILM · {FEATURED.client.toUpperCase()} · {FEATURED.year}

{/* Scrub bar — bottom */}

{FEATURED.film.chapters.map((c, i) => { const cs = parseInt(c.t.split(":")[0]) * 60 + parseInt(c.t.split(":")[1]); return ( ); })}

{fmt(seconds)} {FEATURED.film.duration}

{/* RIGHT — meta · title · strategy · cta */}

{/* Meta tri-column (matches the reference's CLIENT / YEAR / ROLE row) */}

Client: {FEATURED.client}
Year: {FEATURED.year}
Role: {FEATURED.role}

{/* Big editorial title */}

{/* Strategy stack */}

{FEATURED.strategy.map((s, i) =>

{s.label}

{s.body}

)}

{/* Secondary CTA — full case study */} See the full case study

{/* Orthogonal artifacts — separate, linked pieces */}

— Artifacts Five orthogonal pieces · open any chapter

{FEATURED.artifacts.map((a, i) =>

{a.label}

{String(i + 1).padStart(2, "0")} {a.label} {a.note} )}

{/* Decorative crosshair — bottom-right (echoes the reference) */}

); }; Object.assign(window, { V5Featured, V5FilmPoster, V5ArtifactTile, V5StratIcon, FEATURED_PROJECT: FEATURED });