canPlay && !playing && setPlaying(true)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', aspectRatio: large ? '16/10' : '9/12', borderRadius: 20, overflow: 'hidden', border: '1px solid var(--line)', background: '#0a0e18', cursor: canPlay && !playing ? 'pointer' : 'default', transition: 'transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease', transform: hover && !playing ? 'translateY(-3px)' : 'none', boxShadow: hover ? '0 24px 60px -20px rgba(74,142,255,0.45)' : '0 0 0 transparent', borderColor: hover ? 'rgba(110,167,255,0.4)' : 'var(--line)', }} > {playing ? (

) : project.gif ? (

) : ( )} {!playing && (

)} {!playing && ( <>

Featured

{!project.placeholder && (

)}

{tier && } {project.audience} · {project.quality}

{project.title}

)}

); } function StatsBar({ projects }) { const real = projects.filter(p => !p.placeholder); const ultra = projects.filter(p => p.quality === 'Ultra').length; const audiences = new Set(real.map(p => p.audience)); const formats = new Set(real.map(p => p.cat)); const items = [ { v: real.length, l: 'cuts shipped' }, { v: audiences.size, l: 'industries' }, { v: formats.size, l: 'formats' }, { v: ultra, l: 'ultra-tier picks' }, ]; return (

{items.map((it, i) => (

{it.v}

{it.l}

))}

); } function ClientRowLabel({ name, count }) { return (

{name} {count}

); } function SubsectionHeading({ audience, count }) { const meta = { 'Founders': { caption: 'Hook-first reels built for startup founders building in public.' }, 'Business': { caption: 'Business-niche reels for operators, agencies and B2B brands.' }, 'Coaches': { caption: 'High-retention shorts for coaches and creators selling 1:1 or cohorts.' }, 'Personal Brand': { caption: 'Identity-first reels for creators and operators building a face-of-the-brand presence.' }, 'Fitness Coach': { caption: 'Energetic motion-driven reels for fitness coaches and courses.' }, 'Premium Brands': { caption: 'Editorial, fashion-grade cuts for premium and luxury brands.' }, 'Professionals': { caption: 'Sharp talking-head reels for lawyers, advisors, consultants and other licensed pros.' }, 'Storytelling': { caption: 'Narrative-led style cuts with cinematic pacing and visual rhythm.' }, 'Local Services': { caption: 'Cuts for roofers, plumbers, HVAC and other local service businesses.' }, 'Hair Salons & Beauty': { caption: 'Cinematic before/after moments for salons and beauty brands.' }, 'Misc': { caption: 'A grab-bag of one-off reels and experimental cuts.' }, }; const cap = (meta[audience] || {}).caption || ''; return (

{audience}

{cap && (

{cap}

)}

{count} {count === 1 ? 'project' : 'projects'}

); } function SectionHeading({ audience, count }) { const meta = { 'Founders': { caption: 'For startup founders', desc: 'Talking-head reels, long-form essays and personal-brand cuts for solo founders and operators.' }, 'Business': { caption: 'For business operators', desc: 'Reels and cuts for business-niche creators, agencies and B2B brands.' }, 'Coaches': { caption: 'For coaches & creators', desc: 'High-retention coaching reels and long-form course content.' }, 'Personal Brand': { caption: 'For personal brands', desc: 'Identity-first reels and signature cuts for creators and operators building a face-of-the-brand presence.' }, 'Fitness Coach': { caption: 'For fitness coaches & courses', desc: 'Energetic motion-driven reels, course explainers and conversion-focused ad creative.' }, 'Premium Brands': { caption: 'For premium & luxury brands', desc: 'Editorial, fashion-grade cuts with cinematic pacing for premium and luxury brand creators.' }, 'Professionals': { caption: 'For licensed professionals', desc: 'Authoritative reels for lawyers, advisors, consultants and other industry professionals.' }, 'Storytelling': { caption: 'For story-driven creators', desc: 'Narrative-led reels and style cuts with cinematic pacing, voiceover and visual rhythm.' }, 'Local Services': { caption: 'For roofers, plumbers & trades', desc: 'Conversion-focused reels for roofers, plumbers, HVAC, electricians and other local service businesses.' }, 'Hair Salons & Beauty': { caption: 'For salons & beauty brands', desc: 'Cinematic before/after reels and lifestyle moments for beauty businesses.' }, 'Misc': { caption: 'For everything else', desc: 'A grab-bag of one-off reels and experimental cuts.' }, }[audience] || { caption: audience, desc: '' }; return (

{meta.caption}

{audience}

{meta.desc && (

{meta.desc}

)}

{count} projects

); } // Bento masonry container. For `isGrid=true` (CSS-grid mode), it measures each // child's rendered height and writes a grid-row span so the grid behaves like // a true masonry — no gaps below short tiles. For non-grid modes it just // renders a plain div passthrough. function BentoGrid({ className, isGrid, children }) { const ref = useRef(null); useEffect(() => { if (!isGrid) return; const grid = ref.current; if (!grid) return; const compute = () => { const styles = getComputedStyle(grid); const rowH = parseFloat(styles.gridAutoRows) || 1; // We use row-gap: 0 and column-gap: var(--tile-gap), then add the // desired tile gap into each tile's row-span so the vertical gap // below the tile exactly matches the horizontal column-gap. const targetGap = parseFloat(styles.columnGap) || 10; const items = grid.querySelectorAll(':scope > .masonry-item'); items.forEach((it, idx) => { // Temporarily clear so we measure the natural (aspect-ratio-driven) height it.style.gridRowEnd = ''; const h = it.getBoundingClientRect().height; if (!h) return; // Span = ceil(tile height / rowH) + the gap tracks below it (omit // the gap on the absolute last tile so the grid doesn't trail blank // space — but in practice the next row's tiles cover this). const span = Math.max(1, Math.ceil(h / rowH) + Math.round(targetGap / rowH)); it.style.gridRowEnd = `span ${span}`; }); }; // Compute now, after fonts/layout settle, and again on resize. compute(); const raf = requestAnimationFrame(compute); const ro = new ResizeObserver(compute); ro.observe(grid); grid.querySelectorAll(':scope > .masonry-item').forEach((it) => ro.observe(it)); window.addEventListener('resize', compute); // Re-measure once images/iframes load — Wistia thumbs swap in async. const imgs = grid.querySelectorAll('img'); imgs.forEach((img) => { if (!img.complete) img.addEventListener('load', compute, { once: true }); }); return () => { cancelAnimationFrame(raf); ro.disconnect(); window.removeEventListener('resize', compute); }; }, [isGrid, children]); return

