// SIGNAL — Fuel Talent homepage // Editorial-techno: Space Grotesk (display) + Geist Mono (meta) + cream/ink/rust const { useState, useEffect, useRef, useMemo, useCallback } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#b94a1f", "theme": "light", "typeMode": "geo-mono" }/*EDITMODE-END*/; const ACCENTS = { rust: { color: "#b94a1f", label: "Rust" }, forest: { color: "#1f6b3a", label: "Forest" }, blue: { color: "#1e4ed8", label: "Electric" }, amber: { color: "#c98c1a", label: "Amber" }, }; // ─── content ──────────────────────────────────────────────────────────── const NAV = [ { label: "Expertise", href: "#expertise", panel: "expertise" }, { label: "Services", href: "#services", panel: "services" }, { label: "Resources", href: "#resources", panel: "resources" }, { label: "Find a Job", href: "jobs.html", panel: null, noUnderline: true }, { label: "About", href: "#about", panel: null, noUnderline: true }, ]; const EXPERTISE = [ { id: "tech", short: "Tech", title: "Tech & Engineering", blurb: "Software, infra, ML, security and platform leaders for high-growth tech.", glyph: "Σ" }, { id: "design", short: "Design", title: "Design & UX Research", blurb: "Product designers, design systems leads, and research-led practitioners.", glyph: "◐" }, { id: "product", short: "Product", title: "Product", blurb: "PMs and product leadership who can ship inside ambiguity.", glyph: "△" }, { id: "marketing",short: "Marketing", title: "Marketing", blurb: "Growth, brand, content and demand-gen operators for B2B and consumer.", glyph: "◉" }, { id: "csuite", short: "C-Suite", title: "C-Suite", blurb: "Founder, CEO, CTO, CPO and CFO searches for venture-backed companies.", glyph: "✕" }, { id: "admin", short: "Admin", title: "Admin & Lifestyle", blurb: "Executive assistants, chiefs of staff and household operators.", glyph: "✦" }, { id: "hrops", short: "HR & Ops", title: "HR & Operations", blurb: "People leaders, recruiters, biz-ops and program managers.", glyph: "⌘" }, { id: "finance", short: "Finance", title: "Finance & Accounting", blurb: "Controllers, FP&A, CFOs and finance operators ready to scale.", glyph: "$" }, ]; const SERVICES = [ { num: "01", title: "Recruiting & Staffing", blurb: "Permanent and contract hires across engineering, design, product and operations. We average 18 days to offer and close 91% of extended offers." }, { num: "02", title: "Professional & Managed Services", blurb: "Embedded teams of senior specialists who execute critical initiatives or run ongoing operations end-to-end." }, { num: "03", title: "Digital Workers", blurb: "An AI-fueled workforce of digital agents that automates repetitive work — so your humans can do the hard thinking." }, ]; const TESTIMONIALS = [ { quote: "Fuel consistently takes the time to learn what's needed from an open role, how it fits within the team, and the qualities that will help a candidate thrive.", name: "CHRO", role: "Think Tank / Executive Private Office", initials: "TT" }, { quote: "We have worked with Fuel for our top technical hiring efforts. They are incredibly responsive, adaptable and a valuable partner that delivers results.", name: "Beth Mead", role: "Providence", initials: "BM" }, { quote: "Continuous improvement is in your DNA. The experience and the vision I had before working with your team was exactly what I'd hoped for.", name: "Casey Bayless", role: "Moss Adams — Recruiting Manager", initials: "CB" }, { quote: "Fuel's ability to consistently present high-quality candidates tailored to our specific needs has been remarkable.", name: "Marc", role: "Co-Founder & CTO", initials: "MC" }, { quote: "We dropped the other firms. Fuel found the most effective candidates for us.", name: "Director of Product Design", role: "Remitly", initials: "RT" }, ]; const CLIENT_WORDMARKS = [ { name: "Providence", render: () => Providence }, { name: "Moss Adams", render: () => MOSS ADAMS }, { name: "Appen", render: () => appen }, { name: "Remitly", render: () => Remitly }, { name: "Whitepages", render: () => whitepages }, { name: "Madrona", render: () => Madrona }, { name: "RealSelf", render: () => realself }, { name: "KnowLabs", render: () => knowlabs }, { name: "Pacagen", render: () => Pacagen }, ]; const JOBS_PREVIEW = [ { id: "FT-0481", title: "Staff Software Engineer, Platform", company: "Series C SaaS", loc: "Seattle, WA · Hybrid", type: "Direct Hire", area: "Tech" }, { id: "FT-0476", title: "Senior Product Designer", company: "AI Health Startup", loc: "Remote (US)", type: "Direct Hire", area: "Design" }, { id: "FT-0470", title: "Director of Product, Growth", company: "Consumer Marketplace", loc: "Bellevue, WA", type: "Direct Hire", area: "Product" }, { id: "FT-0463", title: "Head of Recruiting", company: "Climate Tech", loc: "Seattle, WA · Onsite", type: "Direct Hire", area: "HR & Ops" }, ]; const RESOURCES = [ { kind: "Field Notes", title: "10 strategies for attracting top talent in a thin market", read: "5 min", date: "May 12" }, { kind: "Field Notes", title: "Streamlining the virtual onboarding process", read: "4 min", date: "Apr 29" }, { kind: "Candidates", title: "Affected by mass layoffs? Where to start and regain confidence", read: "6 min", date: "Apr 14" }, { kind: "Case Study", title: "How we built an engineering team from zero to 40 in 11 months", read: "8 min", date: "Mar 30" }, ]; const ROLES_PERSONALIZE = [ { id: "eng", label: "Engineering", meta: "48 hr to candidates", line: "Engineers" }, { id: "design", label: "Design & UX", meta: "Specialist network", line: "Designers" }, { id: "product", label: "Product", meta: "PM-led search team", line: "Product leaders" }, { id: "leader", label: "Leadership", meta: "Confidential C-suite", line: "Executives" }, { id: "candidate", label: "I'm looking", meta: "Career partner", line: "Your next role" }, ]; const STAGES = ["Seed", "Series A", "Series B", "Series C+", "Public", "Private Office"]; // ─── helpers ──────────────────────────────────────────────────────────── function useScrollProgress() { const [p, setP] = useState(0); useEffect(() => { const on = () => { const max = document.documentElement.scrollHeight - window.innerHeight; setP(Math.min(1, Math.max(0, window.scrollY / Math.max(1, max)))); }; on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); return p; } function useInView(opts = {}) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current || seen) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.3, ...opts }); io.observe(ref.current); return () => io.disconnect(); }, [seen]); return [ref, seen]; } function CountUp({ to, suffix = "", duration = 1400, decimals = 0 }) { const [ref, seen] = useInView(); const [v, setV] = useState(0); useEffect(() => { if (!seen) return; const start = performance.now(); let raf; const tick = (t) => { const k = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - k, 3); setV(to * eased); if (k < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [seen, to, duration]); return {v.toFixed(decimals)}{suffix}; } // ─── geometric SVG art ────────────────────────────────────────────────── function ArtConcentric({ accent }) { return ( {Array.from({ length: 22 }).map((_, i) => ( ))} FIT · 0.96 FIG.01 — FIT MODEL ); } function ArtGrid({ accent }) { return ( {Array.from({ length: 14 }).map((_, r) => Array.from({ length: 14 }).map((__, c) => { const cx = 30 + c * 26, cy = 30 + r * 26; const dist = Math.hypot(cx - 200, cy - 200); const k = Math.max(0, 1 - dist / 220); const size = 1 + k * 7; const isAccent = (r === 7 && c === 7) || (r === 5 && c === 9); return ; }) )} FIG.02 — NETWORK DENSITY ); } function ArtTopo({ accent }) { const paths = []; for (let i = 0; i < 18; i++) { let d = `M 0 ${40 + i * 18} `; for (let x = 0; x <= 400; x += 20) { const y = 40 + i * 18 + Math.sin(x * 0.024 + i * 0.6) * (8 + (i % 4)) + Math.cos(x * 0.01 + i) * 4; d += `L ${x} ${y.toFixed(1)} `; } paths.push(d); } return ( {paths.map((d, i) => ( ))} FIG.03 — TALENT TOPOGRAPHY ); } function ArtBars({ accent }) { const data = [12, 18, 9, 24, 32, 28, 41, 38, 52, 47, 62, 58, 71, 79, 91]; return ( {data.map((v, i) => { const h = v * 3.2; const x = 30 + i * 24; const y = 340 - h; const isLast = i >= data.length - 3; return ( {String(i + 1).padStart(2, "0")} ); })} FIG.04 — CLOSE RATE OVER 15 SEARCHES · 91% ); } const ART_MAP = { who: ArtConcentric, how: ArtGrid, why: ArtBars, }; function ExpertGlyph({ kind, accent }) { // tiny SVGs per expertise card const stroke = "var(--ink)", op = 0.7; switch (kind) { case "tech": return ; case "design": return ; case "product": return ; case "marketing":return ; case "csuite": return ; case "admin": return ; case "hrops": return ; case "finance": return ; default: return null; } } // ─── nav with mega menu ───────────────────────────────────────────────── function TopNav() { const [open, setOpen] = useState(null); const closeT = useRef(null); const enter = (key) => { clearTimeout(closeT.current); setOpen(key); }; const leave = () => { closeT.current = setTimeout(() => setOpen(null), 120); }; return (
Fuel Talent SEA · EST 2014 For Candidates →
clearTimeout(closeT.current)} onMouseLeave={leave} />
); } function MegaMenu({ open, onMouseEnter, onMouseLeave }) { const panels = { expertise: { eyebrow: "Expertise · 8 practices", cols: [ { head: "Build", items: ["Tech & Engineering", "Product", "Design & UX Research"] }, { head: "Operate", items: ["HR & Operations", "Finance & Accounting", "Admin & Lifestyle"] }, { head: "Lead", items: ["C-Suite", "Marketing"] }, { head: "Featured", items: ["Browse all expertise →", "Submit a role"] }, ], }, services: { eyebrow: "Services · 3 modes", cols: [ { head: "01 — Recruiting & Staffing", items: ["Permanent placement", "Contract & contingent", "Embedded recruiting"] }, { head: "02 — Professional & Managed", items: ["Specialist teams", "Operational coverage", "Project execution"] }, { head: "03 — Digital Workers", items: ["AI agent design", "Workflow automation", "Human + agent hybrids"] }, { head: "Not sure?", items: ["Talk to a strategist →"] }, ], }, resources: { eyebrow: "Fuel for Thought", cols: [ { head: "Field Notes", items: ["Hiring playbooks", "Career guides", "Salary trends 2026"] }, { head: "Case Studies", items: ["Provider case · Providence", "Scale-up case · Pacagen"] }, { head: "Podcast", items: ["Make Them Lose Sleep", "Browse all episodes →"] }, { head: "Subscribe", items: ["Monthly newsletter"] }, ], }, }; const p = open && panels[open]; return (
{p && (
{p.eyebrow}
{p.cols.map((c) => (
{c.head}
))}
)}
); } // ─── hero (interactive personalization) ───────────────────────────────── function Hero() { const [role, setRole] = useState(ROLES_PERSONALIZE[0]); const [stage, setStage] = useState(STAGES[2]); const isCandidate = role.id === "candidate"; return (
N 47°37′ W 122°20′ SEATTLE · WA
EST. 2014 ISSUE Nº 047 MAY · MMXXVI

