Iris
Building blocks I make and keep.
Browse catalogueFree for now. No sign-up, no attribution required.
field
Arc Beacon
A giant ring is centred well above the frame, so only its lower sweep is ever visible — dipping in from the upper-left, through the middle, back up to the upper-right — with a wide, wide-tracked wordmark held dead centre where the rim dips lowest. One line of support copy, one button, one small caption underneath it — the same three-tier close `halo-beacon` reaches for.
Built to prove the anatomy holds across fields with very different geometry: `HaloRingField` hugs the wordmark tight; `OrbitalArcField` suspends it from something far larger and mostly off-frame. Same header, same three tiers, same honest button underneath.
Install
No installation needed — self-contained, paste-in code.
Usage
Drop it straight into a page.
import { OrbitalArcField } from "./OrbitalArcField";
export default function Example() {
return (
<header className="relative isolate min-h-[36rem] overflow-hidden bg-black flex flex-col items-center justify-center text-center">
<div className="absolute inset-0 -z-10">
<OrbitalArcField guardSelector="#arc-beacon-copy" />
</div>
<div id="arc-beacon-copy" className="mx-auto max-w-2xl px-8 text-[#f5f5f5]">
<h1 className="text-8xl font-medium uppercase tracking-[0.05em]">
Acme
</h1>
<p className="mt-4 text-sm font-medium uppercase tracking-[0.14em] opacity-80">
Your tagline goes here
</p>
<div className="mt-8 flex flex-col items-center gap-2">
<a href="#" className="rounded-xl bg-[#7c3aed] px-5 py-3 text-white">
Browse catalogue
</a>
<span className="text-sm opacity-70">Free for now · no sign-up</span>
</div>
</div>
</header>
);
}Component
The real source, exactly as it ships — multiple files, kept together.
import Link from "next/link";
import type { CategoryDef, CreationCard } from "@/lib/iris";
import { irisMeta } from "@/content/iris";
import { OrbitalArcField } from "../visuals/backgrounds";
/**
* The real `arc-beacon` section, full scale — a product-mark hero: a huge
* wordmark held dead centre where the suspended ring's rim dips lowest, an
* all-caps tagline under it, one pill button, one small trust line, the way
* a product page suspends a ring of light behind its own name instead of a
* plain field. The wordmark is Iris's own real one (`irisMeta`), not a
* fabricated brand, so the piece stays honest while still reading exactly
* like that shape of hero.
*/
export function ArcBeacon({
category,
creation,
}: {
category: CategoryDef;
creation: CreationCard;
}) {
return (
<header className="iris-hero iris-hero--field iris-section-hero--arc relative isolate [overflow:clip] mt-[calc(-3.5rem_-_1px)] min-h-[min(82vh,760px)] flex flex-col justify-center [padding-block:calc(clamp(3rem,8vh,6rem)+3.5rem)_clamp(3rem,8vh,6rem)]">
<div className="absolute inset-0 z-[-1] overflow-hidden bg-[color:var(--iris-bg)]" aria-hidden="true">
<div className="absolute inset-0 [mask-image:linear-gradient(180deg,#000_0_64%,transparent_99%)] [-webkit-mask-image:linear-gradient(180deg,#000_0_64%,transparent_99%)] data-[enter=right]:[animation:iris-field-enter-right_560ms_cubic-bezier(0.16,1,0.3,1)_both] data-[enter=left]:[animation:iris-field-enter-left_560ms_cubic-bezier(0.16,1,0.3,1)_both] motion-reduce:[animation:none]">
<OrbitalArcField guardSelector=".iris-section-hero--arc .iris-hero__inner" />
</div>
</div>
<div className="iris-shell iris-hero__inner flex flex-col items-center relative text-center">
<p className="flex flex-wrap items-center gap-[0.4rem] text-[length:0.8125rem] text-[var(--field-ink-dim)] [text-shadow:0_1px_10px_oklch(0.12_0.02_264_/_0.55)] [&_a]:text-inherit [&_a:hover]:text-[color:var(--field-ink)]">
<Link href="/iris">Iris</Link>
<span aria-hidden="true">/</span>
<Link href={`/iris/${category.slug}`}>{category.label}</Link>
<span aria-hidden="true">/</span>
<span>{creation.title}</span>
</p>
<h1 className="font-[family-name:var(--font-iris-display)] font-normal leading-[1.02] text-balance text-[color:var(--field-ink)] [text-shadow:0_1px_12px_oklch(0.12_0.02_264_/_0.55)] max-w-none uppercase text-[length:clamp(3.5rem,1rem+11vw,9rem)] tracking-[0.05em]">
{irisMeta.wordmark}
</h1>
<p className="mt-4 max-w-[38ch] text-[color:var(--field-ink-dim)] [text-shadow:0_1px_10px_oklch(0.1_0.02_240_/_0.55)] uppercase text-[length:0.9375rem] tracking-[0.14em] font-medium">
{irisMeta.tagline}
</p>
<div className="mt-9 flex flex-wrap justify-center flex-col gap-[0.6rem]">
<Link href="/iris/backgrounds" className="inline-flex items-center justify-center gap-[0.4rem] py-[0.8rem] px-5 rounded-[var(--iris-radius-sm)] border border-transparent text-[length:0.9375rem] font-medium leading-none whitespace-nowrap cursor-pointer transition-[background-color,border-color,color] duration-[120ms] ease-[ease] disabled:opacity-35 disabled:cursor-default disabled:pointer-events-none bg-[color:var(--iris-accent)] text-[color:var(--iris-accent-ink)] hover:bg-[color:var(--iris-accent-hover)]">
Browse catalogue
</Link>
<span className="text-[length:0.8125rem] text-[color:var(--field-ink-dim)] [text-shadow:0_1px_8px_oklch(0.1_0.02_240_/_0.5)]">{irisMeta.freeNote}</span>
</div>
</div>
</header>
);
}