Faded Grain Wordmark

Fill the end of a page with a large serif wordmark, blended grain, and a soft fade.

Dependencies: motion
Size: 36 lines
Controls: 4 controls

example.tsx

1import { FadedGrainWordmark } from "@/components/onycx/faded-grain-wordmark";23export default function Example() {4  return (5    <FadedGrainWordmark6      text={"Trexa"}7      opacity={0.2}8      grain={0.12}9      background={"#0b0b0c"}10    />11  );12}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/faded-grain-wordmark.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/faded-grain-wordmark.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the faded-grain-wordmark.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
text	string	—	Wordmark for this example.
opacity	number	—	Text opacity for this example.
grain	number	—	Grain for this example.
background	string	—	Background for this example.