Hero Paths
A hero that splits visitors in two: a title, then two tall pictures that are links, and the one under the pointer widens while its call to action rises.
View codeHero Collage
A centred hero with pictures scattered around the title: they open one after the other, then follow the mouse a little, each at its own depth.
Hero
No dependencies
herosectionlandingentrancecollageparallaxpointer
Added Oct 2026
With your AI
Just ask.
Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.
Add the Kodza Hero Collage to my page.
Not plugged in yet?
Also in Codex, Cursor and VS Code.
claude mcp add -t http kodza https://kodza.dev/api/mcp
<section class="kodza-hero-collage">
<div class="kodza-hero-collage__stage">
<div class="kodza-hero-collage__shots" aria-hidden="true">
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-float-1400.webp" alt="" width="1400" height="933" /></div></div></div>
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-arch-1400.webp" alt="" width="1400" height="1400" /></div></div></div>
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-columns-1400.webp" alt="" width="1120" height="1400" /></div></div></div>
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-stack-1400.webp" alt="" width="1400" height="1050" /></div></div></div>
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-overflow-1400.webp" alt="" width="1400" height="1400" /></div></div></div>
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-steps-1400.webp" alt="" width="1400" height="933" /></div></div></div>
<div class="kodza-hero-collage__shot"><div class="kodza-hero-collage__curtain"><div class="kodza-hero-collage__hold"><img src="https://kodza.dev/media/kz-block-1400.webp" alt="" width="1120" height="1400" /></div></div></div>
</div>
<div class="kodza-hero-collage__inner">
<p class="kodza-hero-collage__eyebrow"><span class="kodza-hero-collage__rise">Open studio · 14–16 November</span></p>
<h1 class="kodza-hero-collage__title"><span class="kodza-hero-collage__line"><span class="kodza-hero-collage__rise">Eleven rooms.</span></span> <span class="kodza-hero-collage__line"><span class="kodza-hero-collage__rise">No keynote.</span></span></h1>
<p class="kodza-hero-collage__lead">Three days of work in progress, pinned to the walls. Come see how it's made, not how it's pitched.</p>
<div class="kodza-hero-collage__actions">
<a class="kodza-hero-collage__button kodza-hero-collage__button--ink" href="#">Get a free pass<svg class="kodza-hero-collage__arrow" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.5 13.5 8 9 12.5" /></svg></a>
<a class="kodza-hero-collage__button kodza-hero-collage__button--soft" href="#">See the program</a>
</div>
</div>
</div>
</section>/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Hero Collage
The title in the middle, a handful of pictures scattered around it on a loose grid. They open
one after the other, going round the title, then follow the pointer a little, each one at its
own depth (never on a touch screen). Each picture is placed by its own variables, so a shot
can be moved, resized or brought forward without touching the others. Everything is tuned
with the --kz-hero-collage-* variables. */
.kodza-hero-collage {
--kz-hero-collage-ink: #0a0a0a;
--kz-hero-collage-paper: #f2f2f0;
--kz-hero-collage-dim: rgba(10, 10, 10, 0.62);
--kz-hero-collage-faint: rgba(10, 10, 10, 0.6);
--kz-hero-collage-soft: rgba(10, 10, 10, 0.07);
--kz-hero-collage-bg: transparent;
--kz-hero-collage-height: clamp(640px, 54vw, 820px);
--kz-hero-collage-gutter: clamp(16px, 4vw, 40px);
--kz-hero-collage-radius: 12px;
--kz-hero-collage-drift: 32px;
--kz-hero-collage-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
--kz-hero-collage-ease: cubic-bezier(0.22, 1, 0.36, 1);
container: kodza-hero-collage / inline-size;
box-sizing: border-box;
width: 100%;
background: var(--kz-hero-collage-bg);
color: var(--kz-hero-collage-ink);
}
/* The words in the middle, with room above and below them for the pictures */
.kodza-hero-collage__stage {
position: relative;
isolation: isolate;
box-sizing: border-box;
display: grid;
place-items: center;
min-height: var(--kz-hero-collage-height);
padding: 96px max(var(--kz-hero-collage-gutter), env(safe-area-inset-right, 0px)) 96px max(var(--kz-hero-collage-gutter), env(safe-area-inset-left, 0px));
overflow: clip;
}
/* The pictures: a layer of their own under the words, which never catches a click */
.kodza-hero-collage__shots {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* Where each one sits, in percent of the section: left edge, top edge, width. The depth says how
far it follows the pointer, from 0 (still) to 1 (the whole drift) */
.kodza-hero-collage__shot {
position: absolute;
left: var(--kz-hero-collage-x);
top: var(--kz-hero-collage-y);
width: var(--kz-hero-collage-w);
overflow: hidden;
border-radius: var(--kz-hero-collage-radius);
}
.kodza-hero-collage__shot:nth-child(1) { --kz-hero-collage-x: 4%; --kz-hero-collage-y: 9%; --kz-hero-collage-w: 16%; --kz-hero-collage-depth: 1; }
.kodza-hero-collage__shot:nth-child(2) { --kz-hero-collage-x: 30%; --kz-hero-collage-y: 5%; --kz-hero-collage-w: 8%; --kz-hero-collage-depth: 0.4; }
.kodza-hero-collage__shot:nth-child(3) { --kz-hero-collage-x: 79%; --kz-hero-collage-y: 6%; --kz-hero-collage-w: 11%; --kz-hero-collage-depth: 0.75; }
.kodza-hero-collage__shot:nth-child(4) { --kz-hero-collage-x: 83%; --kz-hero-collage-y: 52%; --kz-hero-collage-w: 13%; --kz-hero-collage-depth: 0.9; }
.kodza-hero-collage__shot:nth-child(5) { --kz-hero-collage-x: 70%; --kz-hero-collage-y: 78%; --kz-hero-collage-w: 10%; --kz-hero-collage-depth: 0.5; }
.kodza-hero-collage__shot:nth-child(6) { --kz-hero-collage-x: 20%; --kz-hero-collage-y: 81%; --kz-hero-collage-w: 13%; --kz-hero-collage-depth: 0.65; }
.kodza-hero-collage__shot:nth-child(7) { --kz-hero-collage-x: 7%; --kz-hero-collage-y: 50%; --kz-hero-collage-w: 11.5%; --kz-hero-collage-depth: 0.8; }
/* The curtain: the middle layer slides down from above while the inner one slides up into
place, so the picture is uncovered from the top edge down and never moves itself. The shot
clips it: a moving clip would let the zoomed picture show above its place before it opens */
.kodza-hero-collage__curtain {
overflow: hidden;
}
.kodza-hero-collage__hold {
display: block;
}
.kodza-hero-collage__shot img {
display: block;
width: 100%;
height: auto;
}
.kodza-hero-collage__inner {
display: grid;
justify-items: center;
max-width: 760px;
text-align: center;
}
.kodza-hero-collage__eyebrow {
margin: 0 0 20px;
overflow: hidden;
font-family: var(--kz-hero-collage-mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--kz-hero-collage-faint);
}
.kodza-hero-collage__rise {
display: block;
}
.kodza-hero-collage__title {
margin: 0;
font-size: clamp(42px, 6.6cqi, 96px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--kz-hero-collage-ink);
}
/* Each line is a mask the words rise out of; the room below keeps the descenders whole */
.kodza-hero-collage__line {
display: block;
overflow: hidden;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.kodza-hero-collage__lead {
max-width: 36ch;
margin: 24px 0 0;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.55;
color: var(--kz-hero-collage-dim);
text-wrap: pretty;
}
.kodza-hero-collage__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 32px;
}
.kodza-hero-collage__button {
position: relative;
isolation: isolate;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 10px;
height: 52px;
padding: 0 26px;
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.kodza-hero-collage__button:focus-visible {
outline: 2px solid var(--kz-hero-collage-ink);
outline-offset: 3px;
}
/* Solid: the arrow steps forward on hover */
.kodza-hero-collage__button--ink {
background: var(--kz-hero-collage-ink);
color: var(--kz-hero-collage-paper);
}
.kodza-hero-collage__arrow {
flex: none;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s var(--kz-hero-collage-ease);
}
/* Soft: ink rises from the bottom edge on hover */
.kodza-hero-collage__button--soft {
background: var(--kz-hero-collage-soft);
color: var(--kz-hero-collage-ink);
transition: color 0.4s var(--kz-hero-collage-ease);
}
.kodza-hero-collage__button--soft::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--kz-hero-collage-ink);
transform: translateY(101%);
transition: transform 0.4s var(--kz-hero-collage-ease);
}
@media (hover: hover) {
.kodza-hero-collage__button--ink:hover .kodza-hero-collage__arrow {
transform: translateX(4px);
}
.kodza-hero-collage__button--soft:hover {
color: var(--kz-hero-collage-paper);
}
.kodza-hero-collage__button--soft:hover::before {
transform: none;
}
}
/* Waiting for its entrance: the script sets is-shown and plays the motion in the same frame */
@media (prefers-reduced-motion: no-preference) {
.kodza-hero-collage.is-ready:not(.is-shown) .kodza-hero-collage__rise {
transform: translateY(105%);
}
/* 2px past the edge: a curtain closed exactly on the frame's edge leaks a hairline */
.kodza-hero-collage.is-ready:not(.is-shown) .kodza-hero-collage__curtain {
transform: translateY(calc(-100% - 2px));
}
.kodza-hero-collage.is-ready:not(.is-shown) .kodza-hero-collage__hold {
transform: translateY(calc(100% + 2px));
}
.kodza-hero-collage.is-ready:not(.is-shown) .kodza-hero-collage__lead,
.kodza-hero-collage.is-ready:not(.is-shown) .kodza-hero-collage__actions {
opacity: 0;
transform: translateY(20px);
}
}
/* A phone: the words take the middle band, the pictures gather above and below them. The
bands are sized on the width, and the lower shots are placed from the bottom edge */
@container kodza-hero-collage (max-width: 700px) {
.kodza-hero-collage__stage {
min-height: 0;
padding-top: 66cqi;
padding-bottom: 62cqi;
}
.kodza-hero-collage__shot:nth-child(1) { --kz-hero-collage-x: 4%; --kz-hero-collage-y: 6cqi; --kz-hero-collage-w: 40%; }
.kodza-hero-collage__shot:nth-child(2) { --kz-hero-collage-x: 50%; --kz-hero-collage-y: 2cqi; --kz-hero-collage-w: 22%; }
.kodza-hero-collage__shot:nth-child(3) { --kz-hero-collage-x: 78%; --kz-hero-collage-y: 13cqi; --kz-hero-collage-w: 18%; }
.kodza-hero-collage__shot:nth-child(4) { --kz-hero-collage-x: 62%; --kz-hero-collage-y: calc(100% - 50cqi); --kz-hero-collage-w: 32%; }
.kodza-hero-collage__shot:nth-child(5) { --kz-hero-collage-x: 36%; --kz-hero-collage-y: calc(100% - 30cqi); --kz-hero-collage-w: 19%; }
.kodza-hero-collage__shot:nth-child(6) { --kz-hero-collage-x: 30%; --kz-hero-collage-y: 40cqi; --kz-hero-collage-w: 24%; }
.kodza-hero-collage__shot:nth-child(7) { --kz-hero-collage-x: 5%; --kz-hero-collage-y: calc(100% - 55cqi); --kz-hero-collage-w: 22%; }
.kodza-hero-collage__button {
flex: 1 1 auto;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.kodza-hero-collage *,
.kodza-hero-collage *::before,
.kodza-hero-collage *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* kodza-guard 671b82f67ff7 — generated by Kodza, do not edit.
Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
component. :not(#_) is always true and weighs as much as an id, so these lines win over
theme rules made of classes and tags. Customise the component through its --kz-* variables. */
/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */
:where(.kodza-hero-collage__eyebrow):not(#_),
:where(.kodza-hero-collage__title):not(#_),
:where(.kodza-hero-collage__lead):not(#_),
:where(.kodza-hero-collage__hold img:where(:not([class*="kodza-"]))):not(#_) {
transition-duration: revert;
}
:where(.kodza-hero-collage__button):not(#_) {
outline: revert;
transition: revert;
outline-offset: revert;
}
/* What the browser gives, on everything the component leaves to it */
.kodza-hero-collage__shots:not(#_),
.kodza-hero-collage__shot:not(#_),
.kodza-hero-collage__curtain:not(#_),
.kodza-hero-collage__hold:not(#_),
.kodza-hero-collage__inner:not(#_),
.kodza-hero-collage__rise:not(#_),
.kodza-hero-collage__line:not(#_),
.kodza-hero-collage__actions:not(#_) {
box-sizing: revert;
}
.kodza-hero-collage__eyebrow:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-style: revert;
line-height: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
transition-delay: revert;
}
.kodza-hero-collage__title:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-style: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
transition-delay: revert;
}
.kodza-hero-collage__lead:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-height: revert;
font-family: revert;
font-weight: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
transition-delay: revert;
}
.kodza-hero-collage__button:not(#_) {
margin: revert;
list-style: revert;
float: revert;
box-shadow: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-collage__arrow:not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-collage__hold img:where(:not([class*="kodza-"])):not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
transition-delay: revert;
}
.kodza-hero-collage__eyebrow:not(#_):where(:not([hidden])),
.kodza-hero-collage__title:not(#_):where(:not([hidden])),
.kodza-hero-collage__lead:not(#_):where(:not([hidden])),
.kodza-hero-collage__arrow:not(#_):where(:not([hidden])) {
display: revert;
}
.kodza-hero-collage__eyebrow:not(#_):where([hidden]),
.kodza-hero-collage__title:not(#_):where([hidden]),
.kodza-hero-collage__lead:not(#_):where([hidden]),
.kodza-hero-collage__arrow:not(#_):where([hidden]) {
display: none;
}
/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */
.kodza-hero-collage__shot img:not(#_) {
display: block;
}
.kodza-hero-collage__eyebrow:not(#_) {
margin: 0 0 20px;
font-family: var(--kz-hero-collage-mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--kz-hero-collage-faint);
}
.kodza-hero-collage__title:not(#_) {
margin: 0;
font-size: clamp(42px, 6.6cqi, 96px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--kz-hero-collage-ink);
}
.kodza-hero-collage__lead:not(#_) {
max-width: 36ch;
margin: 24px 0 0;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.55;
color: var(--kz-hero-collage-dim);
}
.kodza-hero-collage__button:not(#_) {
position: relative;
box-sizing: border-box;
display: inline-flex;
padding: 0 26px;
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-decoration: none;
}
.kodza-hero-collage__button:focus-visible:not(#_) {
outline: 2px solid var(--kz-hero-collage-ink);
outline-offset: 3px;
}
.kodza-hero-collage__button--ink:not(#_) {
background: var(--kz-hero-collage-ink);
color: var(--kz-hero-collage-paper);
}
.kodza-hero-collage__arrow:not(#_) {
transition: transform 0.3s var(--kz-hero-collage-ease);
}
.kodza-hero-collage__button--soft:not(#_) {
background: var(--kz-hero-collage-soft);
color: var(--kz-hero-collage-ink);
transition: color 0.4s var(--kz-hero-collage-ease);
}
@media (hover: hover) {
.kodza-hero-collage__button--soft:hover:not(#_) {
color: var(--kz-hero-collage-paper);
}
}
@media (prefers-reduced-motion: reduce) {
.kodza-hero-collage *:where(img, p, h1, a, svg):not(#_) {
transition-duration: 0.01ms !important;
}
}// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Hero Collage
// The entrance, once the section is in view: the label and the title lines rise from their masks,
// then the pictures open one after the other, going round the title, and the words and buttons
// follow. With a mouse, the pictures then follow the pointer a little, each one by its own depth
// (--kz-hero-collage-depth), smoothed by a small loop that stops once they settle. Never on a
// touch screen, never with reduced motion. "kodza:replay" plays the entrance again.
(() => {
const SELECTOR = '.kodza-hero-collage';
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
const GLIDE = 'cubic-bezier(0.6, 0, 0.1, 1)'; // slow start, long settle
const SOFT = 'cubic-bezier(0.25, 1, 0.5, 1)';
const OPEN = 'cubic-bezier(0.3, 0.5, 0.1, 1)'; // the curtains: a slow start would leave each picture a hairline for 200 ms
const SMOOTH = 140; // how long the pictures take to catch the pointer, in ms (time constant)
const decoded = (root) => Promise.all([...root.querySelectorAll('img')].map((img) => img.decode().catch(() => {})));
// One instance, with its own state: two copies on a page never interfere. Everything it
// starts is tied to `signal` (listeners get { signal }, observers and timers stop on its
// 'abort' event), so kodza:destroy stops it all.
function mount(root, signal) {
const q = (name) => [...root.querySelectorAll(`.kodza-hero-collage__${name}`)];
const shots = q('shot');
let running = [];
const stop = () => {
running.forEach((a) => a.cancel());
running = [];
};
const animate = (el, keyframes, options) => {
if (el) running.push(el.animate(keyframes, { easing: GLIDE, fill: 'backwards', ...options }));
};
const rise = (el, delay, duration) => animate(el, [{ transform: 'translateY(105%)' }, { transform: 'none' }], { duration, delay });
const come = (el, delay) => animate(el, [{ opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'none' }], { duration: 900, delay, easing: SOFT });
const play = async () => {
await decoded(root);
if (signal.aborted) return;
stop();
root.classList.add('is-shown');
q('rise').forEach((el, i) => rise(el, i * 110, i ? 1100 : 1000));
// In the order of the markup: round the title, from the top left
shots.forEach((shot, i) => {
const delay = 250 + i * 120;
const at = (name) => shot.querySelector(`.kodza-hero-collage__${name}`);
animate(at('curtain'), [{ transform: 'translateY(calc(-100% - 2px))' }, { transform: 'none' }], { duration: 1350, delay, easing: OPEN });
animate(at('hold'), [{ transform: 'translateY(calc(100% + 2px))' }, { transform: 'none' }], { duration: 1350, delay, easing: OPEN });
animate(shot.querySelector('img'), [{ transform: 'scale(1.2)' }, { transform: 'none' }], { duration: 2000, delay, easing: SOFT });
});
come(q('lead')[0], 650);
come(q('actions')[0], 760);
};
if (reduceMotion) {
root.classList.add('is-shown');
return;
}
// The drift: the pointer from the middle of the section, from -1 to 1 on each axis, times the
// drift and each picture's depth. They go the way the pointer goes
const depths = shots.map((shot) => parseFloat(getComputedStyle(shot).getPropertyValue('--kz-hero-collage-depth')) || 0);
let target = { x: 0, y: 0 };
let now = { x: 0, y: 0 };
let reach = 0;
let frame = 0;
let last = 0;
const draw = () => shots.forEach((shot, i) => {
const k = depths[i] * reach;
shot.style.transform = now.x || now.y ? `translate3d(${(now.x * k).toFixed(2)}px, ${(now.y * k).toFixed(2)}px, 0)` : '';
});
const tick = (time) => {
const dt = Math.min(64, time - (last || time));
last = time;
const ease = 1 - Math.exp(-dt / SMOOTH);
now = { x: now.x + (target.x - now.x) * ease, y: now.y + (target.y - now.y) * ease };
const settled = Math.abs(target.x - now.x) < 0.001 && Math.abs(target.y - now.y) < 0.001;
if (settled) now = { ...target };
draw();
frame = settled ? 0 : requestAnimationFrame(tick);
};
const follow = (x, y) => {
target = { x, y };
if (frame) return;
last = 0;
frame = requestAnimationFrame(tick);
};
root.addEventListener('pointermove', (event) => {
if (event.pointerType !== 'mouse' || !finePointer.matches) return;
const box = root.getBoundingClientRect();
if (!box.width || !box.height) return;
reach = parseFloat(getComputedStyle(root).getPropertyValue('--kz-hero-collage-drift')) || 0;
const clamp = (v) => Math.max(-1, Math.min(1, v));
follow(clamp(((event.clientX - box.left) / box.width) * 2 - 1), clamp(((event.clientY - box.top) / box.height) * 2 - 1));
}, { signal });
root.addEventListener('pointerleave', () => follow(0, 0), { signal });
signal.addEventListener('abort', () => {
cancelAnimationFrame(frame);
shots.forEach((shot) => (shot.style.transform = ''));
});
root.addEventListener('kodza:replay', play, { signal });
signal.addEventListener('abort', stop);
const io = new IntersectionObserver((entries) => {
if (!entries.some((entry) => entry.isIntersecting)) return;
io.disconnect();
play();
}, { rootMargin: '0px 0px -15% 0px' });
signal.addEventListener('abort', () => io.disconnect());
Promise.all([document.fonts?.ready, decoded(root)]).then(() => {
if (!signal.aborted) io.observe(root);
});
}
// Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
// event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
// markup back. For themes and apps that swap content without a page load. Each running root
// keeps its markup as written under KODZA, shared by every Kodza script on the page: a Kodza
// component inside another one is saved as written, not half-started, and stopped with it.
const KODZA = Symbol.for('kodza');
const instances = new WeakMap();
const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
const attrsOf = (el) => [...el.attributes].map((a) => [a.name, a.value]);
const put = (el, saved) => {
[...el.attributes].forEach((a) => el.removeAttribute(a.name));
saved.attrs.forEach(([name, value]) => el.setAttribute(name, value));
el.innerHTML = saved.html;
};
// The markup inside a root as written: Kodza components already running in it give back their own
const written = (root) => {
const all = [...root.querySelectorAll('*')];
if (!all.some((el) => el[KODZA])) return root.innerHTML;
const copy = root.cloneNode(true);
const twins = copy.querySelectorAll('*');
let last = null;
all.forEach((el, i) => {
if (!el[KODZA] || last?.contains(el)) return;
last = el;
put(twins[i], el[KODZA]);
});
return copy.innerHTML;
};
const init = (scope) => find(scope).forEach((root) => {
if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
const controller = new AbortController();
const saved = { html: written(root), attrs: attrsOf(root), stop: () => destroy(root) };
instances.set(root, { controller, saved });
root[KODZA] = saved;
mount(root, controller.signal);
root.classList.add('is-ready');
});
const destroy = (scope) => find(scope).forEach((root) => {
const instance = instances.get(root);
if (!instance) return;
instances.delete(root);
// The Kodza components running inside it stop first: once its markup is put back, their own
// script could not find them any more
root.querySelectorAll('*').forEach((el) => el[KODZA]?.stop());
instance.controller.abort();
delete root[KODZA];
put(root, instance.saved);
});
document.addEventListener('kodza:init', (event) => init(event.detail?.root));
document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
init();
// Loaded in <head>, the script runs before the markup exists: once more when it is parsed
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();'use client';
// Kodza — Hero Collage, for React. From https://kodza.dev/components/hero-collage/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: hero-collage.css and hero-collage.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './hero-collage.css';
export type HeroCollageProps = Omit<ComponentPropsWithoutRef<'section'>, "children" | "vars"> & {
/** Settings, as CSS variables on the root */
vars?: {
/** default: #0a0a0a */
"--kz-hero-collage-ink"?: string | number;
/** default: #f2f2f0 */
"--kz-hero-collage-paper"?: string | number;
/** default: rgba(10, 10, 10, 0.62) */
"--kz-hero-collage-dim"?: string | number;
/** default: rgba(10, 10, 10, 0.6) */
"--kz-hero-collage-faint"?: string | number;
/** default: rgba(10, 10, 10, 0.07) */
"--kz-hero-collage-soft"?: string | number;
/** default: transparent */
"--kz-hero-collage-bg"?: string | number;
/** default: clamp(640px, 54vw, 820px) */
"--kz-hero-collage-height"?: string | number;
/** default: clamp(16px, 4vw, 40px) */
"--kz-hero-collage-gutter"?: string | number;
/** default: 12px */
"--kz-hero-collage-radius"?: string | number;
/** default: 32px */
"--kz-hero-collage-drift"?: string | number;
/** default: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace */
"--kz-hero-collage-mono"?: string | number;
/** default: cubic-bezier(0.22, 1, 0.36, 1) */
"--kz-hero-collage-ease"?: string | number;
};
className?: string;
};
export function HeroCollage({ vars, className, style, ...rest }: HeroCollageProps) {
const ref = useRef<ComponentRef<'section'>>(null);
const classes = ["kodza-hero-collage", className].filter(Boolean).join(' ');
// Everything the markup is made of: when it changes, React gets a fresh element (see the top)
const key = JSON.stringify([classes, vars, style, rest]);
// Starts the script on this element once React has rendered it, stops it when it goes
useEffect(() => {
const root = ref.current;
let live = true;
// @ts-ignore: a plain script, no types to find
import('./hero-collage.js').then(() => {
if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
});
return () => {
live = false;
document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
};
}, [key]);
return (
<section key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
<div className="kodza-hero-collage__stage">
<div className="kodza-hero-collage__shots" aria-hidden="true">
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-float-1400.webp" alt="" width="1400" height="933" />
</div>
</div>
</div>
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-arch-1400.webp" alt="" width="1400" height="1400" />
</div>
</div>
</div>
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-columns-1400.webp" alt="" width="1120" height="1400" />
</div>
</div>
</div>
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-stack-1400.webp" alt="" width="1400" height="1050" />
</div>
</div>
</div>
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-overflow-1400.webp" alt="" width="1400" height="1400" />
</div>
</div>
</div>
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-steps-1400.webp" alt="" width="1400" height="933" />
</div>
</div>
</div>
<div className="kodza-hero-collage__shot">
<div className="kodza-hero-collage__curtain">
<div className="kodza-hero-collage__hold">
<img src="https://kodza.dev/media/kz-block-1400.webp" alt="" width="1120" height="1400" />
</div>
</div>
</div>
</div>
<div className="kodza-hero-collage__inner">
<p className="kodza-hero-collage__eyebrow">
<span className="kodza-hero-collage__rise">Open studio · 14–16 November</span>
</p>
<h1 className="kodza-hero-collage__title">
<span className="kodza-hero-collage__line">
<span className="kodza-hero-collage__rise">Eleven rooms.</span>
</span>
{' '}
<span className="kodza-hero-collage__line">
<span className="kodza-hero-collage__rise">No keynote.</span>
</span>
</h1>
<p className="kodza-hero-collage__lead">Three days of work in progress, pinned to the walls. Come see how it's made, not how it's pitched.</p>
<div className="kodza-hero-collage__actions">
<a className="kodza-hero-collage__button kodza-hero-collage__button--ink" href="#">Get a free pass<svg className="kodza-hero-collage__arrow" viewBox="0 0 16 16" aria-hidden="true"> <path d="M2.5 8h10.5M9 3.5 13.5 8 9 12.5" /> </svg></a>
{' '}
<a className="kodza-hero-collage__button kodza-hero-collage__button--soft" href="#">See the program</a>
</div>
</div>
</div>
</section>
);
}Checked
Checked before you paste.
Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.
What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices.
0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does.
Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops.
Passed
Light and darkThe same checks on both themes, contrast included.
Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag.
8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
Hero Wordmark
A hero that sets the name across the whole width, ink edge to ink edge: its letters rise one by one and a wide picture opens right under them.
View code
Hero Centered
A centred hero with an announcement pill, a headline whose lines rise out of their masks, one sentence and two pill buttons. CSS only, the entrance plays on load.
View code
Hero Cover
A cover hero: a full-width picture under a monochrome veil with the title at the bottom left. The picture opens from the top edge and settles, the title lines rise. CSS only.
View code
Hero Focus
A title sharp over a blurred picture. On scroll the focus moves to the picture, the title blurs and leaves, a readout counts the distance, then notes point out the details. It rewinds.
View code
Hero Showcase
A title over a wall of project thumbnails laid back like prints on a table. On scroll the rows slide in opposite directions and click into line as the wall stands up, every thumbnail a link.
View code