Grain

A paper grain that gives flat surfaces some texture.

Issue 04

Paper and ink

Installation#

pnpm dlx shadcn@latest add @balick/grain

Or pass the full URL: https://ui.balick.me/r/grain.json

Usage#

import { Grain } from "@/components/ui/grain"

export function Card() {
  return (
    <div className="relative overflow-hidden rounded-xl bg-card p-6">
      <Grain />
      <p className="relative">Paper and ink</p>
    </div>
  )
}

Props#

Prop	Type	Default	Description
`frequency` Fineness of the grain: higher values give smaller specks.	`number`	0.8	Fineness of the grain: higher values give smaller specks.
`octaves` Number of noise layers: more layers give a richer texture.	`number`	3	Number of noise layers: more layers give a richer texture.
`className` A text-* class sets the color of the specks; opacity-* how much they show (20% by default).	`string`	—	A text-* class sets the color of the specks; opacity-* how much they show (20% by default).