shader-morphing-default
"use client"
import { ShaderMorphing } from "@/components/ui/backgrounds/shader-morphing"
export function DemoOne() {
return (
<div className="relative flex h-[550px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border">
<ShaderMorphing />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/shader-morphing-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/shader-morphing.json
Usage
import { Shaderlines } from "@/components/ui/shader-morphing"<div className="relative h-screen w-full">
{/* Background Shader */}
<ShaderMorphing />
{/* Foreground Content */}
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-5xl font-bold text-white">Shader Morphing</h1>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | – | Optional id for the root container <div>. |
className | string | – | Optional Tailwind/CSS classes applied to the container <div>. |
style | React.CSSProperties | – | Inline styles applied to the root container. |
width | number | string | "100%" | Width of the canvas container. |
height | number | string | "100%" | Height of the canvas container. |
position | "absolute" | "fixed" | "relative" | "absolute" | CSS positioning for the container. |
zIndex | number | -1 | Controls stacking order. |
pointerEvents | "none" | "auto" | "none" | Whether to block or allow mouse interactions. |
animationSpeed | number | 1.0 | Multiplier for shader animation speed. |
transparentBg | boolean | true | Whether the background is transparent. |