React Paper Background

Hand-made paper texture background for React and Next.js — thousands of pre-baked ink fibers layered over aged cardstock, with a gentle breathing alpha oscillation that keeps the surface quietly alive.

React Paper Background preview

Scroll to load preview

An editorial, tactile background that feels like recycled cardstock or the endpaper of a cloth-bound novel. Thousands of short random-angle ink fibers are drawn once onto an offscreen canvas, then composited each frame over a warm paper base while a slow ~20 second sine oscillates the fiber alpha — a subtle breathing that reads as "this surface is alive" without ever pulling focus. Pure Canvas 2D, no WebGL, no dependencies, and the heavy fiber generation happens a single time per resize so the RAF loop is essentially free. Ideal for long-read articles, print-inspired marketing pages, portfolio case studies, digital magazine covers, and any brand that wants texture without the cost of a background image.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:

use shadcnio to install the paper background into my project

React Paper Background