Stipple: React Texture component

Halftone stipple texture of radial dots, in a default or a dense pitch. White by default, recolored for light grounds; intensity scales dot opacity. A print-style overlay.

pnpm dlx shadcn add @01orbital/stipple

File

import { cn } from "cn"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

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

/** A sized stipple surface with readable studio details. */
export default function StippleDemo() {
  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-[#f1d677] p-6 wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--muted-foreground:#414d43] sm:p-8">
        <Stipple intensity="rich" className="[--stipple-color:#313c3e]" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Good Measure</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Owen Clarke
            </CardTitle>
            <CardDescription>Graphic designer</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>14 Station Street, Margate</span>
          <a
            href="mailto:hello@goodmeasure.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@goodmeasure.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 { Stipple } from "@/components/texture/stipple"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized stipple surface with readable studio details. */
export default function StippleDemo() {
  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-[#f1d677] p-6 wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--muted-foreground:#414d43] sm:p-8">
        <Stipple intensity="rich" className="[--stipple-color:#313c3e]" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Good Measure</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Owen Clarke
            </CardTitle>
            <CardDescription>Graphic designer</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>14 Station Street, Margate</span>
          <a
            href="mailto:hello@goodmeasure.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@goodmeasure.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

Examples

New

stipple-studio-card

· Studio card

Stipple texture example: a contact card on straw-yellow stock with rich stipple, a graphic designer's name, a Margate address and email. Use it for a studio or business card.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  house: "Good Measure",
  title: "Victor Glover",
  description: "Graphic designer",
  address: "14 Station Street, Margate",
  email: "hello@goodmeasure.example",
} as const

/** A textured studio contact card with a compact identity and an email link. */
export default function StippleStudioCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f1d677] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple intensity="rich" className="[--stipple-color:#313c3e]" />
      <CardHeader className="relative z-20 gap-6">
        <p className="text-sm font-medium">{COPY.house}</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:${COPY.email}`}
          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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-workshop-invitation

· Workshop invitation

Stipple · Workshop invitation: an example of stipple.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Good Measure / Workshop",
  title: "Print in two colors",
  description:
    "Turn a drawing into a two-color risograph print. Leave with an edition of ten.",
  places: "8 places · Materials included",
  price: "£45 per person",
  day: "14",
  month: "November 2026",
  when: "Saturday, 14:00–17:00",
  address: "14 Station Street, Margate",
} as const

/** A workshop invitation with a large date, a short introduction and booking details. */
export default function StippleWorkshopInvitation() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#f1d677] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple
        intensity="fine"
        variant="dense"
        className="[--stipple-color:#313c3e]"
      />
      <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.when}
          <br />
          {COPY.address}
        </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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-seasonal-menu

· Seasonal menu

Stipple texture example: a lunch menu on ivory stock with slate-teal stipple, aligned prices and an allergy note. Use it for a cafe or restaurant menu.

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

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

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

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

File

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

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

const ITEMS = [
  { term: "Carrot & ginger soup", price: "£7" },
  { term: "Roast pepper sandwich", price: "£12" },
  { term: "Ginger loaf", price: "£6" },
] as const

/** A seasonal menu with aligned prices and a clear note about dietary requirements. */
export default function StippleSeasonalMenu() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f3ede0] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple intensity="default" className="[--stipple-color:#313c3e]" />
      <CardHeader className="relative z-20 gap-2 border-b border-current/20">
        <p className="text-sm">{COPY.house}</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">
          {ITEMS.map((item) => (
            <DescriptionListItem key={item.term}>
              <DescriptionListTerm className="text-current">
                {item.term}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current tabular-nums">
                {item.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-current/20 text-xs/5">
        {COPY.allergies}
      </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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-field-note

· Field note

Stipple texture example: a dated proofing note on straw-yellow stock with dense dots, about midtones closing up, plus a next-time list. Use it for a print journal entry.

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

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

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

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

File

import { Stipple } from "@/components/texture/stipple"
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: "Good Measure",
  date: "7 Nov 2026",
  body: "The dots close up in the darkest area. Open the midtones before the next proof.",
  next: "For next time",
} as const

const NEXT = [
  "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 StippleFieldNote() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#f1d677] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple
        intensity="rich"
        variant="dense"
        className="[--stipple-color:#313c3e]"
      />
      <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.date}
        </time>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-6">
        <p className="text-base/7">{COPY.body}</p>
        <div className="grid gap-2">
          <p className="text-sm font-medium">{COPY.next}</p>
          <ul className="list-disc space-y-2 pl-4 text-sm/6">
            {NEXT.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}

import { cn } from "cn"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-edition-cover

· Edition cover

Stipple texture example: a slate-teal cover in fine cream stipple with a large issue number and the title Marks in repetition. Use it for a zine or portfolio cover.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  house: "Good Measure",
  edition: "Studio edition",
  title: "Marks in repetition",
  season: "Autumn / Winter 2026",
  details: "Limited edition · 48 pages",
  issue: "04",
} as const

/** An editorial cover with a large issue number and a restrained title block. */
export default function StippleEditionCover() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#313c3e] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <Stipple intensity="fine" className="[--stipple-color:#f7f0df]" />
      <CardHeader className="relative z-20 flex flex-wrap items-start justify-between gap-4">
        <p className="text-sm/6">{COPY.house}</p>
        <span className="text-xs/6">{COPY.edition}</span>
      </CardHeader>
      <CardContent className="relative z-20 grid min-h-64 content-between gap-10 pt-4">
        <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.details}</span>
      </CardFooter>
    </Card>
  )
}

import { cn } from "cn"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-order-receipt

· Order receipt

Stipple texture example: an itemized order on straw-yellow stock with dense slate-teal stipple, a paid total and a pickup note. Use it for a shop receipt.

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

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

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

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

File

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

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

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

/** An itemized print order with a paid total and a collection note. */
export default function StippleOrderReceipt() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#f1d677] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple
        intensity="default"
        variant="dense"
        className="[--stipple-color:#313c3e]"
      />
      <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.term}>
              <DescriptionListTerm className="text-current">
                {item.term}
              </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.paid}
            </DescriptionListTerm>
            <DescriptionListDetails className="text-current">
              {COPY.total}
            </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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-collection-label

· Collection label

Stipple · Collection label: an example of stipple.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Good Measure / Study collection",
  title: "Study in November",
  description: "Victor Glover, 2026",
  referenceTerm: "Reference",
  reference: "ST-2026-014",
} as const

const DETAILS = [
  { term: "Material", detail: "Ink on uncoated paper" },
  { term: "Dimensions", detail: "210 × 297 mm" },
  { term: "Edition", detail: "12 of 50" },
] as const

/** A collection label with the edition, material and dimensions in a definition list. */
export default function StippleCollectionLabel() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d7d9d1] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple intensity="rich" className="[--stipple-color:#313c3e]" />
      <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((row) => (
            <DescriptionListItem key={row.term}>
              <DescriptionListTerm className="text-current">
                {row.term}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current">
                {row.detail}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
          <DescriptionListItem>
            <DescriptionListTerm className="text-current">
              {COPY.referenceTerm}
            </DescriptionListTerm>
            <DescriptionListDetails className="font-mono text-xs/6 text-current">
              {COPY.reference}
            </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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-studio-letter

· Studio letter

Stipple texture example: a short letter on straw-yellow stock with fine dense dots, an inset address, two paragraphs and a signature. Use it for a customer note.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  title: "Good Measure",
  description: "14 Station Street, Margate",
  date: "7 November 2026",
  salutation: "Dear Robin,",
  name: "Victor Glover",
  closing: "Warm wishes,",
} as const

const 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.",
] as const

/** A short studio letter with an inset address line and a clear signature. */
export default function StippleStudioLetter() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#f1d677] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple
        intensity="fine"
        variant="dense"
        className="[--stipple-color:#313c3e]"
      />
      <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.salutation}</p>
        {PARAGRAPHS.map((paragraph) => (
          <p key={paragraph}>{paragraph}</p>
        ))}
        <p>
          {COPY.closing}
          <br />
          <span className="font-medium">{COPY.name}</span>
        </p>
      </CardContent>
    </Card>
  )
}

import { cn } from "cn"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-quote-card

· Quote card

Stipple texture example: a quotation about repeating a mark, in cream ink on a slate-teal stippled ground, with a graphic designer credit. Use it for a testimonial.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  house: "Good Measure",
  quote: "“Make a mark, then see what happens when it repeats.”",
  name: "Victor Glover",
  role: "Graphic designer",
} as const

/** A quotation on a colored material surface with a small author credit. */
export default function StippleQuoteCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#313c3e] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <Stipple intensity="default" className="[--stipple-color:#f7f0df]" />
      <CardContent className="relative z-20 grid min-h-64 content-between gap-8">
        <p className="text-sm">{COPY.house}</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.name}
            </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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

New

stipple-day-programme

· Day program

Stipple texture example: a one-day risograph printing program on straw-yellow stock with dense slate-teal dots and times beside sessions. Use it for a print studio schedule.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Good Measure",
  title: "A day in the studio",
  description: "Saturday 14 November · Risograph printing",
} 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 StippleDayProgramme() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f1d677] wrap-anywhere text-[#313c3e] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#414d43] sm:[--card-spacing:--spacing(8)]">
      <Stipple
        intensity="rich"
        variant="dense"
        className="[--stipple-color:#313c3e]"
      />
      <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"

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)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Halftone dots — `default` 6px/1px, `dense` 3px/0.5px; `intensity` 0.6x–1.45x.

type StippleVariant = "default" | "dense"

const VARIANT_CONFIG: Record<
  StippleVariant,
  { size: string; dotSize: string; baseOpacity: number }
> = {
  default: { size: "6px 6px", dotSize: "1px", baseOpacity: 0.04 },
  dense: { size: "3px 3px", dotSize: "0.5px", baseOpacity: 0.03 },
}

function Stipple({
  variant = "default",
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  variant?: StippleVariant
  intensity?: Intensity
}) {
  const cfg = VARIANT_CONFIG[variant]
  const opacity = (cfg.baseOpacity * INTENSITY_MULT[intensity]).toFixed(4)
  return (
    // One div, so a caller's `style` lands on the element that paints.
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="stipple"
      style={{
        backgroundImage: `radial-gradient(in srgb, oklch(from var(--stipple-color, oklch(1 0 0)) l c h / ${opacity}) ${cfg.dotSize}, transparent ${cfg.dotSize})`,
        backgroundSize: cfg.size,
        ...style,
      }}
      {...props}
    />
  )
}

export { Stipple }

API reference

Prop

Type

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

Stipple

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

Stipple

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