Vellum: React Texture component

Vellum texture: a sheet layer combining two turbulence scales, a crosshatch of near-parallel fibers and a soft wash. Warm grounds read brass and cool ones silver; three intensities scale grain and fibers.

pnpm dlx shadcn add @01orbital/vellum

File

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized vellum surface with readable studio details. */
export default function VellumDemo() {
  return (
    <div className="flex min-h-full w-full flex-1 items-center justify-center p-4 sm:p-8">
      <Card className="relative isolate w-full max-w-sm gap-6 overflow-hidden rounded-xl bg-[#d6c9a4] p-6 wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:p-8">
        <Vellum intensity="rich" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Aster Archive</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Freya Bell
            </CardTitle>
            <CardDescription>Archivist & book artist</CardDescription>
          </div>
        </CardHeader>
        <CardFooter className="relative z-20 flex-wrap justify-between gap-3 border-t border-current/20 px-0 pt-5 text-xs/5">
          <span>42 Museum Street, London</span>
          <a
            href="mailto:hello@asterarchive.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@asterarchive.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

The example also uses card. Install it too:

pnpm dlx shadcn add @01orbital/card

npx shadcn add @01orbital/card

yarn shadcn add @01orbital/card

bunx --bun shadcn add @01orbital/card

Usage

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized vellum surface with readable studio details. */
export default function VellumDemo() {
  return (
    <div className="flex min-h-full w-full flex-1 items-center justify-center p-4 sm:p-8">
      <Card className="relative isolate w-full max-w-sm gap-6 overflow-hidden rounded-xl bg-[#d6c9a4] p-6 wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:p-8">
        <Vellum intensity="rich" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Aster Archive</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Freya Bell
            </CardTitle>
            <CardDescription>Archivist & book artist</CardDescription>
          </div>
        </CardHeader>
        <CardFooter className="relative z-20 flex-wrap justify-between gap-3 border-t border-current/20 px-0 pt-5 text-xs/5">
          <span>42 Museum Street, London</span>
          <a
            href="mailto:hello@asterarchive.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@asterarchive.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

Examples

New

vellum-studio-card

· Studio card

Vellum texture example: a contact card on parchment vellum with an archivist's name, a London museum street address and an email link. Use it for a business card.

pnpm dlx shadcn add @01orbital/vellum-studio-card

npx shadcn add @01orbital/vellum-studio-card

yarn shadcn add @01orbital/vellum-studio-card

bunx --bun shadcn add @01orbital/vellum-studio-card

File

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  organization: "Aster Archive",
  title: "Jessica Watkins",
  description: "Archivist & book artist",
  address: "42 Museum Street, London",
  email: "hello@asterarchive.example",
} as const

/** A textured studio contact card with a compact identity and an email link. */
export default function VellumStudioCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d6c9a4] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="rich" />
      <CardHeader className="relative z-20 gap-6">
        <p className="text-sm font-medium">{COPY.organization}</p>
        <div className="grid gap-1">
          <CardTitle className="text-2xl/8 font-medium tracking-tight">
            {COPY.title}
          </CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
        </div>
      </CardHeader>
      <CardFooter className="relative z-20 flex-wrap justify-between gap-3 border-t border-current/20 text-xs/5">
        <span>{COPY.address}</span>
        <a
          href="mailto:hello@asterarchive.example"
          className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
        >
          {COPY.email}
        </a>
      </CardFooter>
    </Card>
  )
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-workshop-invitation

· Workshop invitation

Vellum · Workshop invitation: an example of vellum.

pnpm dlx shadcn add @01orbital/vellum-workshop-invitation

npx shadcn add @01orbital/vellum-workshop-invitation

yarn shadcn add @01orbital/vellum-workshop-invitation

bunx --bun shadcn add @01orbital/vellum-workshop-invitation

File

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Aster Archive / Workshop",
  title: "Objects, light and paper",
  description:
    "Photograph an object from the study collection and make a small printed record.",
  day: "14",
  month: "November 2026",
  time: "Saturday, 14:00–17:00",
  venue: "42 Museum Street, London",
  places: "8 places · Materials included",
  price: "£45 per person",
} as const

