);
}
/* Variant A: Feature + thumbnail strip (default) */
function Thumb({ film, active, onClick }) {
const [hover, setHover] = useState(false);
// Inactive thumbs sit a bit translucent; hover or "active" brings them
// back to full opacity. Click bubbles to onClick (set as featured).
const lit = active || hover;
return (
);
}
function PortfolioFeature({ items, active, setActive }) {
const featured = items[active];
// Sound state. Starts muted (browser autoplay policy needs it muted
// before any user interaction). Flips to unmuted the moment the user
// clicks a thumbnail or the sound toggle — both count as user gestures.
const [muted, setMuted] = useState(true);
// Featured plays whenever its container is in the viewport. We watch
// the wrapper div, not the video, so we keep observing across swaps.
const featuredWrapRef = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = featuredWrapRef.current;
if (!el) return;
const io = new IntersectionObserver(
([entry]) => setInView(entry.isIntersecting),
{ threshold: 0.35 }
);
io.observe(el);
return () => io.disconnect();
}, []);
// Pause when tab is hidden — saves CPU and avoids audio bleed.
const [pageVisible, setPageVisible] = useState(
typeof document !== "undefined" ? !document.hidden : true
);
useEffect(() => {
const onVis = () => setPageVisible(!document.hidden);
document.addEventListener("visibilitychange", onVis);
return () => document.removeEventListener("visibilitychange", onVis);
}, []);
const playing = inView && pageVisible;
const handleThumbClick = (i) => {
if (i === active) return;
setActive(i);
// Treat the swap itself as the user's intent to actually watch — unmute.
setMuted(false);
};
return (
Tell us what you think.}
/>
{/* Featured */}
Now showing{String(active + 1).padStart(2, "0")} / {String(items.length).padStart(2, "0")}
setMuted((m) => !m)}
showControls
/>
{featured.client} — {featured.meta}
{/* Twin counter-rotating wheels — same height as the featured film,
infinite vertical scroll with momentum, columns drift apart. */}
);
}
/* Variant B: Horizontal film strip */
function PortfolioStrip({ items }) {
const ref = useRef(null);
return (
);
}
/* ============================================== PROCESS ========== */
function Process() {
const steps = [
{ n: "01", t: "Concept", d: "Brief, narrative, references. We write the film before we make it.", icon: "assets/process/step-01-concept.png" },
{ n: "02", t: "Art Direction", d: "Visual system, palette, motion language. Locked by humans.", icon: "assets/process/step-02-art-direction.png" },
{ n: "03", t: "AI Production", d: "Generation across image, motion and sound — directed shot by shot.", icon: "assets/process/step-03-ai-production.png" },
{ n: "04", t: "Edit", d: "Cut, grade, sound design. The 15 seconds are earned in this room.", icon: "assets/process/step-04-edit.png" },
{ n: "05", t: "Delivery", d: "Master, social cuts, vertical / square / horizontal exports.", icon: "assets/process/step-05-delivery.png" },
{ n: "06", t: "Review", d: "One consolidated round of revisions is always included.", icon: "assets/process/step-06-review.png" },
];
// JS-driven float + scroll-gravity. Each icon oscillates independently
// (phase staggered by 0.7s) and reacts to scroll velocity. Going DOWN
// crushes icons more when they're at the bottom of their float cycle;
// going UP lifts them more when they're at the top — so each icon
// "feels its weight" differently depending on where it is.
const iconRefs = useRef(steps.map(() => React.createRef()));
// Color overlays animated separately: a "wave" sweeps across them
// (fill from left, drain through right), staggered 0.2s per icon.
const colorOverlayRefs = useRef(steps.map(() => React.createRef()));
const sectionRef = useRef(null);
const waveTRef = useRef(null); // null = no active wave; otherwise wave time in seconds
const autoTimerRef = useRef(null);
// Index of the currently-hovered step (-1 = none). When set, the wave
// is clamped at the moment that icon finishes filling — it freezes
// there until the user releases the hover.
const hoveredIconRef = useRef(-1);
const scrollVelRef = useRef(0);
const lastScrollY = useRef(typeof window !== "undefined" ? window.scrollY : 0);
// Tracks last-tick timestamp so we can compute frame-rate-independent
// delta times for the hover-follow lerp.
const lastTickTimeRef = useRef(typeof window !== "undefined" ? performance.now() : 0);
// Fire a single wave through the icons. By default reschedules the
// next auto-fire 15s out; pass `false` to skip the reschedule (used
// while a step is hovered — the cycle is paused).
const fireWave = React.useCallback((scheduleNext = true) => {
waveTRef.current = 0; // start at t=0 — icons fire in order from i=0
if (autoTimerRef.current) clearTimeout(autoTimerRef.current);
if (scheduleNext) {
autoTimerRef.current = setTimeout(() => fireWave(true), 15000);
}
}, []);
// Step hover handlers — hover area covers the entire step (icon + text).
// While hovered, the wave smoothly chases the cursor's step. Leaving
// a step lets the wave resume its natural advance to the end.
const onStepEnter = React.useCallback((i) => {
hoveredIconRef.current = i;
if (waveTRef.current == null) {
// No active wave — start one. It will chase the hovered target.
fireWave(false);
} else {
// A wave is already in flight (auto-cycle or another hover). Just
// pause the 15s auto-cycle while the user is hovering.
if (autoTimerRef.current) {
clearTimeout(autoTimerRef.current);
autoTimerRef.current = null;
}
}
}, [fireWave]);
const onStepLeave = React.useCallback((i) => {
if (hoveredIconRef.current !== i) return;
hoveredIconRef.current = -1;
// Resume the 15s cycle from now.
if (autoTimerRef.current) clearTimeout(autoTimerRef.current);
autoTimerRef.current = setTimeout(() => fireWave(true), 15000);
}, [fireWave]);
// First trigger: 2s after the section first enters the viewport.
useEffect(() => {
const el = sectionRef.current;
if (!el) return;
let fired = false;
const io = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting && !fired) {
fired = true;
setTimeout(fireWave, 2000);
io.disconnect();
}
}, { threshold: 0.25 });
io.observe(el);
return () => io.disconnect();
}, [fireWave]);
// Cleanup the auto timer on unmount.
useEffect(() => () => {
if (autoTimerRef.current) clearTimeout(autoTimerRef.current);
}, []);
useEffect(() => {
const onScroll = () => {
const y = window.scrollY;
const dy = y - lastScrollY.current;
lastScrollY.current = y;
// Each scroll tick injects displacement into the spring "velocity".
// Tuned for a perceptible nudge without overshoot.
scrollVelRef.current += dy * 0.22;
// Hard ceiling so a flick of the wheel can't rocket icons offscreen.
const HARD = 60;
if (scrollVelRef.current > HARD) scrollVelRef.current = HARD;
if (scrollVelRef.current < -HARD) scrollVelRef.current = -HARD;
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
const PERIOD = 4.6; // seconds — float cycle length
const AMPL_Y = 3.5; // px — float vertical amplitude
const SCALE_AMPL = 0.04; // float scale: 1 → 1.04
const ROT_AMPL = 0.6; // deg — float rotation
const FRICTION = 0.90; // per-frame decay of scroll velocity
const MIN_VEL = 0.04; // snap-to-zero threshold
const MAX_DISPL = 24; // px — clamp on scroll-induced offset
const start = performance.now();
let raf;
const tick = () => {
const now = performance.now();
const t = (now - start) / 1000;
// Decay scroll velocity each frame.
scrollVelRef.current *= FRICTION;
if (Math.abs(scrollVelRef.current) < MIN_VEL) scrollVelRef.current = 0;
const vel = scrollVelRef.current;
iconRefs.current.forEach((ref, i) => {
const el = ref.current;
if (!el) return;
// Per-icon phase: each icon staggered by 0.7s.
const phase = (((t + i * 0.7) % PERIOD) / PERIOD);
const a = phase * Math.PI * 2;
// heightNorm: 0 = at floor (low), 1 = at apex (high). Smooth ease.
const heightNorm = (1 - Math.cos(a)) / 2;
// Float Y is 0 at low and -AMPL at high (CSS Y axis: up is negative).
const yFloat = -AMPL_Y * heightNorm;
const scale = 1 + SCALE_AMPL * heightNorm;
const rot = ROT_AMPL * Math.sin(a);
// Scroll-induced offset, modulated by where the icon is in its
// cycle. Down-force (vel > 0) crushes more when the icon is LOW;
// up-force (vel < 0) lifts more when the icon is HIGH.
let factor;
if (vel >= 0) {
factor = 1 - heightNorm * 0.7; // [0.3 high, 1 low]
} else {
factor = 0.3 + heightNorm * 0.7; // [0.3 low, 1 high]
}
let yScroll = vel * factor;
if (yScroll > MAX_DISPL) yScroll = MAX_DISPL;
if (yScroll < -MAX_DISPL) yScroll = -MAX_DISPL;
const y = yFloat + yScroll;
el.style.transform =
`translate3d(0, ${y.toFixed(2)}px, 0) scale(${scale.toFixed(3)}) rotate(${rot.toFixed(2)}deg)`;
});
// Color-flow wave — sweeps fill→drain across each icon when
// waveTRef is set, staggered by 0.2s per icon.
// We store waveT directly (not derived from a start timestamp) so
// that during hover we can hold the wave still and let the lerp
// fully converge to the target — otherwise the natural per-frame
// advance creates a residual gap that leaves the hovered icon at
// ~98% filled instead of 100%.
const STAGGER = 0.2;
const FILL_DUR = 0.5;
const DRAIN_DUR = 0.5;
const ICON_DUR = FILL_DUR + DRAIN_DUR;
const FOLLOW_RATE = 18.0;
const SNAP_EPS = 0.004; // seconds — snap to target when this close
if (waveTRef.current != null) {
// Compute frame delta locally so this block doesn't depend on
// when the scroll-gravity section ran.
const dt = Math.min(0.1, (performance.now() - lastTickTimeRef.current) / 1000);
const hov = hoveredIconRef.current;
if (hov >= 0) {
// Hovered: lerp waveT toward the target. NO natural advance
// while hovered — that way the lerp actually reaches target.
const pauseTargetT = hov * STAGGER + FILL_DUR;
const factor = 1 - Math.exp(-FOLLOW_RATE * dt);
let newWaveT = waveTRef.current + (pauseTargetT - waveTRef.current) * factor;
if (Math.abs(newWaveT - pauseTargetT) < SNAP_EPS) {
newWaveT = pauseTargetT;
}
waveTRef.current = newWaveT;
} else {
// Not hovered: wave advances naturally at wall-clock speed.
waveTRef.current += dt;
}
const waveT = waveTRef.current;
colorOverlayRefs.current.forEach((ref, i) => {
const el = ref.current;
if (!el) return;
const iconT = waveT - i * STAGGER;
let left = 0, right = 0;
if (iconT > 0 && iconT < ICON_DUR) {
if (iconT < FILL_DUR) {
left = 0;
right = (iconT / FILL_DUR) * 100;
} else {
left = ((iconT - FILL_DUR) / DRAIN_DUR) * 100;
right = 100;
}
}
el.style.setProperty("--color-flow-left", left + "%");
el.style.setProperty("--color-flow-right", right + "%");
});
// All icons done? Clear the wave so we stop touching DOM.
// Only auto-clear when NOT hovered — otherwise we'd snap empty
// mid-hover.
const lastIconEnd = (iconRefs.current.length - 1) * STAGGER + ICON_DUR;
if (hov < 0 && waveT > lastIconEnd + 0.1) {
waveTRef.current = null;
colorOverlayRefs.current.forEach((ref) => {
const el = ref.current;
if (!el) return;
el.style.setProperty("--color-flow-left", "0%");
el.style.setProperty("--color-flow-right", "0%");
});
}
}
raf = requestAnimationFrame(tick);
lastTickTimeRef.current = performance.now();
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
return (
{/* connecting hairline — full-width; each icon's wider opaque
"slot" (icon + 20px padding on each side) hides the line
beneath it, producing the 20px gap on each side of each icon. */}
{steps.map((s, i) => (
onStepEnter(i)}
onMouseLeave={() => onStepLeave(i)}
>
{/* Iridescent icon — 25px square, sitting inside a wider
75px slot (25px padding each side) that hides the
connecting line for that span.
Stacked structure: a desaturated base + a color overlay
with an animated CSS mask. A wave of color sweeps across
the overlay every 15s, staggered per-icon. */}
{/* Grayscale base — always visible, desaturated. */}
{/* Color overlay — masked band of color sweeps across.
Per-icon delay produces the "current" passing from
step 01 → step 06. */}
);
}
/* ============================================== WHY ============== */
function Why({ t }) {
const pairs = [
{ not: "Not DIY", yes: "Directed by a creative who gives a damn." },
{ not: "Not a generator", yes: "A studio that writes before it generates." },
{ not: "Not a template kit", yes: "Bespoke scripts, characters, tone." },
{ not: "Not slow", yes: "Production in days, not weeks." },
{ not: "Not horizontal", yes: "Vertical-native. Social-first." },
{ not: "Not generic AI", yes: "The kind of AI video that doesn't look like AI." },
];
return (
{t.accentMoment && (
)}
05 — Why Koolorama
We make films people actually watch. The AI is in the room, but it doesn't write the jokes. Concept, craft and cut are directed by humans — so the work feels made, not generated.
{pairs.map((p, i) => (
{p.not}
{p.yes}
))}
);
}
/* ============================================== FINAL CTA ======== */
function FinalCTA({ t }) {
return (
06 — Studio
Let's make
a short.
{t.finalCtaIntro}
Or write directly — {t.finalCtaEmail}
);
}
/* ============================================== FOOTER ========== */
function Footer() {
return (
);
}
/* ============================================== INTRO =========== */
// Geometry of the prism inside the intro video and inside the static prism.png,
// measured from pixel data. We use these to make the video's final frame land
// on the hero prism at the exact same on-screen size + position.
const INTRO_VIDEO = {
// Final-frame prism bounding box, normalized to the 1:1 video frame.
prismWidthPct: 0.6712, // prism width / video width
prismHeightPct: 0.7627, // prism height / video height
prismCxPct: 0.5076, // prism center X / video width
prismCyPct: 0.5629, // prism center Y / video height
};
const HERO_PRISM = {
// Static prism.png — content bbox vs. image bounds
contentWidthPct: 0.9817,
contentHeightPct: 0.9403,
contentCxPct: 0.5012,
contentCyPct: 0.4916,
};
function Intro({ onDone, heroPrismSize }) {
const videoRef = useRef(null);
const [ready, setReady] = useState(false);
const [ending, setEnding] = useState(false);
const [entered, setEntered] = useState(false); // gates the initial fade-in
// Match the prism HEIGHT between video final frame and hero prism container.
// Hero prism visible height = heroPrismSize * HERO_PRISM.contentHeightPct.
// Video display height = that / INTRO_VIDEO.prismHeightPct.
const heroContentH = heroPrismSize * HERO_PRISM.contentHeightPct;
const heroContentW = heroPrismSize * HERO_PRISM.contentWidthPct;
// Use the average of the two scales for a balanced fit (video rotation
// changes aspect mid-flight; final frame is taller than the static png).
const scaleByH = heroContentH / (INTRO_VIDEO.prismHeightPct);
const scaleByW = heroContentW / (INTRO_VIDEO.prismWidthPct);
const videoSize = (scaleByH + scaleByW) / 2; // px, square
// Position so video's prism-center sits where hero's prism-center will sit.
// Hero blob container: left:50%, top:46%, translate(-50%,-50%), size=heroPrismSize
// So hero prism center on screen ≈ (50vw, 46vh) corrected by HERO_PRISM center offset:
// dx = (HERO_PRISM.contentCxPct - 0.5) * heroPrismSize
// dy = (HERO_PRISM.contentCyPct - 0.5) * heroPrismSize
const heroDx = (HERO_PRISM.contentCxPct - 0.5) * heroPrismSize;
const heroDy = (HERO_PRISM.contentCyPct - 0.5) * heroPrismSize;
// Place video center accordingly, then offset within video so prism center aligns
// video offset from its own center to its prism center:
const videoDx = (INTRO_VIDEO.prismCxPct - 0.5) * videoSize;
const videoDy = (INTRO_VIDEO.prismCyPct - 0.5) * videoSize;
useEffect(() => {
document.body.style.overflow = "hidden";
window.scrollTo(0, 0);
if (window.__lenis) window.__lenis.stop();
// Trigger the initial fade-in on next frame (so the transition runs)
const raf = requestAnimationFrame(() => setEntered(true));
const v = videoRef.current;
if (!v) return () => cancelAnimationFrame(raf);
const onCanPlay = () => setReady(true);
const onPlaying = () => setReady(true);
// Start the fade-out BEFORE the video actually ends so the white
// background appears to bleed through under the final frame rather
// than cutting after it. The video keeps playing during the fade.
const FADE_LEAD = 0.55; // seconds before duration to begin fade
const FADE_DURATION = 600; // ms — matches the CSS transition below
let endTimer = null;
let faded = false;
const beginFade = () => {
if (faded) return;
faded = true;
setEnding(true);
endTimer = setTimeout(() => {
document.body.style.overflow = "";
if (window.__lenis) window.__lenis.start();
onDone();
}, FADE_DURATION);
};
const onTimeUpdate = () => {
if (!v.duration || isNaN(v.duration)) return;
if (v.currentTime >= v.duration - FADE_LEAD) beginFade();
};
// Safety net — if timeupdate misses (rare), the ended event still triggers.
const onEnded = () => beginFade();
v.addEventListener("canplay", onCanPlay, { once: true });
v.addEventListener("playing", onPlaying, { once: true });
v.addEventListener("timeupdate", onTimeUpdate);
v.addEventListener("ended", onEnded, { once: true });
const p = v.play();
if (p && p.catch) p.catch(() => { setReady(true); setTimeout(beginFade, 200); });
return () => {
cancelAnimationFrame(raf);
if (endTimer) clearTimeout(endTimer);
v.removeEventListener("canplay", onCanPlay);
v.removeEventListener("playing", onPlaying);
v.removeEventListener("timeupdate", onTimeUpdate);
v.removeEventListener("ended", onEnded);
};
}, [onDone]);
return (
{/* Single fade wrapper: everything inside fades in together, only once. */}
{/* Static poster placed exactly where the video will sit — instant first paint.
Hidden the instant the video is ready (no fade, no double-blend with the video). */}