{children}

; } function PortfolioTile({ project }) { const [hover, setHover] = useState(false); const [playing, setPlaying] = useState(false); const ref = useReveal(); const ratioLabel = project.ratio.replace('/', ':'); // Resolve to the real media ID. For plain 10-char IDs this is a no-op; for // share URLs (`https://*.wistia.com/s/`) we wait on the oembed lookup // — `info?.mediaId` becomes available after fetchWistiaInfo resolves. const info = useWistiaInfo(project.wistia); const wistiaId = (info && info.mediaId) || (isWistiaShareUrl(project.wistia) ? null : project.wistia); const canPlay = !project.placeholder && !!wistiaId; const tierColors = { 'Lite': { dot: '#8fa7c4', bg: 'rgba(143,167,196,0.12)', border: 'rgba(143,167,196,0.35)' }, 'Air': { dot: '#6ea7ff', bg: 'rgba(110,167,255,0.16)', border: 'rgba(110,167,255,0.40)' }, 'Pro': { dot: '#a78bff', bg: 'rgba(167,139,255,0.18)', border: 'rgba(167,139,255,0.45)' }, 'Ultra': { dot: '#ffc46e', bg: 'rgba(255,196,110,0.18)', border: 'rgba(255,196,110,0.50)' }, }; const tier = tierColors[project.quality]; const handleClick = () => { if (canPlay && !playing) setPlaying(true); }; return (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', aspectRatio: project.ratio, borderRadius: 18, overflow: 'hidden', border: '1px solid var(--line)', background: '#0a0e18', cursor: canPlay && !playing ? 'pointer' : 'default', transition: 'transform 0.3s ease, border-color 0.3s ease', transform: hover && !playing ? 'translateY(-3px)' : 'none', borderColor: hover ? 'var(--line-2)' : 'var(--line)', }} > {playing ? (

) : project.placeholder ? ( ) : project.gif ? ( {project.title}

) : ( )} {!project.placeholder && !playing && (

)} {/* Roll number — internal identifier, kept subtle so visitors barely notice */} {!playing && project.roll != null && (

#{String(project.roll).padStart(2, '0')}

)} {/* Top-right stack: ratio + tier */} {!playing && (

{ratioLabel}

{project.quality}

)} {/* Play button */} {!project.placeholder && !playing && (

)} {/* Title block removed — tiles are pure video previews; metadata lives in filters + tier pill */}

); } function Placeholder({ ratioLabel, kind }) { return (

{ratioLabel} placeholder

Drop {kind.split('·')[0].trim().toLowerCase()} here

); } Object.assign(window, { PortfolioPage, PortfolioTile, Placeholder, FilterRow, SectionHeading, SubsectionHeading, ClientRowLabel, FeaturedStrip, FeaturedTile, StatsBar, BentoGrid });

Some Of Our
Featured Projects

Like what you see?
Let's build your content system.

{audience}

{audience}

Some Of Our Featured Projects

Like what you see? Let's build your content system.

{audience}

{audience}

Some Of Our
Featured Projects

Like what you see?
Let's build your content system.