Gradient Blinds

Heroes 18

About

Here is Gradient Blinds component

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

Code

How Gradient Blinds is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Import name must always be `Component` per demo rules.
import Component from "@/components/ui/gradient-blinds";

export default function GradientBlindsBasic() {
  return (
    <div style={{ width: "100%", height: 600, position: "relative" }}>
      <Component
        gradientColors={["#FF9FFC", "#5227FF"]}
        angle={0}
        noise={0.3}
        blindCount={12}
        blindMinWidth={50}
        spotlightRadius={0.5}
        spotlightSoftness={1}
        spotlightOpacity={1}
        mouseDampening={0.15}
        distortAmount={0}
        shineDirection="left"
        mixBlendMode="lighten"
      />
    </div>
  );
}