/** A workshop invitation with a large date, a short introduction and booking details. */
export default function VellumWorkshopInvitation() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#d6c9a4] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--font-display:var(--font-serif)] [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="fine" />
      <CardHeader className="relative z-20 gap-5">
        <p className="text-sm">{COPY.eyebrow}</p>
        <CardTitle className="font-display text-4xl/10 font-normal">
          {COPY.title}
        </CardTitle>
        <CardDescription className="text-base/7">
          {COPY.description}
        </CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 flex flex-wrap items-center gap-5 border-y border-current/20 py-5">
        <p className="text-5xl/none font-light tabular-nums">{COPY.day}</p>
        <p className="min-w-0 flex-[1_1_10rem] text-sm/6">
          {COPY.month}
          <br />
          {COPY.time}
          <br />
          {COPY.venue}
        </p>
      </CardContent>
      <CardFooter className="relative z-20 flex-wrap justify-between gap-2 text-sm/6">
        <span>{COPY.places}</span>
        <span>{COPY.price}</span>
      </CardFooter>
    </Card>
  )
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-seasonal-menu

· Seasonal menu

Vellum texture example: a lunch menu on ivory vellum with aligned prices and an allergy note. Use it for a cafe or restaurant menu.

pnpm dlx shadcn add @01orbital/vellum-seasonal-menu

npx shadcn add @01orbital/vellum-seasonal-menu

yarn shadcn add @01orbital/vellum-seasonal-menu

bunx --bun shadcn add @01orbital/vellum-seasonal-menu

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Aster Archive",
  title: "At the table",
  description: "Lunch, Thursday to Sunday · 12:00–15:00",
  note: "Please tell us about any allergies before ordering.",
} as const

const DISHES = [
  { name: "Chestnut & thyme soup", price: "£7" },
  { name: "Smoked cheddar tart", price: "£12" },
  { name: "Honey & walnut cake", price: "£6" },
] as const

