);
}
// ─── Hero ──────────────────────────────────────────────────────────────────
// A video item can be a local file (src) or a platform link (url).
function ytEmbedLoop(url) {
const id = ytId(url);
if (!id) return null;
return `https://www.youtube-nocookie.com/embed/${id}?autoplay=1&mute=1&loop=1&playlist=${id}&controls=0&modestbranding=1&rel=0&playsinline=1&disablekb=1`;
}
// Silent, looping, no chrome — reads as footage, not as a YouTube player.
function LoopFrame({ url, title }) {
const src = ytEmbedLoop(url);
if (!src) return null;
return (
);
}
// Click-to-play: thumbnail + play button; the real player (with sound and
// controls) loads only on click, so nothing from YouTube runs until then.
function ClickFrame({ url, title, accent }) {
const id = ytId(url);
const start = ytStart(url);
const [playing, setPlaying] = useState(false);
const [thumb, setThumb] = useState(id ? `https://img.youtube.com/vi/${id}/maxresdefault.jpg` : null);
const [hover, setHover] = useState(false);
if (!id) return null;
if (playing) {
return (
);
}
return (
);
}
function VideoSurface({ item, sound }) {
if (item.src) return ;
if (item.url) return ;
return null;
}
// ─── Hero reel — clips running in a continuous loop ────────────────────────
function HeroReel({ accent }) {
const data = window.PORTFOLIO_DATA || {};
const vids = (((data.chapters || []).find((c) => c.key === "video") || {}).items || [])
// Portrait clips only — the cards are 9:16; landscape cuts live in the portfolio.
.filter((v) => v && (v.src || v.url) && ratioNum(v.ratio) < 1);
const [nx, setNx] = useState(0);
const [hot, setHot] = useState(-1);
useEffect(() => {
let raf = 0;
const onMove = (e) => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => {
setNx((e.clientX / window.innerWidth - 0.5) * 2);
});
};
window.addEventListener("mousemove", onMove, { passive: true });
return () => { window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); };
}, []);
if (!vids.length) return null;
// Each unique clip once (repeated only if there are too few to fill the
// strip), then doubled so the -50% keyframe lands on an identical frame.
const uniq = vids.filter((v, i) => vids.findIndex((w) => (w.src || w.url) === (v.src || v.url)) === i);
const base = [];
while (base.length < 6) uniq.forEach((v) => base.push(v));
const track = base.concat(base);
return (
);
}
// ─── Service icons — minimalist line graphics ──────────────────────────────
function ServiceIcon({ kind, accent }) {
const ink = "var(--ink-1)";
const common = { width: 56, height: 56, viewBox: "0 0 56 56", fill: "none", "aria-hidden": true };
if (kind === "video") {
// Editing timeline: two clip blocks on stacked tracks + accent playhead
return (
);
}
// Graphic design: bezier curve with anchor nodes + accent control handles
return (
);
}
// ─── Services ──────────────────────────────────────────────────────────────
function Services({ t, accent }) {
const icons = ["design", "video"];
return (
{t.services.items.map((it, i) =>
{it.t}
{it.d}
)}
);
}
// ─── Collaboration credit chip (optional, top of card) ─────────────────────
function CreditChip({ prefix, name, accent }) {
if (!name) return null;
return (
{prefix} {name}
);
}
// ─── Media card — renders a real image/video, or falls back to placeholder ──
function isVideoSrc(src) {return /\.(mp4|webm|mov|m4v)$/i.test(src || "");}
function MediaCard({ item, label, surface = 1, accent, creditPrefix }) {
const { src, title, ratio = "4/5", credit } = item || {};
const vidRef = useRef(null);
// No file yet → show the elegant placeholder slot
if (!src) {
return ;
}
const video = isVideoSrc(src);
const border = surface === 2 ? "var(--border-2)" : "var(--border-1)";
return (
{if (vidRef.current) vidRef.current.play().catch(() => {});}}
onMouseLeave={() => {if (vidRef.current) {vidRef.current.pause();}}}>
{video ?
:
}
{/* Collaboration credit */}
{/* Play glyph for video (top-right so it never clashes with the credit) */}
{video &&
);
}
// ─── Presentation helpers ──────────────────────────────────────────────────
function ratioNum(r) {
const m = String(r || "4/5").match(/^\s*([\d.]+)\s*\/\s*([\d.]+)\s*$/);
if (m) return parseFloat(m[1]) / parseFloat(m[2]);
const f = parseFloat(r);
return isFinite(f) && f > 0 ? f : 0.8;
}
// Titles are authored as "Brand — descriptor"; split so the caption can sit
// under the piece with the brand leading, the way reference layouts do it.
function splitTitle(title) {
const t = String(title || "");
const m = t.split(/\s+[—–]\s+/);
return m.length > 1 ? { brand: m[0], desc: m.slice(1).join(" — ") } : { brand: t, desc: "" };
}
// Video that plays itself while on screen — no click needed.
// Nothing is fetched until it actually scrolls into view, so a page with many
// clips never blocks its own load event.
// One hidden