Raked Sand Garden Background

Shaders 57

About

Raked sand garden background: a karesansui zen gravel bed seen from above under a low sun, with parallel furrows, concentric rings round moss-footed stones, and every groove lit and shadowed per pixel. Drag across it and a cedar rake draws new furrows that curve with your stroke and stop at the island berms. Day and moonlit night. 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 Raked Sand Garden Background to your project and fits it to your theme.

Code

How Raked Sand Garden Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import RakedSandGarden from "@/components/ui/raked-sand-garden"

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">
      <RakedSandGarden>
        <p className="absolute bottom-5 left-5 rounded-full bg-stone-900/80 px-3.5 py-1.5 text-[11px] font-medium uppercase tracking-[0.24em] text-stone-100 dark:bg-stone-100/85 dark:text-stone-900">
          Drag to rake
        </p>
      </RakedSandGarden>
    </div>
  )
}