Docs·Curtain Background

Curtain Background

A flowing simplex-noise field with layered crimson light, animated grain, and a soft vignette.

Installation

$pnpm dlx shadcn@latest add @spiderui/curtain-background

Usage

Place the component in a container with an explicit height. Content passed as children stays above the animated fabric.

API Reference

PropTypeDefault
colorsPrimary, light, and base colors for the noise field.
readonly string[]["#ef4444", "#dc2626", "#b91c1c"]
speedMultiplier for the fabric drift animation.
number0.3
grainStrength of the animated surface grain.
number0.6
heightCSS height of the background container.
string | number"100%"
pausedRender a still frame without running the animation loop.
booleanfalse
childrenOptional content rendered above the canvas.
React.ReactNode—
classNameAdditional classes for the root container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { CurtainBackground } from "@/components/ui/curtain-background"
export function Demo() {
  return (
    <div className="h-[420px] overflow-hidden rounded-3xl">
      <CurtainBackground
        colors={["#ef4444", "#dc2626", "#b91c1c"]}
        speed={0.3}
        grain={0.6}
      />
    </div>
  )
}