We fuel
{role.line.toLowerCase()}
for {stage}.

{/* personalize control panel */}
I'm hiring →
{ROLES_PERSONALIZE.map((r) => ( ))}
{role.meta}
{isCandidate ? "I'm at →" : "Company stage →"}
{(isCandidate ? ["Discovery", "Actively interviewing", "Open to new", "Just curious"] : STAGES).map((s) => ( ))}
{isCandidate ? "Confidential" : "Tailored intake"}

Fuel Talent is a Seattle recruiting firm for high-growth companies. From direct hire to embedded teams to AI digital workers — we find the right people and build the right systems for teams that expect more from their talent partner.

{isCandidate ? "Browse open roles" : "Submit a role"}→ How it works→
); } // ─── marquee proof bar ────────────────────────────────────────────────── function Marquee() { const items = [ { num: "48", suf: "hr", lbl: "to first candidate slate" }, { num: "18", suf: "d", lbl: "average time-to-offer" }, { num: "91", suf: "%", lbl: "offer accept rate" }, { num: "300", suf: "+", lbl: "active company partners" }, { num: "10+", suf: "", lbl: "years in market" }, { num: "9", suf: "", lbl: "specialty practices" }, ]; const doubled = [...items, ...items]; return (
{doubled.map((it, i) => ( {it.num}{it.suf} {it.lbl} ))}
); } // ─── clients trust band ───────────────────────────────────────────────── function Clients() { return (
Trusted by category-defining teams · selected partners
{CLIENT_WORDMARKS.map((c, i) => (
{ e.currentTarget.style.background = "#faf6ec"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}> {c.render()}
))}
); } // ─── pillars (Who / How / Why) ────────────────────────────────────────── const PILLARS = [ { id: "who", idx: "01", tab: "Who we fuel", heading: "High-growth teams that value precision and people.", body: "We work with venture-backed startups, scale-ups and innovation-led enterprises. Whether you're building your first engineering team or scaling a mature org, we deliver talent that fits on paper and in culture, values and ambition.", stats: [{ k: "48 hr", v: "to first slate" }, { k: "18 d", v: "median offer time" }, { k: "91%", v: "offer accept rate" }] }, { id: "how", idx: "02", tab: "How we fuel", heading: "A relationship-first process, accelerated by AI.", body: "Discovery, calibration, sourcing, vetting, present. Our consultants pair human judgment with proprietary AI sourcing that surfaces strong candidates outside the obvious channels — and removes the busywork that slows great recruiters down.", stats: [{ k: "5 step", v: "calibrated process" }, { k: "AI-assist", v: "outreach + screening" }, { k: "Human", v: "judgement, end-to-end" }] }, { id: "why", idx: "03", tab: "Why we fuel", heading: "We build legacies, not just fill roles.", body: "We close 91% of extended offers because we don't push the wrong fits across the finish line. We invest in the long-term relationship with both sides — and that compounds.", stats: [{ k: "75+", v: "5-star reviews" }, { k: "100k", v: "podcast listeners" }, { k: "10+ yr", v: "client tenure (avg)" }] }, ]; function Pillars() { const [active, setActive] = useState("who"); const p = PILLARS.find((x) => x.id === active); const Art = ART_MAP[active]; const [accentVar, setAccentVar] = useState("#b94a1f"); useEffect(() => { const read = () => setAccentVar(getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#b94a1f"); read(); const t = setInterval(read, 500); return () => clearInterval(t); }, []); return (
Operating system

