Examples

These recipes assume install via Installation and colors wired per Theming. Free starter: aurora-mesh. Quiet panels: grain-field. High-contrast moments: ink-dither.

Context coverage

Catalog materials tagged for each use context (a material can count in more than one). Filter live on Materials.

Hero

Full-bleed mesh behind a single brand line and one CTA group. Surface is absolute; content is relative with a scrim for contrast.

import { AuroraMesh } from "@/components/ui/aurora-mesh"
import Link from "next/link"

export function MarketingHero() {
  return (
    <section className="relative isolate min-h-[min(100dvh,52rem)] overflow-hidden">
      <AuroraMesh
        aria-hidden
        className="absolute inset-0 -z-10"
        colors={[
          "var(--brand-surface)",
          "var(--brand-accent)",
          "var(--brand-highlight)",
          "var(--brand-ink)",
        ]}
      />
      <div className="absolute inset-0 -z-10 bg-background/20" aria-hidden />
      <div className="mx-auto flex min-h-[inherit] max-w-5xl flex-col justify-end px-6 pb-16 pt-28">
        <p className="text-[0.625rem] font-semibold tracking-widest uppercase text-muted-foreground">
          Frameline
        </p>
        <h1 className="mt-4 max-w-2xl font-heading text-5xl tracking-tight">
          Surface as code
        </h1>
        <p className="mt-4 max-w-md text-lg text-muted-foreground">
          Production materials you install, theme, and ship.
        </p>
        <div className="mt-8 flex flex-wrap gap-3">
          <Link href="/materials" className="bg-foreground px-5 py-2.5 text-sm text-background">
            Browse materials
          </Link>
          <Link href="/docs" className="border border-border px-5 py-2.5 text-sm">
            Read the docs
          </Link>
        </div>
      </div>
    </section>
  )
}

Card panel

Quiet grain under a content panel — interaction lives in the card, not in the material.

import { GrainField } from "@/components/ui/grain-field"

export function FeatureCard({ title, body }: { title: string; body: string }) {
  return (
    <article className="relative overflow-hidden border border-border">
      <GrainField
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-80"
        forceStatic={false}
      />
      <div className="relative space-y-3 bg-background/75 p-6 backdrop-blur-sm">
        <h3 className="font-heading text-base font-medium">{title}</h3>
        <p className="text-sm leading-relaxed text-muted-foreground">{body}</p>
      </div>
    </article>
  )
}

Auth shell

Split layout: material column + form column. Keep inputs off the canvas and pause the field when reduced motion is on (built into the shell).

import { GrainField } from "@/components/ui/grain-field"

export function AuthShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid min-h-dvh lg:grid-cols-2">
      <div className="relative hidden min-h-[40vh] lg:block">
        <GrainField aria-hidden className="absolute inset-0" />
      </div>
      <div className="flex items-center justify-center px-6 py-16">
        <div className="w-full max-w-sm space-y-6">{children}</div>
      </div>
    </div>
  )
}

Empty state

High-contrast dither behind a short message — decorative only, with a clear next action.

import { InkDither } from "@/components/ui/ink-dither"

export function EmptyProjects({ onCreate }: { onCreate: () => void }) {
  return (
    <div className="relative overflow-hidden border border-dashed border-border px-6 py-20 text-center">
      <InkDither
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-60"
      />
      <div className="relative mx-auto max-w-sm space-y-4 bg-background/80 px-6 py-8">
        <h2 className="font-heading text-lg font-medium">No projects yet</h2>
        <p className="text-sm text-muted-foreground">
          Create a project to attach materials and share previews with your team.
        </p>
        <button
          type="button"
          onClick={onCreate}
          className="bg-foreground px-4 py-2 text-sm text-background"
        >
          New project
        </button>
      </div>
    </div>
  )
}

• Browse live materials in the catalog and copy JSX from each configurator for props that match what you tuned.
• For licensing of client deliverables that include these compositions, see Licensing.