")`,
}} />
◉ rec · 23.976 fps · 4K · ARRI Alexa Mini
{(content.eyebrow || "").trim() ? (
{content.eyebrow}
) : null}
{renderAccented(content.headline, colors.accent, Math.max(300, hw - 100))}
{vidProgress === null ? (
) : (
)}
);
}
// ── Ticker ─────────────────────────────────────────────────────────
function Ticker({ content, colors }) {
const items = content.items || [];
const repeated = [...items, ...items, ...items];
return (
{repeated.map((item, i) => (
{item}
))}
);
}
// ── Work ───────────────────────────────────────────────────────────
// Layout morphs by viewport AND project count: a ResizeObserver measures the
// grid, derives a column count from a ratio-coupled minimum tile width, and
// sizes rows so every cover lands on the chosen aspect. A "feature" tile spans
// 2×2 (same aspect, 4× area); it clamps to the available columns so it never
// overflows on narrow screens.
function parseRatio(str) {
const m = String(str || "2:1").split(/[:/]/).map(Number);
const n = (m[0] && m[1]) ? m[0] / m[1] : 2;
return n > 0 ? n : 2;
}
const isFeatureShape = (s) => s === "feature" || s === "wide" || s === "tall" || s === "big";
// Resolve a tile's column/row span from its size + the live column count.
// Spans clamp down as columns shrink so nothing overflows on narrow screens.
function spanFor(shape, cols) {
switch (shape) {
case "wide": return { colSpan: Math.min(2, cols), rowSpan: 1 };
case "tall": return { colSpan: 1, rowSpan: 2 };
case "feature":
case "big": return { colSpan: Math.min(2, cols), rowSpan: 2 };
default: return { colSpan: 1, rowSpan: 1 };
}
}
function WorkCard({ project, index, colors, onOpen, cols }) {
const [hovered, setHovered] = useState(false);
const [coverFailed, setCoverFailed] = useState(false);
const { colSpan, rowSpan } = spanFor(project.shape || "single", cols);
const pid = `pwork${index}`;
const hasVideo = !!(project.video && project.video.trim());
const cover = (project.cover && typeof project.cover === "object") ? project.cover : { url: "", focalX: 0.5, focalY: 0.5 };
const coverUrl = (cover.url || "").trim();
const showCover = !!coverUrl && !coverFailed;
const focalPos = `${(typeof cover.focalX === "number" ? cover.focalX : 0.5) * 100}% ${(typeof cover.focalY === "number" ? cover.focalY : 0.5) * 100}%`;
const details = Array.isArray(project.details) ? project.details.filter((d) => d && (d.item || d.value)) : [];
const hasDetails = details.length > 0;
const gallery = Array.isArray(project.gallery) ? project.gallery.filter((g) => g && (g.url || "").trim()) : [];
const galleryCount = gallery.length;
const openable = hasVideo || galleryCount > 0 || hasDetails;
const open = () => { if (openable) onOpen(project); };
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
onClick={open}
onKeyDown={(e) => { if (openable && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); open(); } }}
role={openable ? "button" : undefined}
tabIndex={openable ? 0 : undefined}
aria-label={openable ? `${hasVideo ? "Play" : galleryCount ? "View photos from" : "View"} ${project.title}` : undefined}
style={{
gridColumn: `span ${colSpan}`, gridRow: `span ${rowSpan}`,
background: "oklch(14% 0.018 55)",
border: `1px solid oklch(93% 0.016 85 / ${hovered ? "0.12" : "0.05"})`,
cursor: openable ? "pointer" : "default", position: "relative", overflow: "hidden",
transition: "border-color 0.3s",
}}
>
{/* diagonal-stripe placeholder (base layer / fallback when no cover) */}
{!showCover && (
{String(project.type || "").toUpperCase()}
)}
{/* cover image */}
{showCover && (
setCoverFailed(true)}
style={{
position: "absolute", inset: 0, width: "100%", height: "100%",
objectFit: "cover", objectPosition: focalPos,
transform: hovered ? "scale(1.05)" : "scale(1)",
transition: "transform 0.6s cubic-bezier(0.16,1,0.3,1)",
}}
/>
)}
{/* legibility veil over the cover so the info bar text stays readable */}
{showCover && (
)}
{/* hover glow */}
{/* details-only affordance (no video, no gallery) */}
{!hasVideo && galleryCount === 0 && hasDetails && (
i
)}
{/* info bar */}
{project.title}
{project.client}
{project.type}
{project.year}
);
}
// ── Project lightbox — video-first, then a swipeable stills gallery ──
function VideoLightbox({ project, colors, onClose }) {
const hasVideo = !!(project.video && String(project.video).trim());
const cover = (project.cover && typeof project.cover === "object") ? project.cover : { url: "", focalX: 0.5, focalY: 0.5 };
const coverUrl = (cover.url || "").trim();
const focalPos = `${(typeof cover.focalX === "number" ? cover.focalX : 0.5) * 100}% ${(typeof cover.focalY === "number" ? cover.focalY : 0.5) * 100}%`;
const details = Array.isArray(project.details) ? project.details.filter((d) => d && (d.item || d.value)) : [];
const gallery = Array.isArray(project.gallery) ? project.gallery.filter((g) => g && (g.url || "").trim()) : [];
// The flick-through: the video leads (if present), then every still.
// The flick-through: the optional feature video leads, then the media reel in
// authored order — each item an image OR a video (legacy items default to image).
const slides = [];
if (hasVideo) slides.push({ type: "video", url: project.video, poster: coverUrl });
gallery.forEach((g) => slides.push(g.type === "video"
? { type: "video", url: g.url, caption: g.caption || "" }
: { type: "image", url: g.url, caption: g.caption || "" }));
const count = slides.length;
const [idx, setIdx] = useState(0);
const clamp = (n) => Math.max(0, Math.min(count - 1, n));
const go = (n) => setIdx((c) => clamp(typeof n === "function" ? n(c) : n));
const videoRefs = useRef({});
const drag = useRef(null);
useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") onClose();
else if (e.key === "ArrowRight") go((c) => c + 1);
else if (e.key === "ArrowLeft") go((c) => c - 1);
};
window.addEventListener("keydown", onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
}, [onClose, count]);
// Pause any video that isn't the current slide.
useEffect(() => {
Object.entries(videoRefs.current).forEach(([k, v]) => {
if (v && Number(k) !== idx) { try { v.pause(); } catch (e) {} }
});
}, [idx]);
const onDown = (e) => { drag.current = { x: e.clientX, moved: 0 }; };
const onMove = (e) => { if (drag.current) drag.current.moved = e.clientX - drag.current.x; };
const onUp = () => {
const d = drag.current; drag.current = null;
if (!d) return;
if (d.moved < -50) go((c) => c + 1);
else if (d.moved > 50) go((c) => c - 1);
};
const noGrab = (e) => e.preventDefault(); // download/drag deterrent
const arrowStyle = (side, disabled) => ({
position: "absolute", top: "50%", [side]: 12, transform: "translateY(-50%)",
width: 44, height: 44, borderRadius: "50%", zIndex: 3,
display: count > 1 ? "flex" : "none", alignItems: "center", justifyContent: "center",
border: "1px solid oklch(93% 0.016 85 / 0.25)", background: "oklch(9% 0.018 55 / 0.55)",
backdropFilter: "blur(6px)", color: "oklch(96% 0.016 85)", fontSize: 24, lineHeight: 1,
cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.3 : 1,
transition: "opacity 0.2s, border-color 0.2s",
});
return (
{project.title}
{project.type}{project.client ? ` · ${project.client}` : ""}{project.year ? ` · ${project.year}` : ""}
{ e.currentTarget.style.borderColor = colors.accent; e.currentTarget.style.color = colors.accent; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = "oklch(93% 0.016 85 / 0.25)"; e.currentTarget.style.color = "oklch(93% 0.016 85 / 0.8)"; }}
>✕
e.stopPropagation()} style={{ width: "min(1100px, 100%)", display: "flex", flexDirection: "column", gap: 16, paddingBottom: "clamp(12px, 5vh, 48px)" }}>
{/* stage */}
{count === 0 ? (
coverUrl ? (
) : (
No media yet
)
) : (
{slides.map((s, i) => (
{s.type === "video" ? (
{ videoRefs.current[i] = el; }}
src={s.url} poster={s.poster || undefined}
controls autoPlay={i === 0} playsInline
controlsList="nodownload noremoteplayback" disablePictureInPicture
onContextMenu={noGrab}
style={{ width: "100%", height: "100%", objectFit: "contain", background: "#000" }}
/>
) : (
))}
)}
{/* arrows + counter */}
go((c) => c - 1)} disabled={idx === 0} aria-label="Previous" style={arrowStyle("left", idx === 0)}>‹
go((c) => c + 1)} disabled={idx === count - 1} aria-label="Next" style={arrowStyle("right", idx === count - 1)}>›
{count > 1 && (
{idx + 1} / {count}
)}
{/* caption */}
{count > 0 && (
{slides[idx] && slides[idx].type === "image" ? slides[idx].caption : ""}
)}
{/* filmstrip */}
{count > 1 && (
{slides.map((s, i) => {
const thumb = s.type === "image" ? s.url : s.poster;
return (
go(i)} aria-label={`View ${i + 1}`} style={{
width: 64, height: 40, borderRadius: 4, overflow: "hidden", padding: 0, cursor: "pointer",
border: `2px solid ${i === idx ? colors.accent : "oklch(93% 0.016 85 / 0.15)"}`,
background: "#000", position: "relative", opacity: i === idx ? 1 : 0.55,
transition: "opacity 0.2s, border-color 0.2s",
}}>
{thumb ? ▶
)}
);
})}
)}
{details.length > 0 && (
{details.map((d, i) => (
{d.item}
{d.value}
))}
)}
);
}
function Work({ content, theme, colors }) {
const [active, setActive] = useState(null);
const gridRef = useRef(null);
const { narrow } = useViewport();
const ratioNum = parseRatio(theme && theme.coverRatio);
const gap = narrow ? 10 : 16;
// wider aspect ⇒ wider minimum column ⇒ fewer, larger cinematic tiles
const minCol = Math.round(230 + (ratioNum - 1) * 80);
const [metrics, setMetrics] = useState({ cols: 4, rowH: 240 });
useEffect(() => {
const el = gridRef.current;
if (!el || typeof ResizeObserver === "undefined") return;
const measure = () => {
const W = el.clientWidth;
if (!W) return;
const cols = Math.max(1, Math.floor((W + gap) / (minCol + gap)));
const colW = (W - (cols - 1) * gap) / cols;
setMetrics({ cols, rowH: Math.max(150, Math.round(colW / ratioNum)) });
};
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, [minCol, ratioNum]);
return (
{content.eyebrow}
{content.heading}
{(content.projects || []).map((p, i) =>
{active && setActive(null)} />}
);
}
// ── About + Team ───────────────────────────────────────────────────
function initialsOf(name) {
return String(name || "").trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase() || "?";
}
function TeamMember({ member, colors, onOpen }) {
const [open, setOpen] = useState(false);
const hs = (member.headshot && typeof member.headshot === "object") ? member.headshot : { url: "", focalX: 0.5, focalY: 0.5 };
const url = (hs.url || "").trim();
const focal = `${(typeof hs.focalX === "number" ? hs.focalX : 0.5) * 100}% ${(typeof hs.focalY === "number" ? hs.focalY : 0.5) * 100}%`;
const size = "clamp(74px, 8vw, 98px)";
return (
setOpen(true)} onMouseLeave={() => setOpen(false)}>
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(); } }}
style={{
width: size, height: size, borderRadius: "50%", overflow: "hidden", cursor: "pointer",
border: `1px solid ${open ? colors.accent : "oklch(93% 0.016 85 / 0.16)"}`,
background: "oklch(16% 0.018 55)", display: "flex", alignItems: "center", justifyContent: "center",
transition: "border-color 0.25s, transform 0.25s", transform: open ? "translateY(-2px)" : "none",
}}
>
{url
?
:
{initialsOf(member.name)} }
{open && (
{member.name}
{member.title &&
{member.title}
}
)}
);
}
function ProfileCard({ member, colors, onClose }) {
const hs = (member.headshot && typeof member.headshot === "object") ? member.headshot : { url: "", focalX: 0.5, focalY: 0.5 };
const url = (hs.url || "").trim();
const focal = `${(typeof hs.focalX === "number" ? hs.focalX : 0.5) * 100}% ${(typeof hs.focalY === "number" ? hs.focalY : 0.5) * 100}%`;
const facts = Array.isArray(member.stats) ? member.stats.filter((s) => s && (s.item || s.value)) : [];
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
const prev = document.body.style.overflow; document.body.style.overflow = "hidden";
return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
}, [onClose]);
return (
e.stopPropagation()} style={{
width: "min(660px, 100%)", display: "flex", flexWrap: "wrap", gap: 0,
background: "oklch(12% 0.018 55)", border: "1px solid oklch(93% 0.016 85 / 0.1)",
borderRadius: 12, overflow: "hidden", position: "relative", boxShadow: "0 40px 120px oklch(0% 0 0 / 0.6)",
}}>
✕
{url
?
:
{initialsOf(member.name)}
}
{member.name}
{member.title &&
{member.title}
}
{member.bio &&
{member.bio}
}
{facts.length > 0 && (
{facts.map((f, i) => (
{f.item}
{f.value}
))}
)}
);
}
function About({ content, colors }) {
const [profile, setProfile] = useState(null);
const { narrow } = useViewport();
const team = Array.isArray(content.team) ? content.team.filter((m) => m && (m.name || (m.headshot && m.headshot.url))) : [];
return (
{content.eyebrow}
{renderAccented(content.lead, colors.accent, 600)}
{content.body}
{team.length > 0 && (
The team
{team.map((m, i) => setProfile(m)} />)}
)}
{(content.stats || []).map((s, i) => (
))}
{profile && setProfile(null)} />}
);
}
// ── Services ───────────────────────────────────────────────────────
// Curated line-icon set (stroke = currentColor). Keeps the section visual even
// before real imagery is added, and reads as on-brand iconography alongside it.
const SVC_ICONS = {
film:
,
camera:
,
clapper:
,
megaphone:
,
scissors:
,
sparkle:
,
globe:
,
play:
,
};
function SvcIcon({ name, size = 22 }) {
const g = SVC_ICONS[name] || SVC_ICONS.film;
return (
{g}
);
}
function ServiceCard({ item, index, colors }) {
const [hovered, setHovered] = useState(false);
const [imgFailed, setImgFailed] = useState(false);
const pid = `psvc${index}`;
const img = (item.image && typeof item.image === "object") ? item.image : { url: "", focalX: 0.5, focalY: 0.5 };
const imgUrl = (img.url || "").trim();
const showImg = !!imgUrl && !imgFailed;
const focal = `${(typeof img.focalX === "number" ? img.focalX : 0.5) * 100}% ${(typeof img.focalY === "number" ? img.focalY : 0.5) * 100}%`;
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
position: "relative", overflow: "hidden", background: "oklch(13% 0.018 55)",
border: `1px solid oklch(93% 0.016 85 / ${hovered ? "0.14" : "0.07"})`,
transform: hovered ? "translateY(-3px)" : "none",
transition: "border-color 0.3s, transform 0.35s cubic-bezier(0.16,1,0.3,1)",
}}
>
{/* visual area */}
{showImg ? (
<>
setImgFailed(true)}
style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: focal,
transform: hovered ? "scale(1.06)" : "scale(1)", transition: "transform 0.6s cubic-bezier(0.16,1,0.3,1)" }} />
) : (
<>
{/* branded placeholder: accent wash + stripe texture + ghost icon */}
)}
{/* body */}
);
}
function Services({ content, colors }) {
const items = content.items || [];
const { narrow } = useViewport();
return (
{items.map((item, i) =>
);
}
// ── Values ─────────────────────────────────────────────────────────
function ValueRow({ value, colors, last }) {
const [hovered, setHovered] = useState(false);
const { mobile } = useViewport();
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{
display: "grid", gridTemplateColumns: mobile ? "1fr" : "minmax(0, 0.9fr) minmax(0, 1.1fr)",
gap: mobile ? 16 : "clamp(24px, 6vw, 96px)", alignItems: "start", padding: mobile ? "32px 0" : "48px 0",
borderBottom: last ? "none" : "1px solid oklch(93% 0.016 85 / 0.08)",
transition: "padding-left 0.35s cubic-bezier(0.16,1,0.3,1)", paddingLeft: hovered ? 12 : 0,
}}
>
{value.index}
{value.label}
{value.title}
{value.body}
);
}
function Values({ content, colors }) {
const items = content.items || [];
const { narrow } = useViewport();
return (
{content.eyebrow}
{content.heading}
{items.map((v, i) =>
);
}
// ── Obfuscated email ───────────────────────────────────────────────
// Bot protection without hurting humans: the page is client-rendered (so the
// address is absent from served HTML), the "@" and "." are injected via CSS
// (so the DOM text never forms a matchable address), and the mailto: is only
// attached on first hover / focus / tap — never present at rest.
function ObfuscatedEmail({ email, colors, narrow }) {
const safe = String(email || "");
const at = safe.indexOf("@");
const dom = at >= 0 ? safe.slice(at + 1) : "";
const dot = dom.lastIndexOf(".");
const user = at >= 0 ? safe.slice(0, at) : safe;
const host = dot >= 0 ? dom.slice(0, dot) : dom;
const tld = dot >= 0 ? dom.slice(dot + 1) : "";
const reveal = (e) => { const a = e.currentTarget; if (!a.getAttribute("href")) a.setAttribute("href", "mailto:" + safe); };
return (
{ reveal(e); e.currentTarget.style.opacity = "0.85"; e.currentTarget.style.transform = "translateY(-2px)"; }}
onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; e.currentTarget.style.transform = "translateY(0)"; }}
onFocus={reveal} onTouchStart={reveal}
onKeyDown={(e) => { if (e.key === "Enter") reveal(e); }}
style={{
display: "inline-block", padding: narrow ? "16px 32px" : "18px 48px",
background: colors.accent, color: "oklch(9% 0.018 55)",
fontFamily: "var(--fg-head)", fontWeight: 700,
fontSize: 18, letterSpacing: "0.08em", textDecoration: "none",
transition: "opacity 0.2s, transform 0.2s", cursor: "pointer",
}}
>
{user} {host} {tld}
);
}
// ── Contact ────────────────────────────────────────────────────────
function Contact({ content, colors }) {
const { narrow } = useViewport();
return (
);
}
// ── Footer ─────────────────────────────────────────────────────────
function Footer({ content }) {
const year = new Date().getFullYear();
const { narrow } = useViewport();
return (
© {year} {content.name || "flairground"}
);
}
// ── Coming-soon splash ─────────────────────────────────────────────
// Deliberately generic: no wordmark, no business name unless the copy supplies
// it. Sets the browser tab title to the chosen heading too, so nothing in the
// page advertises the new name while it's gated.
function ComingSoon({ cfg, colors }) {
const c = cfg || {};
const eyebrow = c.eyebrow || "";
const title = c.title || "Coming soon";
const message = c.message || "";
const email = (c.email || "").trim();
const accent = (colors && colors.accent) || "#E08E3C";
const glow = (colors && colors.accentGlow) || "oklch(73% 0.19 58 / 0.06)";
// Hold the text hidden until fonts are ready, THEN fade/rise it in. This both
// adds a graceful entrance and masks the web-font swap (no jarring glyph pop):
// the pre-swap fallback never shows because nothing is visible until ready.
const [ready, setReady] = useState(false);
useEffect(() => {
let done = false;
const reveal = () => { if (!done) { done = true; setReady(true); } };
const fonts = (typeof document !== "undefined" && document.fonts) ? document.fonts.ready : null;
if (fonts && fonts.then) fonts.then(() => setTimeout(reveal, 120));
const safety = setTimeout(reveal, 900); // never wait forever
return () => { done = true; clearTimeout(safety); };
}, []);
useEffect(() => {
const prev = document.title;
document.title = title;
return () => { document.title = prev; };
}, [title]);
const rise = (delay) => ({
opacity: ready ? 1 : 0,
transform: ready ? "translateY(0)" : "translateY(16px)",
transition: "opacity 0.9s ease, transform 1s cubic-bezier(0.16,1,0.3,1)",
transitionDelay: `${delay}ms`,
});
return (
{/* Slow animated accent gradient field — two large, drifting accent blooms */}
{eyebrow ? (
{eyebrow}
) : null}
{title}
{message ? (
{message}
) : null}
{email ? (
{email}
) : null}
);
}
window.ComingSoon = ComingSoon;
// ── Register this skin ─────────────────────────────────────────────
// A skin is just a name + a type→component map (+ optional palettes). Every
// component honours the ({ content, theme, colors }) contract, so a second
// skin is a new file that calls CMS.defineSkin with its own component set.
window.CMS.defineSkin("editorial", {
label: "Editorial Noir",
components: { nav: Nav, hero: Hero, ticker: Ticker, work: Work, about: About, services: Services, values: Values, contact: Contact, footer: Footer },
});