/** A seasonal menu with aligned prices and a clear note about dietary requirements. */
export default function VellumSeasonalMenu() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f3ede0] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="default" />
      <CardHeader className="relative z-20 gap-2 border-b border-current/20">
        <p className="text-sm">{COPY.eyebrow}</p>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20">
        <DescriptionList className="gap-y-5">
          {DISHES.map((dish) => (
            <DescriptionListItem key={dish.name}>
              <DescriptionListTerm className="text-current">
                {dish.name}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current tabular-nums">
                {dish.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-current/20 text-xs/5">
        {COPY.note}
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-field-note

· Field note

Vellum texture example: a dated cataloguing note on parchment vellum about a maker's mark under a base, with a next-time list. Use it for an archive record entry.

pnpm dlx shadcn add @01orbital/vellum-field-note

npx shadcn add @01orbital/vellum-field-note

yarn shadcn add @01orbital/vellum-field-note

bunx --bun shadcn add @01orbital/vellum-field-note

File

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Working notes",
  description: "Aster Archive",
  dateLabel: "7 Nov 2026",
  observation:
    "The maker’s mark is under the base. Add a detail photograph to the record.",
  listTitle: "For next time",
  todo: [
    "Photograph the finished study in daylight.",
    "Keep a sample with the date and materials.",
    "Bring the original to the next studio session.",
  ],
} as const

/** A dated field note with a short observation and a list for the next visit. */
export default function VellumFieldNote() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#d6c9a4] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="rich" />
      <CardHeader className="relative z-20 flex flex-wrap items-start justify-between gap-4">
        <div className="grid gap-1">
          <CardTitle className="text-xl/7">{COPY.title}</CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
        </div>
        <time dateTime="2026-11-07" className="text-xs/5">
          {COPY.dateLabel}
        </time>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-6">
        <p className="text-base/7">{COPY.observation}</p>
        <div className="grid gap-2">
          <p className="text-sm font-medium">{COPY.listTitle}</p>
          <ul className="list-disc space-y-2 pl-4 text-sm/6">
            {COPY.todo.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-edition-cover

· Edition cover

Vellum texture example: a dark olive-brown cover with a fine vellum finish, a large issue number and the title Objects and their stories. Use it for a catalog or archive cover.

pnpm dlx shadcn add @01orbital/vellum-edition-cover

npx shadcn add @01orbital/vellum-edition-cover

yarn shadcn add @01orbital/vellum-edition-cover

bunx --bun shadcn add @01orbital/vellum-edition-cover

File

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  publisher: "Aster Archive",
  edition: "Studio edition",
  issue: "04",
  title: "Objects and their stories",
  season: "Autumn / Winter 2026",
  run: "Limited edition · 48 pages",
} as const

/** An editorial cover with a large issue number and a restrained title block. */
export default function VellumEditionCover() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#383429] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--font-display:var(--font-serif)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="fine" />
      <CardHeader className="relative z-20 flex flex-wrap items-start justify-between gap-4">
        <p className="text-sm/6">{COPY.publisher}</p>
        <span className="text-xs/6">{COPY.edition}</span>
      </CardHeader>
      <CardContent className="relative z-20 grid min-h-64 content-between gap-10">
        <p className="text-8xl/none font-light tracking-tight tabular-nums">
          {COPY.issue}
        </p>
        <CardTitle className="font-display text-4xl/10 font-normal">
          {COPY.title}
        </CardTitle>
      </CardContent>
      <CardFooter className="relative z-20 flex-wrap justify-between gap-2 border-t border-current/25 text-xs/5">
        <span>{COPY.season}</span>
        <span>{COPY.run}</span>
      </CardFooter>
    </Card>
  )
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-order-receipt

· Order receipt

Vellum texture example: an itemized order on parchment-tan vellum with a paid total and a pickup note from an archive shop. Use it for a receipt.

pnpm dlx shadcn add @01orbital/vellum-order-receipt

npx shadcn add @01orbital/vellum-order-receipt

yarn shadcn add @01orbital/vellum-order-receipt

bunx --bun shadcn add @01orbital/vellum-order-receipt

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Aster Archive",
  description: "Order 0148 · 7 November 2026",
  total: "Paid",
  totalAmount: "£48.00",
  pickup: "Ready to collect from the studio. Please bring your order number.",
  thanks: "Thank you for supporting an independent studio.",
} as const

const ITEMS = [
  { name: "1 × Studio notebook", price: "£12.00" },
  { name: "2 × A5 art print", price: "£36.00" },
] as const

/** An itemised print order with a paid total and a collection note. */
export default function VellumOrderReceipt() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#d6c9a4] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="default" />
      <CardHeader className="relative z-20 gap-2 border-b border-dashed border-current/40">
        <CardTitle className="text-xl/7">{COPY.title}</CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-5">
        <DescriptionList>
          {ITEMS.map((item) => (
            <DescriptionListItem key={item.name}>
              <DescriptionListTerm className="text-current">
                {item.name}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current tabular-nums">
                {item.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
          <DescriptionListItem className="border-t border-current/25 pt-3 font-medium">
            <DescriptionListTerm className="text-current">
              {COPY.total}
            </DescriptionListTerm>
            <DescriptionListDetails className="text-current">
              {COPY.totalAmount}
            </DescriptionListDetails>
          </DescriptionListItem>
        </DescriptionList>
        <p className="text-xs/6">{COPY.pickup}</p>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-dashed border-current/40 text-xs/5">
        {COPY.thanks}
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-collection-label

· Collection label

Vellum texture example: a collection label on a pale sage-gray ground with a translucent vellum sheen, listing material, dimensions and edition. Use it for an archive object caption.

pnpm dlx shadcn add @01orbital/vellum-collection-label

npx shadcn add @01orbital/vellum-collection-label

yarn shadcn add @01orbital/vellum-collection-label

bunx --bun shadcn add @01orbital/vellum-collection-label

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Aster Archive / Study collection",
  title: "Study in November",
  description: "Jessica Watkins, 2026",
} as const

const DETAILS = [
  { term: "Material", value: "Ink on uncoated paper", mono: false },
  { term: "Dimensions", value: "210 × 297 mm", mono: false },
  { term: "Edition", value: "12 of 50", mono: false },
  { term: "Reference", value: "ST-2026-014", mono: true },
] as const

/** A collection label with the edition, material and dimensions in a definition list. */
export default function VellumCollectionLabel() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d7d9d1] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="rich" />
      <CardHeader className="relative z-20 gap-4">
        <p className="text-xs/5">{COPY.eyebrow}</p>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 border-t border-current/25 pt-5">
        <DescriptionList>
          {DETAILS.map((detail) => (
            <DescriptionListItem key={detail.term}>
              <DescriptionListTerm className="text-current">
                {detail.term}
              </DescriptionListTerm>
              <DescriptionListDetails
                className={
                  detail.mono
                    ? "font-mono text-xs/6 text-current"
                    : "text-current"
                }
              >
                {detail.value}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-studio-letter

· Studio letter

Vellum texture example: a short letter on parchment vellum with an inset address line, two paragraphs and a signature. Use it for a customer note.

pnpm dlx shadcn add @01orbital/vellum-studio-letter

npx shadcn add @01orbital/vellum-studio-letter

yarn shadcn add @01orbital/vellum-studio-letter

bunx --bun shadcn add @01orbital/vellum-studio-letter

File

import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Aster Archive",
  description: "42 Museum Street, London",
  date: "7 November 2026",
  greeting: "Dear Robin,",
  paragraphs: [
    "Thank you for visiting the studio last week. I have set aside the small edition we looked at together.",
    "The new work will be ready to see in December. I will send you a note when the doors are open.",
  ],
  closing: "Warm wishes,",
  signature: "Jessica Watkins",
} as const

/** A short studio letter with an inset address line and a clear signature. */
export default function VellumStudioLetter() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#d6c9a4] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--font-display:var(--font-serif)] [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="fine" />
      <CardHeader className="relative z-20 gap-6 border-b border-current/25">
        <CardTitle className="font-display text-4xl/10 font-normal">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-4 text-sm/7">
        <p className="text-xs/6">{COPY.date}</p>
        <p>{COPY.greeting}</p>
        {COPY.paragraphs.map((paragraph) => (
          <p key={paragraph}>{paragraph}</p>
        ))}
        <p>
          {COPY.closing}
          <br />
          <span className="font-medium">{COPY.signature}</span>
        </p>
      </CardContent>
    </Card>
  )
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-quote-card

· Quote card

Vellum texture example: a quotation about the things we keep, set in cream ink on a dark olive-brown vellum ground, with an archivist credit. Use it for a testimonial.

pnpm dlx shadcn add @01orbital/vellum-quote-card

npx shadcn add @01orbital/vellum-quote-card

yarn shadcn add @01orbital/vellum-quote-card

bunx --bun shadcn add @01orbital/vellum-quote-card

File

import {
  Byline,
  BylineDescription,
  BylineName,
} from "@/components/byline/byline"
import { Vellum } from "@/components/texture/vellum"
import { Card, CardContent } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Aster Archive",
  quote: "“The things we keep tell stories we have not finished.”",
  author: "Jessica Watkins",
  role: "Archivist & book artist",
} as const

/** A quotation on a colored material surface with a small author credit. */
export default function VellumQuoteCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#383429] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="default" />
      <CardContent className="relative z-20 grid min-h-64 content-between gap-8">
        <p className="text-sm">{COPY.eyebrow}</p>
        <figure className="grid gap-6">
          <blockquote className="text-2xl/9 font-medium tracking-tight">
            {COPY.quote}
          </blockquote>
          <Byline render={<figcaption />}>
            <BylineName className="text-sm/6 font-normal">
              {COPY.author}
            </BylineName>
            <BylineDescription>{COPY.role}</BylineDescription>
          </Byline>
        </figure>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cn } from "cn"

type BylineSize = "md" | "sm"
type BylineState = { slot: "byline"; size: BylineSize }
type BylineAvatarState = { slot: "byline-avatar" }

/**
 * A person's byline: an optional `BylineAvatar`, then `BylineName` with a
 * `BylineDescription` under it, as a `div`. With an avatar it becomes two
 * columns: the avatar spans both lines, 16px from the text. Under a quote,
 * pass `render={<figcaption />}`; in a centered quote add `w-fit text-left` so it shrinks to fit
 * and keeps its text left-aligned.
 *
 * At `size="md"` (the default) the name is 16px/24px semibold and the
 * description 14px/20px muted, 2px apart; a 40px avatar matches the two
 * lines. At `size="sm"` both lines are 12px/20px, the name in regular weight,
 * the byline of a card footer.
 */
function Byline({
  className,
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"div", BylineState> & {
  /** The type size: `md` (the default) 16px over 14px, `sm` 12px over 12px for a card footer. */
  size?: BylineSize
}) {
  return useRender({
    defaultTagName: "div",
    render,
    state: { slot: "byline", size },
    props: mergeProps<"div">(
      {
        className: cn(
          "group/byline grid items-center gap-x-4 gap-y-0.5 text-sm/5 has-data-[slot=byline-avatar]:grid-cols-[auto_1fr] data-[size=sm]:text-xs/5",
          className
        ),
      },
      props
    ),
  })
}

/**
 * Holds the person's picture beside the name and description: a stock
 * `Avatar`, an orb avatar or an image, 40px recommended. Use
 * `render={<div />}` when the artwork has a block root.
 */
function BylineAvatar({
  className,
  render,
  ...props
}: useRender.ComponentProps<"span", BylineAvatarState>) {
  return useRender({
    defaultTagName: "span",
    render,
    state: { slot: "byline-avatar" },
    props: mergeProps<"span">(
      { className: cn("row-span-2 flex", className) },
      props
    ),
  })
}

/** The person's name, 16px/24px semibold, held close to the line below; 12px regular in a `sm` byline. */
function BylineName({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="byline-name"
      className={cn(
        "self-end text-base/6 font-semibold group-data-[size=sm]/byline:text-xs/5 group-data-[size=sm]/byline:font-normal",
        className
      )}
      {...props}
    />
  )
}

/**
 * The second line under the name, such as a job title, a company, a handle
 * or a date, in 14px/20px muted text; 12px in a `sm` byline.
 */
function BylineDescription({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="byline-description"
      className={cn("self-start text-muted-foreground", className)}
      {...props}
    />
  )
}

export { Byline, BylineAvatar, BylineName, BylineDescription }

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

New

vellum-day-programme

· Day program

Vellum texture example: a one-day archive photography program on parchment-tan vellum with times beside each session. Use it for a workshop schedule.

pnpm dlx shadcn add @01orbital/vellum-day-programme

npx shadcn add @01orbital/vellum-day-programme

yarn shadcn add @01orbital/vellum-day-programme

bunx --bun shadcn add @01orbital/vellum-day-programme

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Vellum } from "@/components/texture/vellum"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Aster Archive",
  title: "A day in the studio",
  description: "Saturday 14 November · Archive photography",
} as const

const SESSIONS = [
  { time: "10:00", label: "Coffee and introductions" },
  { time: "10:30", label: "Materials and a short demonstration" },
  { time: "11:15", label: "Time to make your own study" },
  { time: "13:00", label: "Lunch at the long table" },
] as const

/** A one-day program with times aligned beside their session descriptions. */
export default function VellumDayProgramme() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d6c9a4] wrap-anywhere text-[#383429] shadow-sm ring-1 ring-black/10 [--muted-foreground:#494330] sm:[--card-spacing:--spacing(8)]">
      <Vellum intensity="rich" />
      <CardHeader className="relative z-20 gap-2">
        <p className="text-sm">{COPY.eyebrow}</p>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20">
        <DescriptionList variant="divided" className="divide-current/20">
          {SESSIONS.map((session) => (
            <DescriptionListItem
              key={session.time}
              className="justify-start gap-x-5 py-4"
            >
              <DescriptionListTerm className="text-current tabular-nums">
                {session.time}
              </DescriptionListTerm>
              <DescriptionListDetails className="flex-1 text-current">
                {session.label}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

import { cn } from "cn"

const GRAIN_FINE = `url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g3)'/%3E%3C/svg%3E")`

const GRAIN_MEDIUM = `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g2)'/%3E%3C/svg%3E")`

type Intensity = "fine" | "default" | "rich"

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Two turbulence scales, a crosshatch of near-parallel rules, and a wash.
// Warm grounds read brass, cool read silver-tarnish.

type BlendMode = "soft-light" | "overlay" | "multiply" | "screen" | "normal"

const BLEND_CLASS: Record<BlendMode, string> = {
  "soft-light": "mix-blend-soft-light",
  overlay: "mix-blend-overlay",
  multiply: "mix-blend-multiply",
  screen: "mix-blend-screen",
  normal: "",
}

type Fiber = {
  // Degrees from horizontal. Pure 0°/90° aliases against pixel grid (moiré);
  // values just off-axis (1.5°, -2°, 89°, 91°) break that regularity.
  angle: number
  // Transparent gap before the line; full repeat = spacing + 1px.
  spacing: number
  // Line color alpha at start and end of its 1px transition.
  alphas: [number, number]
  // White or black ink. White fibers read as raised paper; black as recessed.
  channel: "white" | "black"
}

type Layer =
  | { kind: "wash"; color: string; blend?: BlendMode }
  | {
      kind: "noise"
      src: string
      size: number
      opacity: number
      blend: BlendMode
    }
  | { kind: "fibers"; lines: [Fiber, Fiber]; blend: BlendMode }

const SOFT_FIBERS: Layer = {
  kind: "fibers",
  blend: "overlay",
  lines: [
    { angle: 1.5, spacing: 10, alphas: [0.02, 0.032], channel: "white" },
    { angle: -2, spacing: 12, alphas: [0.018, 0.028], channel: "black" },
  ],
}

const LIGHT_LAYERS: Layer[] = [
  {
    kind: "noise",
    src: GRAIN_FINE,
    size: 56,
    opacity: 0.14,
    blend: "soft-light",
  },
  {
    kind: "noise",
    src: GRAIN_MEDIUM,
    size: 84,
    opacity: 0.1,
    blend: "overlay",
  },
  SOFT_FIBERS,
  { kind: "wash", color: "oklch(0.97 0.008 88 / 0.11)", blend: "soft-light" },
]

function renderFibers(lines: readonly Fiber[], mult: number): string {
  return lines
    .map((f) => {
      const channel = f.channel === "white" ? "1" : "0"
      const a1 = (f.alphas[0] * mult).toFixed(4)
      const a2 = (f.alphas[1] * mult).toFixed(4)
      return `repeating-linear-gradient(${f.angle}deg in srgb, transparent 0px, transparent ${f.spacing}px, oklch(${channel} 0 0 / ${a1}) ${f.spacing}px, oklch(${channel} 0 0 / ${a2}) ${f.spacing + 1}px)`
    })
    .join(", ")
}

function renderLayer(layer: Layer, mult: number, key: number) {
  if (layer.kind === "wash") {
    return (
      <div
        key={key}
        className={cn(
          "absolute inset-0",
          layer.blend && BLEND_CLASS[layer.blend]
        )}
        style={{ background: layer.color }}
      />
    )
  }
  if (layer.kind === "noise") {
    return (
      <div
        key={key}
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: `${layer.size}px`,
          opacity: layer.opacity * mult,
        }}
      />
    )
  }
  return (
    <div
      key={key}
      className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
      style={{ backgroundImage: renderFibers(layer.lines, mult) }}
    />
  )
}

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// One sheet, three intensities via `intensity`.
function Vellum({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Scales noise + fiber alphas. `fine` whispers, `rich` is assertive.
  intensity?: Intensity
}) {
  const mult = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="vellum"
      {...props}
    >
      {LIGHT_LAYERS.map((layer, i) => renderLayer(layer, mult, i))}
    </div>
  )
}

export { Vellum }

API reference

Prop

Type

It also accepts the HTML attributes of the element it renders.

Vellum

Usage

Examples

New

· Studio card

New

· Workshop invitation

New

· Seasonal menu

New

· Field note

New

· Edition cover

New

· Order receipt

New

· Collection label

New

· Studio letter

New

· Quote card

New

· Day program

API reference

Dependencies

Bamboo Paper Sheet

Cascade Lines

Grain

Linen

Painted Canvas

Paper

Vellum

UsageCopy Anchor Link

ExamplesCopy Anchor Link

· Studio cardNew

· Workshop invitationNew

· Seasonal menuNew

· Field noteNew

· Edition coverNew

· Order receiptNew

· Collection labelNew

· Studio letterNew

· Quote cardNew

· Day programNew

API referenceCopy Anchor Link

DependenciesCopy Anchor Link

More TextureCopy Anchor Link

Bamboo Paper Sheet

Cascade Lines

Grain

Linen

Painted Canvas

Paper

Usage

Examples

New

New

New

New

New

New

New

New

New

New

API reference

Dependencies

More Texture