Who, how, why we fuel.

§ 02 · OPERATING MODEL 3 PILLARS · TAP TO EXPLORE
{PILLARS.map((x) => (
setActive(x.id)}> {x.idx} {x.tab} →
))}

{p.heading}

{p.body}

{p.stats.map((s) => (
{s.k}
{s.v}
))}
); } // ─── services ─────────────────────────────────────────────────────────── function Services() { return (
Services

Talent solutions that move you forward.

§ 03 · DELIVERABLES NOT SURE WHICH? TALK TO US →
{SERVICES.map((s) => (
{s.num}

{s.title}

{s.blurb}

Explore→
 ))}
); } // ─── expertise (filterable) ───────────────────────────────────────────── function Expertise() { const [filter, setFilter] = useState("All"); const groups = ["All", "Build", "Operate", "Lead"]; const filtered = useMemo(() => { if (filter === "All") return EXPERTISE; const g = { Build: ["tech", "product", "design"], Operate: ["hrops", "finance", "admin"], Lead: ["csuite", "marketing"], }[filter]; return EXPERTISE.filter((e) => g.includes(e.id)); }, [filter]); const [accentVar, setAccentVar] = useState("#b94a1f"); useEffect(() => { const read = () => setAccentVar(getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#b94a1f"); read(); const t = setInterval(read, 500); return () => clearInterval(t); }, []); return (
Expertise

