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 codeHero 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.
Hero
No dependencies
herosectionlandingentrancecoverimageoverlaycss-only
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 Cover 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-cover">
<div class="kodza-hero-cover__frame">
<div class="kodza-hero-cover__media"><div class="kodza-hero-cover__curtain"><div class="kodza-hero-cover__hold"><img src="https://kodza.dev/media/kz-steps-2400.webp" srcset="https://kodza.dev/media/kz-steps-1400.webp 1400w, https://kodza.dev/media/kz-steps-2400.webp 2400w" sizes="100vw" alt="A concrete staircase climbing to the right under a flat light" width="2400" height="1600" fetchpriority="high" /></div></div></div>
<div class="kodza-hero-cover__content">
<div class="kodza-hero-cover__copy">
<h1 class="kodza-hero-cover__title"><span class="kodza-hero-cover__line"><span class="kodza-hero-cover__rise">Ship in small steps.</span></span> <span class="kodza-hero-cover__line"><span class="kodza-hero-cover__rise">Roll back in one.</span></span></h1>
<p class="kodza-hero-cover__lead">A full-bleed picture, a veil that keeps the words readable, and nothing to install.</p>
<div class="kodza-hero-cover__actions">
<a class="kodza-hero-cover__button kodza-hero-cover__button--solid" href="#">Get the code<svg class="kodza-hero-cover__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-cover__button kodza-hero-cover__button--glass" href="#">See it live</a>
</div>
</div>
<p class="kodza-hero-cover__caption">fig. 02 — kz-steps, rendered in numpy</p>
</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 Cover
A cover hero: a full-width picture under a monochrome veil, the title at the bottom left.
On load the picture opens from the top edge down while it settles, and the title lines rise
out of their masks. CSS only. Everything is tuned with the --kz-hero-cover-* variables. */
.kodza-hero-cover {
--kz-hero-cover-light: #f2f2f0;
--kz-hero-cover-ink: #0a0a0a;
--kz-hero-cover-dim: rgba(242, 242, 240, 0.8);
--kz-hero-cover-faint: rgba(242, 242, 240, 0.7);
--kz-hero-cover-glass: rgba(242, 242, 240, 0.14);
--kz-hero-cover-shade: rgba(10, 10, 10, 0.8);
--kz-hero-cover-base: #1c1c1c;
--kz-hero-cover-bg: transparent;
--kz-hero-cover-height: clamp(560px, 54vw, 800px);
--kz-hero-cover-gutter: clamp(12px, 2vw, 24px);
--kz-hero-cover-pad: clamp(24px, 4.5vw, 64px);
--kz-hero-cover-radius: 16px;
--kz-hero-cover-position: 50% 50%;
--kz-hero-cover-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
--kz-hero-cover-ease: cubic-bezier(0.22, 1, 0.36, 1);
--kz-hero-cover-glide: cubic-bezier(0.6, 0, 0.1, 1);
--kz-hero-cover-soft-ease: cubic-bezier(0.25, 1, 0.5, 1);
container: kodza-hero-cover / inline-size;
box-sizing: border-box;
width: 100%;
padding-block: var(--kz-hero-cover-gutter);
padding-left: max(var(--kz-hero-cover-gutter), env(safe-area-inset-left, 0px));
padding-right: max(var(--kz-hero-cover-gutter), env(safe-area-inset-right, 0px));
background: var(--kz-hero-cover-bg);
color: var(--kz-hero-cover-light);
}
.kodza-hero-cover__frame {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: var(--kz-hero-cover-height);
overflow: hidden;
border-radius: var(--kz-hero-cover-radius);
}
/* A dark base under the picture: the words stay readable while it loads. Inset by a pixel so it
never bleeds past the picture's rounded edge */
.kodza-hero-cover__frame::before {
content: "";
position: absolute;
inset: 1px;
z-index: -1;
border-radius: max(0px, calc(var(--kz-hero-cover-radius) - 1px));
background: var(--kz-hero-cover-base);
}
.kodza-hero-cover__media {
position: absolute;
inset: 0;
}
/* 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 */
.kodza-hero-cover__curtain,
.kodza-hero-cover__hold {
height: 100%;
}
.kodza-hero-cover__curtain {
overflow: hidden;
}
.kodza-hero-cover__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--kz-hero-cover-position);
}
/* The veil: darkest under the words (bottom left), clear at the top right */
.kodza-hero-cover__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to right, color-mix(in srgb, var(--kz-hero-cover-shade) 50%, transparent), transparent 70%),
linear-gradient(to top, var(--kz-hero-cover-shade), color-mix(in srgb, var(--kz-hero-cover-shade) 35%, transparent) 62%, transparent);
}
.kodza-hero-cover__content {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
padding: var(--kz-hero-cover-pad);
}
.kodza-hero-cover__copy {
min-width: 0;
max-width: 820px;
}
.kodza-hero-cover__title {
margin: 0 0 22px;
/* Bounded by the container too, so a short first line keeps to one line on a phone */
font-size: min(clamp(38px, 6.4vw, 96px), 9.6cqi);
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--kz-hero-cover-light);
}
/* Each line is its own mask: the words rise from behind its bottom edge */
.kodza-hero-cover__line {
display: block;
overflow: hidden;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.kodza-hero-cover__rise {
display: block;
}
.kodza-hero-cover__lead {
max-width: 36ch;
margin: 0 0 32px;
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.55;
color: var(--kz-hero-cover-dim);
text-wrap: pretty;
}
.kodza-hero-cover__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.kodza-hero-cover__button {
position: relative;
isolation: isolate;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: 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-cover__button:focus-visible {
outline: 2px solid var(--kz-hero-cover-light);
outline-offset: 3px;
}
/* Solid: the arrow steps forward on hover */
.kodza-hero-cover__button--solid {
background: var(--kz-hero-cover-light);
color: var(--kz-hero-cover-ink);
}
.kodza-hero-cover__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-cover-ease);
}
/* Glass: frosted over the picture, light rises from the bottom edge on hover */
.kodza-hero-cover__button--glass {
background: var(--kz-hero-cover-glass);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
color: var(--kz-hero-cover-light);
transition: color 0.4s var(--kz-hero-cover-ease);
}
.kodza-hero-cover__button--glass::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--kz-hero-cover-light);
transform: translateY(101%);
transition: transform 0.4s var(--kz-hero-cover-ease);
}
@media (hover: hover) {
.kodza-hero-cover__button--solid:hover .kodza-hero-cover__arrow {
transform: translateX(4px);
}
.kodza-hero-cover__button--glass:hover {
color: var(--kz-hero-cover-ink);
}
.kodza-hero-cover__button--glass:hover::before {
transform: none;
}
}
/* Lined up with the middle of the buttons */
.kodza-hero-cover__caption {
flex: none;
margin: 0;
padding-bottom: 18px;
font-family: var(--kz-hero-cover-mono);
font-size: 12.5px;
line-height: 16px;
color: var(--kz-hero-cover-faint);
}
/* Mid widths: the caption takes two lines, so it leaves the title its room */
@container kodza-hero-cover (min-width: 721px) and (max-width: 1100px) {
.kodza-hero-cover__caption {
max-width: 20ch;
padding-bottom: 10px;
}
}
/* One column: the caption goes under the buttons, which share the row */
@container kodza-hero-cover (max-width: 720px) {
.kodza-hero-cover__content {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.kodza-hero-cover__caption {
padding-bottom: 0;
}
.kodza-hero-cover__button {
flex: 1 1 auto;
}
}
/* The entrance, on load: the picture opens and settles, the title lines rise, then the rest */
@media (prefers-reduced-motion: no-preference) {
.kodza-hero-cover__curtain {
animation: kodza-hero-cover-curtain 1350ms var(--kz-hero-cover-glide) 100ms both;
}
.kodza-hero-cover__hold {
animation: kodza-hero-cover-hold 1350ms var(--kz-hero-cover-glide) 100ms both;
}
.kodza-hero-cover__media img {
animation: kodza-hero-cover-settle 2000ms var(--kz-hero-cover-soft-ease) 100ms both;
}
.kodza-hero-cover__rise {
animation: kodza-hero-cover-rise 1170ms var(--kz-hero-cover-glide) 300ms both;
}
.kodza-hero-cover__line:nth-child(2) .kodza-hero-cover__rise {
animation-delay: 425ms;
}
.kodza-hero-cover__line:nth-child(3) .kodza-hero-cover__rise {
animation-delay: 550ms;
}
.kodza-hero-cover__line:nth-child(4) .kodza-hero-cover__rise {
animation-delay: 675ms;
}
.kodza-hero-cover__lead {
animation: kodza-hero-cover-in 900ms var(--kz-hero-cover-soft-ease) 750ms both;
}
.kodza-hero-cover__actions {
animation: kodza-hero-cover-in 900ms var(--kz-hero-cover-soft-ease) 860ms both;
}
.kodza-hero-cover__caption {
animation: kodza-hero-cover-in 900ms var(--kz-hero-cover-soft-ease) 970ms both;
}
}
/* Closed 2px past the edge: a curtain closed exactly on the frame's edge can leak a hairline */
@keyframes kodza-hero-cover-curtain {
from {
transform: translateY(calc(-100% - 2px));
}
}
@keyframes kodza-hero-cover-hold {
from {
transform: translateY(calc(100% + 2px));
}
}
@keyframes kodza-hero-cover-settle {
from {
transform: scale(1.2);
}
}
@keyframes kodza-hero-cover-rise {
from {
transform: translateY(105%);
}
}
@keyframes kodza-hero-cover-in {
from {
opacity: 0;
transform: translateY(20px);
}
}
@media (prefers-reduced-motion: reduce) {
.kodza-hero-cover *,
.kodza-hero-cover *::before,
.kodza-hero-cover *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* kodza-guard bbc797febe4f — 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-cover__title):not(#_),
:where(.kodza-hero-cover__lead):not(#_),
:where(.kodza-hero-cover__hold img:where(:not([class*="kodza-"]))):not(#_) {
transition-duration: revert;
}
:where(.kodza-hero-cover__button):not(#_) {
outline: revert;
transition: revert;
outline-offset: revert;
}
:where(.kodza-hero-cover__caption):not(#_) {
max-width: revert;
transition-duration: revert;
}
/* What the browser gives, on everything the component leaves to it */
.kodza-hero-cover__frame:not(#_),
.kodza-hero-cover__media:not(#_),
.kodza-hero-cover__curtain:not(#_),
.kodza-hero-cover__hold:not(#_),
.kodza-hero-cover__content:not(#_),
.kodza-hero-cover__copy:not(#_),
.kodza-hero-cover__line:not(#_),
.kodza-hero-cover__rise:not(#_),
.kodza-hero-cover__actions:not(#_) {
box-sizing: revert;
}
.kodza-hero-cover__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-cover__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-cover__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-cover__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-cover__caption:not(#_) {
border: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
padding-top: revert;
padding-right: revert;
padding-left: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-height: 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-cover__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-cover__title:not(#_):where(:not([hidden])),
.kodza-hero-cover__lead:not(#_):where(:not([hidden])),
.kodza-hero-cover__arrow:not(#_):where(:not([hidden])),
.kodza-hero-cover__caption:not(#_):where(:not([hidden])) {
display: revert;
}
.kodza-hero-cover__title:not(#_):where([hidden]),
.kodza-hero-cover__lead:not(#_):where([hidden]),
.kodza-hero-cover__arrow:not(#_):where([hidden]),
.kodza-hero-cover__caption:not(#_):where([hidden]) {
display: none;
}
.kodza-hero-cover__frame:not(#_)::before,
.kodza-hero-cover__media:not(#_)::after {
box-sizing: revert;
}
/* 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-cover__media img:not(#_) {
display: block;
}
.kodza-hero-cover__title:not(#_) {
margin: 0 0 22px;
font-size: min(clamp(38px, 6.4vw, 96px), 9.6cqi);
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--kz-hero-cover-light);
}
.kodza-hero-cover__lead:not(#_) {
max-width: 36ch;
margin: 0 0 32px;
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.55;
color: var(--kz-hero-cover-dim);
}
.kodza-hero-cover__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-cover__button:focus-visible:not(#_) {
outline: 2px solid var(--kz-hero-cover-light);
outline-offset: 3px;
}
.kodza-hero-cover__button--solid:not(#_) {
background: var(--kz-hero-cover-light);
color: var(--kz-hero-cover-ink);
}
.kodza-hero-cover__arrow:not(#_) {
transition: transform 0.3s var(--kz-hero-cover-ease);
}
.kodza-hero-cover__button--glass:not(#_) {
background: var(--kz-hero-cover-glass);
color: var(--kz-hero-cover-light);
transition: color 0.4s var(--kz-hero-cover-ease);
}
@media (hover: hover) {
.kodza-hero-cover__button--glass:hover:not(#_) {
color: var(--kz-hero-cover-ink);
}
}
.kodza-hero-cover__caption:not(#_) {
margin: 0;
padding-bottom: 18px;
font-family: var(--kz-hero-cover-mono);
font-size: 12.5px;
line-height: 16px;
color: var(--kz-hero-cover-faint);
}
@container kodza-hero-cover (min-width: 721px) and (max-width: 1100px) {
.kodza-hero-cover__caption:not(#_) {
max-width: 20ch;
padding-bottom: 10px;
}
}
@container kodza-hero-cover (max-width: 720px) {
.kodza-hero-cover__caption:not(#_) {
padding-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.kodza-hero-cover *:where(img, h1, p, a, svg):not(#_) {
transition-duration: 0.01ms !important;
}
}'use client';
// Kodza — Hero Cover, for React. From https://kodza.dev/components/hero-cover/
// 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-cover.css, the component's CSS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
import { useRef, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './hero-cover.css';
export type HeroCoverProps = Omit<ComponentPropsWithoutRef<'section'>, "children" | "vars"> & {
/** Settings, as CSS variables on the root */
vars?: {
/** default: #f2f2f0 */
"--kz-hero-cover-light"?: string | number;
/** default: #0a0a0a */
"--kz-hero-cover-ink"?: string | number;
/** default: rgba(242, 242, 240, 0.8) */
"--kz-hero-cover-dim"?: string | number;
/** default: rgba(242, 242, 240, 0.7) */
"--kz-hero-cover-faint"?: string | number;
/** default: rgba(242, 242, 240, 0.14) */
"--kz-hero-cover-glass"?: string | number;
/** default: rgba(10, 10, 10, 0.8) */
"--kz-hero-cover-shade"?: string | number;
/** default: #1c1c1c */
"--kz-hero-cover-base"?: string | number;
/** default: transparent */
"--kz-hero-cover-bg"?: string | number;
/** default: clamp(560px, 54vw, 800px) */
"--kz-hero-cover-height"?: string | number;
/** default: clamp(12px, 2vw, 24px) */
"--kz-hero-cover-gutter"?: string | number;
/** default: clamp(24px, 4.5vw, 64px) */
"--kz-hero-cover-pad"?: string | number;
/** default: 16px */
"--kz-hero-cover-radius"?: string | number;
/** default: 50% 50% */
"--kz-hero-cover-position"?: string | number;
/** default: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace */
"--kz-hero-cover-mono"?: string | number;
/** default: cubic-bezier(0.22, 1, 0.36, 1) */
"--kz-hero-cover-ease"?: string | number;
/** default: cubic-bezier(0.6, 0, 0.1, 1) */
"--kz-hero-cover-glide"?: string | number;
/** default: cubic-bezier(0.25, 1, 0.5, 1) */
"--kz-hero-cover-soft-ease"?: string | number;
};
className?: string;
};
export function HeroCover({ vars, className, style, ...rest }: HeroCoverProps) {
const ref = useRef<ComponentRef<'section'>>(null);
const classes = ["kodza-hero-cover", 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]);
return (
<section key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
<div className="kodza-hero-cover__frame">
<div className="kodza-hero-cover__media">
<div className="kodza-hero-cover__curtain">
<div className="kodza-hero-cover__hold">
<img src="https://kodza.dev/media/kz-steps-2400.webp" srcSet="https://kodza.dev/media/kz-steps-1400.webp 1400w, https://kodza.dev/media/kz-steps-2400.webp 2400w" sizes="100vw" alt="A concrete staircase climbing to the right under a flat light" width="2400" height="1600" fetchPriority="high" />
</div>
</div>
</div>
<div className="kodza-hero-cover__content">
<div className="kodza-hero-cover__copy">
<h1 className="kodza-hero-cover__title">
<span className="kodza-hero-cover__line">
<span className="kodza-hero-cover__rise">Ship in small steps.</span>
</span>
{' '}
<span className="kodza-hero-cover__line">
<span className="kodza-hero-cover__rise">Roll back in one.</span>
</span>
</h1>
<p className="kodza-hero-cover__lead">A full-bleed picture, a veil that keeps the words readable, and nothing to install.</p>
<div className="kodza-hero-cover__actions">
<a className="kodza-hero-cover__button kodza-hero-cover__button--solid" href="#">Get the code<svg className="kodza-hero-cover__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-cover__button kodza-hero-cover__button--glass" href="#">See it live</a>
</div>
</div>
<p className="kodza-hero-cover__caption">fig. 02 — kz-steps, rendered in numpy</p>
</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 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
Hero Statement
A studio statement set very large over a mono line with the city, a live local time and the booking window. The words rise out of their masks one after the other on load.
View code
Hero Exit
A centred title in two big lines. On scroll the scene holds, the lines part, a picture opens between them and tightens into a card, then the next section slides over it.
View code
Hero Screen
A centred title and its buttons over a screenshot of the product, leaning back in perspective. On scroll the screen stands up to face you and grows while the title steps back.
View code