// Home view
const HV_NS = window.DeckhausDesignSystem_ca5964;
// Small shared bits for the hero deck cards
function HeroEyebrow({ children, right }) {
const tick = ;
return (
);
}
// Card 2 — services as an interactive, clickable schematic
function HeroCardServices() {
const D = window.DH_DATA;
const [hover, setHover] = React.useState(-1);
return (
What we do
);
}
// Covers are born scattered across the hero — already floating: each one has a
// gentle idle drift AND the three columns' slow opposing scroll runs from the
// very first frame, so the whole cloud is alive from the start. At ~3.2s the
// covers converge into the moving columns with a soft in-out ease. Nothing ever
// switches on or off mid-scene (no scroll onset, no drift cutoff), so there is
// no velocity discontinuity anywhere — the morph from mess to order is seamless.
function FloatingCovers() {
const [assembled, setAssembled] = React.useState(false);
React.useEffect(() => {
const t1 = setTimeout(() => setAssembled(true), 3200);
return () => clearTimeout(t1);
}, []);
return (
{/* subtle premium lime glow — sits BEHIND the covers, on the right */}
{/* legibility scrims — left fade for the headline, vignette + top/bottom grade */}
);
}
function VisualSprintLoop() {
// Embedded, container-scaled port of the "Loop 06 — Visual Sprint" brand loop.
// cqw units scale every element to the framed 16:9 container.
const cards = [
{ delay: "-0.2s" }, { delay: "-0.5s" }, { sel: true }, { delay: "-0.8s" }, { delay: "-1.1s" },
];
return (
{/* phase row */}
BriefingExploreAlignCraftDelivery
{/* candidate routes — the Direction Room */}
{cards.map((c, i) => (
{c.sel ? : null}
))}
{/* caption */}
AI accelerates exploration. Human judgement defines the result.
);
}
// Selected work — editorial spread: one featured case + a Swiss contents index
function CaseShowcase() {
const { Eyebrow, Button } = HV_NS;
const cases = window.DH_DATA.cases;
const [active, setActive] = React.useState(0);
const c = cases[active];
return (
{/* ambient depth — a few blurred hero covers building a universe */}
{/* header */}
Selected work
One idea, made presentation-ready.
Every project starts as a decision about how a brand should look, feel and be remembered — then becomes a system the whole team can run.
);
}
// Studio band — cinematic photo with the four principles overlaid, revealed on scroll
function StudioPrinciple({ t, d, i, seen, ease }) {
const [hov, setHov] = React.useState(false);
const lead = i === 0;
return (
);
}
function StudioBand() {
const ref = React.useRef(null);
const paraRef = React.useRef(null);
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
const el = ref.current; if (!el) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setSeen(true); return; }
const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }), { threshold: 0.22 });
io.observe(el);
return () => io.disconnect();
}, []);
// Real parallax: a dedicated over-sized layer glides slower than the scroll.
// The image bleeds 18% past the frame on both sides so it never reveals an edge.
React.useEffect(() => {
const el = ref.current, layer = paraRef.current; if (!el || !layer) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const RANGE = 0; // parallax disabled so the full photo stays edge-to-edge (no bleed crop)
let raf = null;
const update = () => {
raf = null;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
// progress: -1 as it enters from the bottom → +1 as it leaves the top
let p = (vh / 2 - (r.top + r.height / 2)) / (vh / 2 + r.height / 2);
p = Math.max(-1, Math.min(1, p));
layer.style.transform = `translate3d(0, ${(-p * RANGE).toFixed(2)}px, 0)`;
};
const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); };
update();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
const ease = "cubic-bezier(.16,1,.3,1)";
const items = [
["Senior attention, end to end.", "The people who shape the work stay close to it."],
["Systems, not one-offs.", "We leave teams with a stronger starting point."],
["AI with judgement.", "Exploration moves faster. Human direction decides."],
["Built across borders.", "Remote by design. Close to the work."],
];
return (
{/* full-bleed studio photo — shown whole, aspect-matched so nothing is cropped */}
{/* cinematic grade — deeper, richer bottom for the type to sit on */}
Inside the studio · remote by design
{items.map(([t, d], i) => (
))}
);
}
// Visual Sprint — interactive phase explorer (fused with the Guide's method language)
function SprintStepper({ steps }) {
const short = ["Briefing", "Prompt", "Explore", "Craft", "Delivery"];
const ai = { 1: true, 2: true };
const [active, setActive] = React.useState(0);
const [paused, setPaused] = React.useState(false);
React.useEffect(() => {
if (paused) return;
const t = setInterval(() => setActive(a => (a + 1) % steps.length), 3600);
return () => clearInterval(t);
}, [paused, steps.length]);
const frac = steps.length > 1 ? active / (steps.length - 1) : 0;
const ease = "cubic-bezier(.16,1,.3,1)";
return (
{steps.map((s, i) => {
const on = i === active; const done = i <= active;
return (
);
})}
{/* detail */}
{steps[active].n}
{steps[active].title}
{ai[active] ? AI-assisted : null}
{steps[active].desc}
{/* footer hint */}
Hover the phases · full method inside
);
}
// What we do — animated line-art icon per service (clarity from the Guide's "four ways")
function WhatWeDoIcon({ kind }) {
const LIME = "var(--lime-500)";
const ST = "rgba(10,10,11,.32)", STn = "rgba(10,10,11,.18)", LN = "rgba(10,10,11,.26)", LNs = "rgba(10,10,11,.16)";
if (kind === 0) {
return (
);
}
if (kind === 1) {
return (
);
}
return (
);
}
// What we do — three visual service cards
function WhatWeDoCards({ lines }) {
const labels = ["01 — Core", "02", "03"];
const outcomes = [
"The pitch, the sale, the board — built to win the room.",
"One visual language that keeps every moment on-brand.",
"Screens, keynotes and motion that own the moment.",
];
const tones = ["#1d2a1f", "#24201a", "#181b22"];
const shots = ["Pitch deck / sales", "Campaign / social", "Event / keynote"];
return (
{lines.map((l, i) => (
Fig. 0{i + 1}{shots[i]} · drop photo
{labels[i]}{l.scale}
{l.title}
{outcomes[i]}
{l.tags.map((t, k) => (
{t}
))}
))}
);
}
// Count-up number that animates when it scrolls into view
function CountUp({ to, duration = 1500 }) {
const ref = React.useRef(null);
const [val, setVal] = React.useState(0);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVal(to); return; }
let raf = null, started = false;
const io = new IntersectionObserver((es) => es.forEach(e => {
if (e.isIntersecting && !started) {
started = true;
const t0 = performance.now();
const step = (t) => {
const p = Math.min(1, (t - t0) / duration);
setVal(Math.round((1 - Math.pow(1 - p, 3)) * to));
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
io.disconnect();
}
}), { threshold: 0.6 });
io.observe(el);
return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
}, [to, duration]);
return {val};
}
// Visual Sprint — big count-up numbers band
function SprintStats() {
const items = [
{ kicker: "Up to", to: 70, unit: "%", label: "less time exploring visual directions" },
{ to: 5, unit: "", label: "phases, from briefing to delivery" },
{ to: 1, unit: "", label: "direction, locked before production" },
];
return (
{items.map((s, i) => (
{s.kicker || "—"}
{s.unit ? {s.unit} : null}
{s.label}
))}
);
}
// Three scales — big, persuasive, clickable service rows
// Three scales — spotlight panels: white when collapsed, dark spotlight when active
const SR_EASE = "cubic-bezier(.16,1,.3,1)";
const SR_BENEFIT = ["Win the room.", "Stay unmistakable.", "Own the moment."];
const SR_PITCH = [
"The pitch, the sale, the board — designed to land when it matters most.",
"One visual language that keeps every moment, every month, on-brand.",
"Screens, keynotes and motion that command the room and the feed.",
];
// Crossfading loop of the two clips — only plays while `playing` is true
function VideoDuet({ playing }) {
const SRCS = [
"uploads/VideoWeb.mp4",
"uploads/business-meeting-presentation-in-modern-office-set-2026-01-20-22-58-42-utc.mp4",
];
const FADE = 0.8; // seconds of crossfade before a clip ends
const refs = [React.useRef(null), React.useRef(null)];
const [cur, setCur] = React.useState(0);
const busy = React.useRef(false);
React.useEffect(() => {
if (playing) { refs[cur].current && refs[cur].current.play().catch(() => {}); }
else { refs[0].current && refs[0].current.pause(); refs[1].current && refs[1].current.pause(); }
}, [playing, cur]);
const onTime = (idx) => () => {
if (idx !== cur || busy.current || !playing) return;
const v = refs[idx].current;
if (!v || !v.duration || isNaN(v.duration)) return;
if (v.duration - v.currentTime <= FADE) {
busy.current = true;
const next = idx === 0 ? 1 : 0;
const nv = refs[next].current;
if (nv) { try { nv.currentTime = 0; } catch (e) {} nv.play().catch(() => {}); }
setCur(next);
setTimeout(() => { busy.current = false; }, FADE * 1000 + 150);
}
};
return (
{SRCS.map((src, idx) => (
))}
);
}
// Lacoste brand-experience reel — crossfades event shots while the panel is active
function LacosteReel({ playing }) {
const SHOTS = [
"assets/work/lacoste-court-hero.jpg?v=3",
"assets/work/lacoste/ev-photocall.png?v=3",
"assets/work/lacoste/ev-stage.png",
"assets/work/lacoste/ev-entrance.png",
"assets/work/lacoste/ev-cocktail.png?v=3",
];
const [i, setI] = React.useState(0);
React.useEffect(() => {
if (!playing) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const t = setInterval(() => setI(p => (p + 1) % SHOTS.length), 2000);
return () => clearInterval(t);
}, [playing]);
return (
{SHOTS.map((s, k) => (
))}
);
}
// Content-systems reel — crossfades the brand visual-library pieces while active
function ContentReel({ playing }) {
const SHOTS = [
"assets/work/content-systems/mango.png",
"assets/work/content-systems/on.png",
"assets/work/content-systems/rolex.png",
];
const [i, setI] = React.useState(0);
React.useEffect(() => {
if (!playing) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const t = setInterval(() => setI(p => (p + 1) % SHOTS.length), 2400);
return () => clearInterval(t);
}, [playing]);
return (
{SHOTS.map((s, k) => (
))}
);
}
function ServicePanel({ l, i, active, onActivate }) {
const on = i === active;
const hasVideo = i === 0;
const hasContent = i === 1;
const hasReel = i === 2;
return (
{status === "sent" ? `Thanks, ${name.trim()} — we'll reply to ${email.trim()} shortly.` : status === "error" ? `Couldn't send — email us at ${DEST}.` : ready ? "Ready — your brief is written. Tap send." : "Add your name and email to send."}
I know you're dying to see what they say about us ;)
{open ? setOpen(false)} /> : null}
);
}
function HomeView() {
const { Button, Eyebrow, StatBlock, Badge, Tag, Card } = HV_NS;
const D = window.DH_DATA;
const heroRef = React.useRef(null);
React.useEffect(() => {
const hero = heroRef.current;
if (!hero) return;
if (!(window.matchMedia && window.matchMedia("(pointer:fine)").matches)) return;
const glow = hero.querySelector("[data-grid-glow]");
const light = hero.querySelector("[data-cursor-light]");
let raf = null, cx = 0, cy = 0, on = false;
const apply = () => {
raf = null;
hero.style.setProperty("--mx", cx + "px");
hero.style.setProperty("--my", cy + "px");
if (light) { light.style.left = cx + "px"; light.style.top = cy + "px"; }
};
const move = (e) => {
const r = hero.getBoundingClientRect();
cx = e.clientX - r.left; cy = e.clientY - r.top;
if (!on) { on = true; if (glow) glow.style.opacity = ".5"; if (light) light.style.opacity = "1"; }
if (!raf) raf = requestAnimationFrame(apply);
};
const leave = () => { on = false; if (glow) glow.style.opacity = "0"; if (light) light.style.opacity = "0"; };
hero.addEventListener("pointermove", move);
hero.addEventListener("pointerleave", leave);
return () => { hero.removeEventListener("pointermove", move); hero.removeEventListener("pointerleave", leave); if (raf) cancelAnimationFrame(raf); };
}, []);
return (
{/* HERO — dark impact, work-wall as depth layer behind */}
{/* full-bleed floating-covers gallery — the hero backdrop */}
{/* premium background grid — spans the hero, faded in radially toward the
right (where the lime glow sits) and out at the edges */}
{/* ambient lime destello + faint grid on the left, behind the headline */}
{/* living grid — lime grid + soft halo that follow the cursor (invisible at rest) */}
Boutique visual communication studio
Present. Launch. Grow.
Most companies don't have a design problem — they have a communication-system problem. Deckhaus builds the visual systems behind how a brand presents, launches and grows.
{/* MANIFESTO — paper, editorial belief moment */}
{[
["01", "One system, not many pieces.", "A deck, a campaign and an event should feel like one mind — we build the language, not the one-off.", 1, "System"],
["02", "Decide before you produce.", "Alignment before execution — we validate the direction visually, so everything after is faster.", 2, "Decide"],
["03", AI accelerates; people decide., "It widens exploration and removes repetition. Judgement still chooses the route and signs the work.", 3, "Judgement"],
].map(([n, t, d, kind, kicker], i) => (
))}
{/* CASE SHOWCASE — flagship 3-up */}
{/* BUSINESS LINES — paper editorial */}
What we do
Three scales of one idea.
Not three markets — three scales of the same problem: how a brand shows up, stays clear and becomes memorable.
{/* VISUAL SPRINT — dark impact band */}
Visual Sprint™
Decide how it should look and feel — before you build everything else.
Not just speed — it's how we reach alignment before execution. Routes are validated visually before production, so everything after stays coherent and scales faster.
{/* STUDIO — paper, who & how */}
The studio
Design-led. Human first. AI throughout.
A focused studio where every project is led end to end by the people who shape it. AI sits in the room to widen exploration and cut repetition — never to make the call.
{/* cinematic studio band — principles overlaid on the photo */}
0) ? `blur(${S.blur}px)` : "none", transition: `filter .75s ease ${delay}ms` }} />
{ e.currentTarget.style.opacity = 1; }} onMouseLeave={(e) => { e.currentTarget.style.opacity = .62; }} />
))}