Deep expertise, delivered with a human touch.

§ 04 · {filtered.length} PRACTICES SHOWN
{groups.map((g) => ( ))}
{filtered.map((e, i) => (
{String(i + 1).padStart(2, "0")} · {e.short.toUpperCase()}

{e.title}

{e.blurb}

View service Open roles
))}
); } // ─── testimonials ─────────────────────────────────────────────────────── function Testimonials() { const [i, setI] = useState(0); const next = useCallback(() => setI((x) => (x + 1) % TESTIMONIALS.length), []); const prev = useCallback(() => setI((x) => (x - 1 + TESTIMONIALS.length) % TESTIMONIALS.length), []); useEffect(() => { const t = setInterval(next, 7000); return () => clearInterval(t); }, [next]); const q = TESTIMONIALS[i]; return (
Testimonials

Fueling business with the power of people.

§ 05 · CLIENT VOICES {String(i + 1).padStart(2, "0")} / {String(TESTIMONIALS.length).padStart(2, "0")}
“

{q.quote}

{q.initials}
{q.name}
{q.role}
{String(i + 1).padStart(2, "0")} / {String(TESTIMONIALS.length).padStart(2, "0")}
{TESTIMONIALS.map((_, k) => ( setI(k)} /> ))}
); } // ─── job search (preview) ─────────────────────────────────────────────── function Jobs() { const [q, setQ] = useState(""); const [loc, setLoc] = useState(""); const filtered = useMemo(() => { const ql = q.toLowerCase(), ll = loc.toLowerCase(); return JOBS_PREVIEW.filter((j) => (!ql || j.title.toLowerCase().includes(ql) || j.area.toLowerCase().includes(ql)) && (!ll || j.loc.toLowerCase().includes(ll)) ); }, [q, loc]); return (
Quick job search

