Ripped Denim Cloth Background

Ripped denim cloth background: a hanging length of indigo denim simulated as real cloth, falling in soft vertical folds. Drag across it to tear it: the warp snaps, the cut opens under its own weight, and the edge frays into white weft. Click to puncture, hover to press. Indigo, rinse, light-wash and black presets. React only, WebGL, no assets.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ripped Denim Cloth Background to your project and fits it to your theme.

"use client"

import DistressedDenim from "@/components/ui/distressed-denim"

export default function Demo() {
  // w-full matters: 21st centres demos in a flex wrapper, and a flex item
  // left at width:auto shrinks the canvas to 0px wide.
  return (
    <div className="w-full">
      <DistressedDenim rips={7} />
    </div>
  )
}