The prompt that made it
as published# WEBGL SHADER COMPONENT INTEGRATION
YOU ARE GIVEN A TASK TO INTEGRATE AN EXISTING REACT COMPONENT IN THE CODEBASE
THE CODEBASE SHOULD SUPPORT:
- SHADCN PROJECT STRUCTURE
- TAILWIND CSS
- TYPESCRIPT
IF IT DOESN'T, PROVIDE INSTRUCTIONS ON HOW TO SETUP PROJECT VIA SHADCN CLI, INSTALL TAILWIND OR TYPESCRIPT.
DETERMINE THE DEFAULT PATH FOR COMPONENTS AND STYLES.
IF DEFAULT PATH FOR COMPONENTS IS NOT /COMPONENTS/UI, PROVIDE INSTRUCTIONS ON WHY IT'S IMPORTANT TO CREATE THIS FOLDER
COPY-PASTE THIS COMPONENT TO /COMPONENTS/UI FOLDER:
```tsx
web-gl-shader.tsx
"use client"
import { useEffect, useRef } from "react"
import * as THREE from "three"
export function WebGLShader() {
const canvasRef = useRef<HTMLCanvasElement>(null)
const sceneRef = useRef<{
scene: THREE.Scene | null
camera: THREE.OrthographicCamera | null
renderer: THREE.WebGLRenderer | null
mesh: THREE.Mesh | null
uniforms: any
animationId: number | null
}>({
scene: null,
camera: null,
renderer: null,
mesh: null,
uniforms: null,
animationId: null,
})
useEffect(() => {
if (!canvasRef.current) return
const canvas = canvasRef.current
const { current: refs } = sceneRef
const vertexShader = `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
`
const fragmentShader = `
precision highp float;
uniform vec2 resolution;
uniform float time;
uniform float xScale;
uniform float yScale;
uniform float distortion;
void main() {
vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
float d = length(p) * distortion;
float rx = p.x * (1.0 + d);
float gx = p.x;
float bx = p.x * (1.0 - d);
float r = 0.05 / abs(p.y + sin((rx + time) * xScale) * yScale);
float g = 0.05 / abs(p.y + sin((gx + time) * xScale) * yScale);
float b = 0.05 / abs(p.y + sin((bx + time) * xScale) * yScale);
gl_FragColor = vec4(r, g, b, 1.0);
}
`
const initScene = () => {
refs.scene = new THREE.Scene()
refs.renderer = new THREE.WebGLRenderer({ canvas })
refs.renderer.setPixelRatio(window.devicePixelRatio)
refs.renderer.setClearColor(new THREE.Color(0x000000))
refs.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, -1)
refs.uniforms = {
resolution: { value: [window.innerWidth, window.innerHeight] },
time: { value: 0.0 },
xScale: { value: 1.0 },
yScale: { value: 0.5 },
distortion: { value: 0.05 },
}
const position = [
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, 1.0, 0.0,
]
const positions = new THREE.BufferAttribute(new Float32Array(position), 3)
const geometry = new THREE.BufferGeometry()
geometry.setAttribute("position", positions)
const material = new THREE.RawShaderMaterial({
vertexShader,
fragmentShader,
uniforms: refs.uniforms,
side: THREE.DoubleSide,
})
refs.mesh = new THREE.Mesh(geometry, material)
refs.scene.add(refs.mesh)
handleResize()
}
const animate = () => {
if (refs.uniforms) refs.uniforms.time.value += 0.01
if (refs.renderer && refs.scene && refs.camera) {
refs.renderer.render(refs.scene, refs.camera)
}
refs.animationId = requestAnimationFrame(animate)
}
const handleResize = () => {
if (!refs.renderer || !refs.uniforms) return
const width = window.innerWidth
const height = window.innerHeight
refs.renderer.setSize(width, height, false)
refs.uniforms.resolution.value = [width, height]
}
initScene()
animate()
window.addEventListener("resize", handleResize)
return () => {
if (refs.animationId) cancelAnimationFrame(refs.animationId)
window.removeEventListener("resize", handleResize)
if (refs.mesh) {
refs.scene?.remove(refs.mesh)
refs.mesh.geometry.dispose()
if (refs.mesh.material instanceof THREE.Material) {
refs.mesh.material.dispose()
}
}
refs.renderer?.dispose()
}
}, [])
return (
<canvas
ref={canvasRef}
className="fixed top-0 left-0 w-full h-full block"
/>
)
}
demo.tsx
import { WebGLShader } from "@/components/ui/web-gl-shader";
import { LiquidButton } from '@/components/ui/liquid-glass-button'
export default function DemoOne() {
return (
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
<WebGLShader/>
<div className="relative border border-[#27272a] p-2 w-full mx-auto max-w-3xl">
<main className="relative border border-[#27272a] py-10 overflow-hidden">
<h1 className="mb-3 text-white text-center text-7xl font-extrabold tracking-tighter md:text-[clamp(2rem,8vw,7rem)]">Design is Everything</h1>
<p className="text-white/60 px-6 text-center text-xs md:text-sm lg:text-lg">Unleashing creativity through bold visuals, seamless interfaces, and limitless possibilities.</p>
<div className="my-8 flex items-center justify-center gap-1">
<span className="relative flex h-3 w-3 items-center justify-center">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
</span>
<p className="text-xs text-green-500">Available for New Projects</p>
</div>
<div className="flex justify-center">
<LiquidButton className="text-white border rounded-full" size={'xl'}>Let's Go</LiquidButton>
</div>
</main>
</div>
</div>
)
}
```
COPY-PASTE THESE FILES FOR DEPENDENCIES:
```tsx
designali-in/liquid-glass-button
"use client"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-primary-foreground hover:bg-destructive/90",
cool: "dark:inset-shadow-2xs dark:inset-shadow-white/10 bg-linear-to-t border border-b-2 border-zinc-950/40 from-primary to-primary/85 shadow-md shadow-primary/20 ring-1 ring-inset ring-white/25 transition-[filter] duration-200 hover:brightness-110 active:brightness-90 dark:border-x-0 text-primary-foreground dark:text-primary-foreground dark:border-t-0 dark:border-primary/50 dark:ring-white/5",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants, liquidbuttonVariants, LiquidButton }
const liquidbuttonVariants = cva(
"inline-flex items-center transition-colors justify-center cursor-pointer gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default: "bg-transparent hover:scale-105 duration-300 transition text-primary",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 text-xs gap-1.5 px-4 has-[>svg]:px-4",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
xl: "h-12 rounded-md px-8 has-[>svg]:px-6",
xxl: "h-14 rounded-md px-10 has-[>svg]:px-8",
icon: "size-9",
},
},
defaultVariants: {
variant: "default",
size: "xxl",
},
}
)
function LiquidButton({
className,
variant,
size,
asChild = false,
children,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof liquidbuttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot : "button"
return (
<>
<Comp
data-slot="button"
className={cn(
"relative",
liquidbuttonVariants({ variant, size, className })
)}
{...props}
>
<div className="absolute top-0 left-0 z-0 h-full w-full rounded-full
shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)]
transition-all
dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]" />
<div
className="absolute top-0 left-0 isolate -z-10 h-full w-full overflow-hidden rounded-md"
style={{ backdropFilter: 'url("#container-glass")' }}
/>
<div className="pointer-events-none z-10 ">
{children}
</div>
<GlassFilter />
</Comp>
</>
)
}
function GlassFilter() {
return (
<svg className="hidden">
<defs>
<filter
id="container-glass"
x="0%"
y="0%"
width="100%"
height="100%"
colorInterpolationFilters="sRGB"
>
{/* Generate turbulent noise for distortion */}
<feTurbulence
type="fractalNoise"
baseFrequency="0.05 0.05"
numOctaves="1"
seed="1"
result="turbulence"
/>
{/* Blur the turbulence pattern slightly */}
<feGaussianBlur in="turbulence" stdDeviation="2" result="blurredNoise" />
{/* Displace the source graphic with the noise */}
<feDisplacementMap
in="SourceGraphic"
in2="blurredNoise"
scale="70"
xChannelSelector="R"
yChannelSelector="B"
result="displaced"
/>
{/* Apply overall blur on the final result */}
<feGaussianBlur in="displaced" stdDeviation="4" result="finalBlur" />
{/* Output the result */}
<feComposite in="finalBlur" in2="finalBlur" operator="over" />
</filter>
</defs>
</svg>
);
}
type ColorVariant =
| "default"
| "primary"
| "success"
| "error"
| "gold"
| "bronze";
interface MetalButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ColorVariant;
}
const colorVariants: Record<
ColorVariant,
{
outer: string;
inner: string;
button: string;
textColor: string;
textShadow: string;
}
> = {
default: {
outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
inner: "bg-gradient-to-b from-[#FAFAFA] via-[#3E3E3E] to-[#E5E5E5]",
button: "bg-gradient-to-b from-[#B9B9B9] to-[#969696]",
textColor: "text-white",
textShadow: "[text-shadow:_0_-1px_0_rgb(80_80_80_/_100%)]",
},
primary: {
outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
inner: "bg-gradient-to-b from-primary via-secondary to-muted",
button: "bg-gradient-to-b from-primary to-primary/40",
textColor: "text-white",
textShadow: "[text-shadow:_0_-1px_0_rgb(30_58_138_/_100%)]",
},
success: {
outer: "bg-gradient-to-b from-[#005A43] to-[#7CCB9B]",
inner: "bg-gradient-to-b from-[#E5F8F0] via-[#00352F] to-[#D1F0E6]",
button: "bg-gradient-to-b from-[#9ADBC8] to-[#3E8F7C]",
textColor: "text-[#FFF7F0]",
textShadow: "[text-shadow:_0_-1px_0_rgb(6_78_59_/_100%)]",
},
error: {
outer: "bg-gradient-to-b from-[#5A0000] to-[#FFAEB0]",
inner: "bg-gradient-to-b from-[#FFDEDE] via-[#680002] to-[#FFE9E9]",
button: "bg-gradient-to-b from-[#F08D8F] to-[#A45253]",
textColor: "text-[#FFF7F0]",
textShadow: "[text-shadow:_0_-1px_0_rgb(146_64_14_/_100%)]",
},
gold: {
outer: "bg-gradient-to-b from-[#917100] to-[#EAD98F]",
inner: "bg-gradient-to-b from-[#FFFDDD] via-[#856807] to-[#FFF1B3]",
button: "bg-gradient-to-b from-[#FFEBA1] to-[#9B873F]",
textColor: "text-[#FFFDE5]",
textShadow: "[text-shadow:_0_-1px_0_rgb(178_140_2_/_100%)]",
},
bronze: {
outer: "bg-gradient-to-b from-[#864813] to-[#E9B486]",
inner: "bg-gradient-to-b from-[#EDC5A1] via-[#5F2D01] to-[#FFDEC1]",
button: "bg-gradient-to-b from-[#FFE3C9] to-[#A36F3D]",
textColor: "text-[#FFF7F0]",
textShadow: "[text-shadow:_0_-1px_0_rgb(124_45_18_/_100%)]",
},
};
const metalButtonVariants = (
variant: ColorVariant = "default",
isPressed: boolean,
isHovered: boolean,
isTouchDevice: boolean,
) => {
const colors = colorVariants[variant];
const transitionStyle = "all 250ms cubic-bezier(0.1, 0.4, 0.2, 1)";
return {
wrapper: cn(
"relative inline-flex transform-gpu rounded-md p-[1.25px] will-change-transform",
colors.outer,
),
wrapperStyle: {
transform: isPressed
? "translateY(2.5px) scale(0.99)"
: "translateY(0) scale(1)",
boxShadow: isPressed
? "0 1px 2px rgba(0, 0, 0, 0.15)"
: isHovered && !isTouchDevice
? "0 4px 12px rgba(0, 0, 0, 0.12)"
: "0 3px 8px rgba(0, 0, 0, 0.08)",
transition: transitionStyle,
transformOrigin: "center center",
},
inner: cn(
"absolute inset-[1px] transform-gpu rounded-lg will-change-transform",
colors.inner,
),
innerStyle: {
transition: transitionStyle,
transformOrigin: "center center",
filter:
isHovered && !isPressed && !isTouchDevice ? "brightness(1.05)" : "none",
},
button: cn(
"relative z-10 m-[1px] rounded-md inline-flex h-11 transform-gpu cursor-pointer items-center justify-center overflow-hidden rounded-md px-6 py-2 text-sm leading-none font-semibold will-change-transform outline-none",
colors.button,
colors.textColor,
colors.textShadow,
),
buttonStyle: {
transform: isPressed ? "scale(0.97)" : "scale(1)",
transition: transitionStyle,
transformOrigin: "center center",
filter:
isHovered && !isPressed && !isTouchDevice ? "brightness(1.02)" : "none",
},
};
};
const ShineEffect = ({ isPressed }: { isPressed: boolean }) => {
return (
<div
className={cn(
"pointer-events-none absolute inset-0 z-20 overflow-hidden transition-opacity duration-300",
isPressed ? "opacity-20" : "opacity-0",
)}
>
<div className="absolute inset-0 rounded-md bg-gradient-to-r from-transparent via-neutral-100 to-transparent" />
</div>
);
};
export const MetalButton = React.forwardRef<
HTMLButtonElement,
MetalButtonProps
>(({ children, className, variant = "default", ...props }, ref) => {
const [isPressed, setIsPressed] = React.useState(false);
const [isHovered, setIsHovered] = React.useState(false);
const [isTouchDevice, setIsTouchDevice] = React.useState(false);
React.useEffect(() => {
setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
}, []);
const buttonText = children || "Button";
const variants = metalButtonVariants(
variant,
isPressed,
isHovered,
isTouchDevice,
);
const handleInternalMouseDown = () => {
setIsPressed(true);
};
const handleInternalMouseUp = () => {
setIsPressed(false);
};
const handleInternalMouseLeave = () => {
setIsPressed(false);
setIsHovered(false);
};
const handleInternalMouseEnter = () => {
if (!isTouchDevice) {
setIsHovered(true);
}
};
const handleInternalTouchStart = () => {
setIsPressed(true);
};
const handleInternalTouchEnd = () => {
setIsPressed(false);
};
const handleInternalTouchCancel = () => {
setIsPressed(false);
};
return (
<div className={variants.wrapper} style={variants.wrapperStyle}>
<div className={variants.inner} style={variants.innerStyle}></div>
<button
ref={ref}
className={cn(variants.button, className)}
style={variants.buttonStyle}
{...props}
onMouseDown={handleInternalMouseDown}
onMouseUp={handleInternalMouseUp}
onMouseLeave={handleInternalMouseLeave}
onMouseEnter={handleInternalMouseEnter}
onTouchStart={handleInternalTouchStart}
onTouchEnd={handleInternalTouchEnd}
onTouchCancel={handleInternalTouchCancel}
>
<ShineEffect isPressed={isPressed} />
{buttonText}
{isHovered && !isPressed && !isTouchDevice && (
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t rounded-lg from-transparent to-white/5" />
)}
</button>
</div>
);
});
MetalButton.displayName = "MetalButton";
```
INSTALL NPM DEPENDENCIES:
```bash
three, @radix-ui/react-slot, class-variance-authority
```
## IMPLEMENTATION GUIDELINES
1. ANALYZE THE COMPONENT STRUCTURE AND IDENTIFY ALL REQUIRED DEPENDENCIES
2. REVIEW THE COMPONENT'S ARGUMENS AND STATE
3. IDENTIFY ANY REQUIRED CONTEXT PROVIDERS OR HOOKS AND INSTALL THEM
4. QUESTIONS TO ASK
- WHAT DATA/PROPS WILL BE PASSED TO THIS COMPONENT?
- ARE THERE ANY SPECIFIC STATE MANAGEMENT REQUIREMENTS?
- ARE THERE ANY REQUIRED ASSETS (IMAGES, ICONS, ETC.)?
- WHAT IS THE EXPECTED RESPONSIVE BEHAVIOR?
- WHAT IS THE BEST PLACE TO USE THIS COMPONENT IN THE APP?
## STEPS TO INTEGRATE
0. COPY PASTE ALL THE CODE ABOVE IN THE CORRECT DIRECTORIES
1. INSTALL EXTERNAL DEPENDENCIES
2. FILL IMAGE ASSETS WITH UNSPLASH STOCK IMAGES YOU KNOW EXIST
3. USE LUCIDE-REACT ICONS FOR SVGS OR LOGOS IF COMPONENT REQUIRES THEMAdds a render step. Works best with the HyperFrames or Remotion skills installed. Free, no sign-up.
Prompt by @pulkitxm. Prompts belong to their creators.
