lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
30 lines • 1.32 kB
TypeScript
/**
* Valid blur sizes supported by Tailwind CSS.
*/
export type BlurSize = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
/**
* @typedef {Object} ShaderBackgroundProps
* @property {BlurSize} [backdropBlurAmount] - The size of the backdrop blur to apply.
* Valid values are "none", "sm", "md", "lg", "xl", "2xl", "3xl".
* Defaults to "sm" if not provided.
* @property {string} [color] - The color of the shader's glow in hexadecimal format (e.g., "#RRGGBB").
* Defaults to "#471CE2" (purple) if not provided.
* @property {string} [className] - Additional CSS classes to apply to the container div.
*/
interface ShaderBackgroundProps {
backdropBlurAmount?: string;
color?: string;
className?: string;
}
/**
* A React component that renders an interactive WebGL shader background.
* The background features a turbulent, glowing wave pattern that responds to mouse movement.
* An optional backdrop blur can be applied over the shader.
*
* @param {ShaderBackgroundProps} props - The component props.
* @returns {JSX.Element} The rendered ShaderBackground component.
*/
declare function ShaderBackground({ backdropBlurAmount, color, // Default purple color
className, }: ShaderBackgroundProps): React.ReactNode;
export default ShaderBackground;
//# sourceMappingURL=shader-background.d.ts.map