The prompt that made it
as published# INTEGRATE AN EXISTING REACT COMPONENT
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
shaders-hero-section.tsx
"use client"
import { PulsingBorder, MeshGradient } from "@paper-design/shaders-react"
import { motion } from "framer-motion"
import type React from "react"
import { useEffect, useRef, useState } from "react"
interface ShaderBackgroundProps {
children: React.ReactNode
}
export function ShaderBackground({ children }: ShaderBackgroundProps) {
const containerRef = useRef<HTMLDivElement>(null)
const [isActive, setIsActive] = useState(false)
useEffect(() => {
const handleMouseEnter = () => setIsActive(true)
const handleMouseLeave = () => setIsActive(false)
const container = containerRef.current
if (container) {
container.addEventListener("mouseenter", handleMouseEnter)
container.addEventListener("mouseleave", handleMouseLeave)
}
return () => {
if (container) {
container.removeEventListener("mouseenter", handleMouseEnter)
container.removeEventListener("mouseleave", handleMouseLeave)
}
}
}, [])
return (
<div ref={containerRef} className="min-h-screen w-full relative overflow-hidden">
{/* SVG Filters */}
<svg className="absolute inset-0 w-0 h-0">
<defs>
<filter id="glass-effect" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence baseFrequency="0.005" numOctaves="1" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="0.3" />
<feColorMatrix
type="matrix"
values="1 0 0 0 0.02
0 1 0 0 0.02
0 0 1 0 0.05
0 0 0 0.9 0"
result="tint"
/>
</filter>
<filter id="gooey-filter" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
result="gooey"
/>
<feComposite in="SourceGraphic" in2="gooey" operator="atop" />
</filter>
</defs>
</svg>
{/* Background Shaders */}
<MeshGradient
className="absolute inset-0 w-full h-full"
colors={["#000000", "#8B4513", "#ffffff", "#3E2723", "#5D4037"]}
speed={0.3}
backgroundColor="#000000"
/>
<MeshGradient
className="absolute inset-0 w-full h-full opacity-60"
colors={["#000000", "#ffffff", "#8B4513", "#000000"]}
speed={0.2}
wireframe="true"
backgroundColor="transparent"
/>
{children}
</div>
)
}
export function PulsingCircle() {
return (
<div className="absolute bottom-8 right-8 z-30">
<div className="relative w-20 h-20 flex items-center justify-center">
{/* Pulsing Border Circle */}
<PulsingBorder
colors={["#BEECFF", "#E77EDC", "#FF4C3E", "#00FF88", "#FFD700", "#FF6B35", "#8A2BE2"]}
colorBack="#00000000"
speed={1.5}
roundness={1}
thickness={0.1}
softness={0.2}
intensity={5}
spotsPerColor={5}
spotSize={0.1}
pulse={0.1}
smoke={0.5}
smokeSize={4}
scale={0.65}
rotation={0}
frame={9161408.251009725}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}
/>
{/* Rotating Text Around the Pulsing Border */}
<motion.svg
className="absolute inset-0 w-full h-full"
viewBox="0 0 100 100"
animate={{ rotate: 360 }}
transition={{
duration: 20,
repeat: Number.POSITIVE_INFINITY,
ease: "linear",
}}
style={{ transform: "scale(1.6)" }}
>
<defs>
<path id="circle" d="M 50, 50 m -38, 0 a 38,38 0 1,1 76,0 a 38,38 0 1,1 -76,0" />
</defs>
<text className="text-sm fill-white/80 instrument">
<textPath href="#circle" startOffset="0%">
21st.dev is cool • 21st.dev is cool • 21st.dev is cool • 21st.dev is cool •
</textPath>
</text>
</motion.svg>
</div>
</div>
)
}
export function HeroContent() {
return (
<main className="absolute bottom-8 left-8 z-20 max-w-lg">
<div className="text-left">
<div
className="inline-flex items-center px-3 py-1 rounded-full bg-white/5 backdrop-blur-sm mb-4 relative"
style={{
filter: "url(#glass-effect)",
}}
>
<div className="absolute top-0 left-1 right-1 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent rounded-full" />
<span className="text-white/90 text-xs font-light relative z-10">✨ New Paper Shaders Experience</span>
</div>
{/* Main Heading */}
<h1 className="text-5xl md:text-6xl md:leading-16 tracking-tight font-light text-white mb-4">
<span className="font-medium italic instrument">Beautiful</span> Shader
<br />
<span className="font-light tracking-tight text-white">Experiences</span>
</h1>
{/* Description */}
<p className="text-xs font-light text-white/70 mb-4 leading-relaxed">
Create stunning visual experiences with our advanced shader technology. Interactive lighting, smooth
animations, and beautiful effects that respond to your every move.
</p>
{/* Buttons */}
<div className="flex items-center gap-4 flex-wrap">
<button className="px-8 py-3 rounded-full bg-transparent border border-white/30 text-white font-normal text-xs transition-all duration-200 hover:bg-white/10 hover:border-white/50 cursor-pointer">
Pricing
</button>
<button className="px-8 py-3 rounded-full bg-white text-black font-normal text-xs transition-all duration-200 hover:bg-white/90 cursor-pointer">
Get Started
</button>
</div>
</div>
</main>
)
}
export function Header() {
return (
<header className="relative z-20 flex items-center justify-between p-6">
{/* Logo */}
<div className="flex items-center">
<svg
width="40"
height="40"
viewBox="0 0 400 400"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-label="21st logo"
className="text-white"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M358.333 0C381.345 0 400 18.6548 400 41.6667V295.833C400 298.135 398.134 300 395.833 300H270.833C268.532 300 266.667 301.865 266.667 304.167V395.833C266.667 398.134 264.801 400 262.5 400H41.6667C18.6548 400 0 381.345 0 358.333V304.72C0 301.793 1.54269 299.081 4.05273 297.575L153.76 207.747C157.159 205.708 156.02 200.679 152.376 200.065L151.628 200H4.16667C1.86548 200 6.71103e-08 198.135 0 195.833V104.167C1.07376e-06 101.865 1.86548 100 4.16667 100H162.5C164.801 100 166.667 98.1345 166.667 95.8333V4.16667C166.667 1.86548 168.532 1.00666e-07 170.833 0H358.333ZM170.833 100C168.532 100 166.667 101.865 166.667 104.167V295.833C166.667 298.135 168.532 300 170.833 300H262.5C264.801 300 266.667 298.135 266.667 295.833V104.167C266.667 101.865 264.801 100 262.5 100H170.833Z"
fill="currentColor"
/>
</svg>
</div>
{/* Navigation */}
<nav className="flex items-center space-x-2">
<a
href="#"
className="text-white/80 hover:text-white text-xs font-light px-3 py-2 rounded-full hover:bg-white/10 transition-all duration-200"
>
Features
</a>
<a
href="#"
className="text-white/80 hover:text-white text-xs font-light px-3 py-2 rounded-full hover:bg-white/10 transition-all duration-200"
>
Pricing
</a>
<a
href="#"
className="text-white/80 hover:text-white text-xs font-light px-3 py-2 rounded-full hover:bg-white/10 transition-all duration-200"
>
Docs
</a>
</nav>
{/* Login Button Group with Arrow */}
<div id="gooey-btn" className="relative flex items-center group" style={{ filter: "url(#gooey-filter)" }}>
<button className="absolute right-0 px-2.5 py-2 rounded-full bg-white text-black font-normal text-xs transition-all duration-300 hover:bg-white/90 cursor-pointer h-8 flex items-center justify-center -translate-x-10 group-hover:-translate-x-19 z-0">
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 17L17 7M17 7H7M17 7V17" />
</svg>
</button>
<button className="px-6 py-2 rounded-full bg-white text-black font-normal text-xs transition-all duration-300 hover:bg-white/90 cursor-pointer h-8 flex items-center z-10">
Login
</button>
</div>
</header>
)
}
demo.tsx
"use client"
import {Header, HeroContent, PulsingCircle, ShaderBackground} from "@/components/ui/shaders-hero-section"
export default function ShaderShowcase() {
return (
<ShaderBackground>
<Header />
<HeroContent />
<PulsingCircle />
</ShaderBackground>
)
}
```
INSTALL NPM DEPENDENCIES:
```bash
framer-motion, @paper-design/shaders-react
```
## 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.
