- Ships as
- one file
- Depends on
- nothing
- Motion
- reduced-safe
field
Split Beacon
Two columns share one field instead of splitting it: the claim and its single call to action hold the left, a frosted panel of three short lines holds the right — the same glass treatment Iris already uses to keep copy readable over a moving field, put to use here as a proof device instead of a scrim.
No pill, no second button — the panel carries the credibility a badge usually tries to fake.
Install
No installation needed — self-contained, paste-in code.
Usage
Drop it straight into a page.
import { FilamentField } from "./FilamentField";
export default function Example() {
return (
<header className="relative isolate min-h-[36rem] overflow-hidden bg-black flex items-center">
<div className="absolute inset-0 -z-10">
<FilamentField />
</div>
<div className="mx-auto flex w-full max-w-5xl flex-wrap items-center justify-between gap-12 px-8 text-[#f5f5f5]">
<div className="max-w-md">
<h1 className="text-5xl font-medium tracking-tight">
The claim and{" "}
<span className="text-[#a78bfa]">the proof</span>, side by side.
</h1>
<div className="mt-8">
<a href="#" className="rounded-xl bg-[#7c3aed] px-5 py-3 text-white">
Get started
</a>
</div>
</div>
<dl className="flex min-w-[16rem] flex-col gap-3 rounded-2xl border border-white/20 bg-white/10 px-7 py-6 backdrop-blur-lg">
<div className="flex items-baseline justify-between gap-4 text-sm">
<dt className="opacity-80">Ships as</dt>
<dd className="font-medium">one file</dd>
</div>
<div className="flex items-baseline justify-between gap-4 text-sm">
<dt className="opacity-80">Depends on</dt>
<dd className="font-medium">nothing</dd>
</div>
<div className="flex items-baseline justify-between gap-4 text-sm">
<dt className="opacity-80">Motion</dt>
<dd className="font-medium">reduced-safe</dd>
</div>
</dl>
</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 { FilamentField } from "../visuals/backgrounds";
/**
* The real `split-beacon` section, full scale. Two columns share one field
* instead of splitting it: the claim + one call to action hold the left,
* a frosted panel of three short lines holds the right — Iris's one
* deliberate translucency (the `--detail` reading scrim) reused here as a
* proof device instead of a scrim. No pill, no second button.
*/
export function SplitBeacon({
category,
creation,
}: {
category: CategoryDef;
creation: CreationCard;
}) {
return (
<header className="iris-hero iris-hero--field 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]">
<FilamentField />
</div>
</div>
<div className="iris-shell flex flex-row flex-wrap items-center justify-between gap-[clamp(2rem,5vw,4rem)] text-left relative">
<div className="flex flex-col items-start flex-[1_1_24rem] min-w-0">
<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 text-[length:clamp(2.5rem,1.5rem+4.4vw,5rem)] leading-[1.02] tracking-[-0.02em] max-w-[16ch] text-balance text-[color:var(--field-ink)] [text-shadow:0_1px_12px_oklch(0.12_0.02_264_/_0.55)]">
The claim and{" "}
<span className="text-[color:var(--iris-accent-bright)]">the proof</span>,
side by side.
</h1>
<div className="mt-9 flex flex-wrap justify-center gap-3">
<Link href={`/iris/${category.slug}/${creation.slug}#detail`} 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)]">
Get started
</Link>
</div>
</div>
<dl className="flex-[0_1_18rem] flex flex-col gap-3 py-6 px-[1.75rem] rounded-[var(--iris-radius)] border border-[var(--field-glass-border)] bg-[var(--field-glass)] [backdrop-filter:blur(14px)_saturate(1.2)] [-webkit-backdrop-filter:blur(14px)_saturate(1.2)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:bg-[var(--field-glass-opaque)]">
<div className="flex items-baseline justify-between gap-4 text-[length:0.9375rem]">
<dt className="text-[color:var(--field-ink-dim)]">Ships as</dt>
<dd className="font-medium text-[color:var(--field-ink)] [text-shadow:0_1px_8px_oklch(0.1_0.02_240_/_0.5)]">one file</dd>
</div>
<div className="flex items-baseline justify-between gap-4 text-[length:0.9375rem]">
<dt className="text-[color:var(--field-ink-dim)]">Depends on</dt>
<dd className="font-medium text-[color:var(--field-ink)] [text-shadow:0_1px_8px_oklch(0.1_0.02_240_/_0.5)]">nothing</dd>
</div>
<div className="flex items-baseline justify-between gap-4 text-[length:0.9375rem]">
<dt className="text-[color:var(--field-ink-dim)]">Motion</dt>
<dd className="font-medium text-[color:var(--field-ink)] [text-shadow:0_1px_8px_oklch(0.1_0.02_240_/_0.5)]">reduced-safe</dd>
</div>
</dl>
</div>
</header>
);
}