Where careers get fueled.

§ 06 · LIVE BOARD OPEN FULL JOB BOARD →
{filtered.length === 0 && (
No results — try clearing filters or open the full board.
)} {filtered.map((j) => ( {j.id} {j.title}
{j.company} · {j.area}
{j.loc} {j.type} → ))}
); } // ─── resources ────────────────────────────────────────────────────────── function Resources() { const [playing, setPlaying] = useState(false); const [pos, setPos] = useState(0.32); useEffect(() => { if (!playing) return; const t = setInterval(() => setPos((p) => (p >= 0.99 ? 0 : p + 0.005)), 200); return () => clearInterval(t); }, [playing]); const wave = useMemo(() => Array.from({ length: 64 }).map((_, i) => 6 + Math.sin(i * 0.5) * 4 + (i % 3) * 5 + Math.random() * 6), []); return (
Latest resources

Fuel for thought.

§ 07 · BROWSE ALL →
{RESOURCES.map((r) => (
{r.kind}·{r.date}

{r.title}

{r.read} read →
 ))}
LATEST PODCAST · EP. 047
"Make Them Lose Sleep" — Dr. Evan Zhao, CEO of Pacagen.
{wave.map((h, i) => ( ))}
{Math.floor(pos * 42)}:{String(Math.floor((pos * 42 * 60) % 60)).padStart(2, "0")} / 42:18
75+
5-star reviews
100k
listeners
); } // ─── CTA band + footer ────────────────────────────────────────────────── function CTABand() { return (
§ 08 · WHAT'S NEXT

We build legacies, not just fill roles.

Haven't found the role? We'll help you find the right one. Hiring? We'll deliver people who change what's possible.

Find a Job→ Let's talk→
); } function Footer() { return ( ); } // ─── tweaks ───────────────────────────────────────────────────────────── function TweaksUI({ t, setTweak }) { return ( setTweak("theme", v)} /> a.color)} onChange={(v) => setTweak("accent", v)} /> setTweak("typeMode", v)} /> ); } // ─── App root ─────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useEffect(() => { document.documentElement.setAttribute("data-theme", t.theme); document.documentElement.style.setProperty("--accent", t.accent); // type mode swaps if (t.typeMode === "serif-mono") { document.documentElement.style.setProperty("--font-display", "'Instrument Serif', serif"); } else if (t.typeMode === "all-mono") { document.documentElement.style.setProperty("--font-display", "'Geist Mono', monospace"); document.documentElement.style.setProperty("--font-sans", "'Geist Mono', monospace"); } else { document.documentElement.style.setProperty("--font-display", "'Space Grotesk', sans-serif"); document.documentElement.style.setProperty("--font-sans", "'Geist', sans-serif"); } }, [t.theme, t.accent, t.typeMode]); return ( <>