render-canvas-default
import { RenderCanvas } from "@/components/ui/backgrounds/render-canvas"
export function Component() {
return (
<main className="flex h-full w-full items-center justify-center overflow-hidden rounded-md border">
<RenderCanvas />
</main>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/render-canvas-default.json"render-canvas-custom
import { RenderCanvas } from "@/components/ui/backgrounds/render-canvas"
export function Component() {
return (
<main className="flex h-full w-full items-center justify-center overflow-hidden rounded-md border">
<RenderCanvas lineWidth={30} trails={200} />
</main>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/render-canvas-custom.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/render-canvas.json
Usage
import { RenderCanvas } from "@/components/ui/render-canvas"<div className="relative h-[500px] w-full rounded-lg border">
<RenderCanvas className="text-purple-600" />
<div className="relative z-10 flex h-full items-center justify-center">
<p className="text-lg font-medium">Content over animated canvas</p>
</div>
</div>API Reference
RenderCanvas
Renders a dynamic canvas with animated trails.
| Prop | Type | Default | Description |
|---|---|---|---|
trails | number | 80 | Number of trail lines rendered. |
size | number | 50 | Number of nodes per trail line. |
friction | number | 0.5 | Friction applied to line movement. |
dampening | number | 0.025 | Dampening factor for velocity transfer. |
tension | number | 0.99 | Spring tension applied along line nodes. |
lineWidth | number | 10 | Width of the line strokes. |
colorHue | number | 285 | Base hue for HSLA stroke color. |
colorSaturation | number | 100 | Saturation of HSLA stroke color. |
colorLightness | number | 50 | Lightness of HSLA stroke color. |
opacity | number | 0.025 | Opacity of strokes. |
enableColorCycle | boolean | true | Enable dynamic color cycling for trails. |
colorCycleSpeed | number | 0.0015 | Speed of hue wave for color cycling. |
colorCycleAmplitude | number | 85 | Amplitude of hue wave for color cycling. |
width | number | 700 | Canvas width in pixels. |
height | number | 650 | Canvas height in pixels. |
className | string | "" | Additional Tailwind/CSS classes applied to wrapper div. |