[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "three": "0.181.1", "motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono, Montserrat, Open_Sans } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); const _montserrat = Montserrat({ subsets: ["latin"] }); const _openSans = Open_Sans({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Hero Landing Page - Start Building', description: 'A stunning hero section template with animated floating lines background', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Open Sans', 'Open Sans Fallback'; --font-serif: 'Montserrat', 'Montserrat Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import React from "react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { ChevronRight } from 'lucide-react'; export default function HeroSection() { return ( <>

Turn ideas into UI in seconds.

A minimal hero section built with v0 & React Bits animated background. Use it as a starting point for your next project, concept, or experiment.

); } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client"; import FloatingLines from "@/components/floating-lines"; import HeroSection from "@/components/hero-section"; import { HeroHeader } from "@/components/hero-header"; import { useState } from "react"; export default function Home() { const [colorPreset, setColorPreset] = useState(["#7C444F", "#9F5255", "#E16A54", "#F39E60"]); return (

{/* Animated Background */}

{/* Hero Content */}

); } [V0_FILE]typescriptreact:file="components/hero-header.tsx" isEdit="true" isMerged="true" 'use client' import Link from 'next/link' import { Menu, X, Palette } from 'lucide-react' import { Button } from '@/components/ui/button' import React from 'react' import { useScroll, motion } from 'motion/react' import { cn } from '@/lib/utils' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" const menuItems = [ { name: 'Features', href: '#link' }, { name: 'Solution', href: '#link' }, { name: 'Pricing', href: '#link' }, { name: 'About', href: '#link' }, ] const colorPresets = { crimson: ["#7C444F", "#9F5255", "#E16A54", "#F39E60"], green: ["#F0E491", "#BBC863", "#658C58", "#31694E"], pink: ["#FCF5EE", "#FFC4C4", "#EE6983", "#850E35"], purple: ["#4E56C0", "#9B5DE0", "#D78FEE", "#FDCFFA"], blue: ["#3C467B", "#50589C", "#636CCB", "#6E8CFB"], } type HeroHeaderProps = { onColorPresetChange?: (colors: string[]) => void } export const HeroHeader = ({ onColorPresetChange }: HeroHeaderProps) => { const [menuState, setMenuState] = React.useState(false) const [scrolled, setScrolled] = React.useState(false) const { scrollYProgress } = useScroll() React.useEffect(() => { const unsubscribe = scrollYProgress.on('change', (latest) => { setScrolled(latest > 0.05) }) return () => unsubscribe() }, [scrollYProgress]) const handleColorPresetChange = (preset: keyof typeof colorPresets) => { if (onColorPresetChange) { onColorPresetChange(colorPresets[preset]) } } return (

{item.name}

{item.name}

{Object.entries(colorPresets).map(([key, value]) => ( handleColorPresetChange(key)} className="focus:bg-white/10 focus:text-white cursor-pointer capitalize">

{key} ))}

) } [V0_FILE]typescriptreact:file="components/floating-lines.tsx" isEdit="true" isQuickEdit="true" import { useEffect, useRef } from 'react'; import { Scene, OrthographicCamera, WebGLRenderer, PlaneGeometry, Mesh, ShaderMaterial, Vector3, Vector2, Clock } from 'three'; const vertexShader = ` precision highp float; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` precision highp float; uniform float iTime; uniform vec3 iResolution; uniform float animationSpeed; uniform bool enableTop; uniform bool enableMiddle; uniform bool enableBottom; uniform int topLineCount; uniform int middleLineCount; uniform int bottomLineCount; uniform float topLineDistance; uniform float middleLineDistance; uniform float bottomLineDistance; uniform vec3 topWavePosition; uniform vec3 middleWavePosition; uniform vec3 bottomWavePosition; uniform vec2 iMouse; uniform bool interactive; uniform float bendRadius; uniform float bendStrength; uniform float bendInfluence; uniform bool parallax; uniform float parallaxStrength; uniform vec2 parallaxOffset; uniform vec3 lineGradient[8]; uniform int lineGradientCount; const vec3 BLACK = vec3(0.0); const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0; const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0; mat2 rotate(float r) { return mat2(cos(r), sin(r), -sin(r), cos(r)); } vec3 background_color(vec2 uv) { vec3 col = vec3(0.0); float y = sin(uv.x - 0.2) * 0.3 - 0.1; float m = uv.y - y; col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m))); col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8))); return col * 0.5; } vec3 getLineColor(float t, vec3 baseColor) { if (lineGradientCount <= 0) { return baseColor; } vec3 gradientColor; if (lineGradientCount == 1) { gradientColor = lineGradient[0]; } else { float clampedT = clamp(t, 0.0, 0.9999); float scaled = clampedT * float(lineGradientCount - 1); int idx = int(floor(scaled)); float f = fract(scaled); int idx2 = min(idx + 1, lineGradientCount - 1); vec3 c1 = lineGradient[idx]; vec3 c2 = lineGradient[idx2]; gradientColor = mix(c1, c2, f); } return gradientColor * 0.5; } float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) { float time = iTime * animationSpeed; float x_offset = offset; float x_movement = time * 0.1; float amp = sin(offset + time * 0.2) * 0.3; float y = sin(uv.x + x_offset + x_movement) * amp; if (shouldBend) { vec2 d = screenUv - mouseUv; float influence = exp(-dot(d, d) * bendRadius); // radial falloff around cursor float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence; y += bendOffset; } float m = uv.y - y; return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01; } void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y; baseUv.y *= -1.0; if (parallax) { baseUv += parallaxOffset; } vec3 col = vec3(0.0); vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv); vec2 mouseUv = vec2(0.0); if (interactive) { mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y; mouseUv.y *= -1.0; } if (enableBottom) { for (int i = 0; i < bottomLineCount; ++i) { float fi = float(i); float t = fi / max(float(bottomLineCount - 1), 1.0); vec3 lineCol = getLineColor(t, b); float angle = bottomWavePosition.z * log(length(baseUv) + 1.0); vec2 ruv = baseUv * rotate(angle); col += lineCol * wave( ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y), 1.5 + 0.2 * fi, baseUv, mouseUv, interactive ) * 0.2; } } if (enableMiddle) { for (int i = 0; i < middleLineCount; ++i) { float fi = float(i); float t = fi / max(float(middleLineCount - 1), 1.0); vec3 lineCol = getLineColor(t, b); float angle = middleWavePosition.z * log(length(baseUv) + 1.0); vec2 ruv = baseUv * rotate(angle); col += lineCol * wave( ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y), 2.0 + 0.15 * fi, baseUv, mouseUv, interactive ); } } if (enableTop) { for (int i = 0; i < topLineCount; ++i) { float fi = float(i); float t = fi / max(float(topLineCount - 1), 1.0); vec3 lineCol = getLineColor(t, b); float angle = topWavePosition.z * log(length(baseUv) + 1.0); vec2 ruv = baseUv * rotate(angle); ruv.x *= -1.0; col += lineCol * wave( ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y), 1.0 + 0.2 * fi, baseUv, mouseUv, interactive ) * 0.1; } } fragColor = vec4(col, 1.0); } void main() { vec4 color = vec4(0.0); mainImage(color, gl_FragCoord.xy); gl_FragColor = color; } `; const MAX_GRADIENT_STOPS = 8; type WavePosition = { x: number; y: number; rotate: number; }; type FloatingLinesProps = { linesGradient?: string[]; enabledWaves?: Array<'top' | 'middle' | 'bottom'>; lineCount?: number | number[]; lineDistance?: number | number[]; topWavePosition?: WavePosition; middleWavePosition?: WavePosition; bottomWavePosition?: WavePosition; animationSpeed?: number; interactive?: boolean; bendRadius?: number; bendStrength?: number; mouseDamping?: number; parallax?: boolean; parallaxStrength?: number; mixBlendMode?: React.CSSProperties['mixBlendMode']; }; function hexToVec3(hex: string): Vector3 { let value = hex.trim(); if (value.startsWith('#')) { value = value.slice(1); } let r = 255; let g = 255; let b = 255; if (value.length === 3) { r = parseInt(value[0] + value[0], 16); g = parseInt(value[1] + value[1], 16); b = parseInt(value[2] + value[2], 16); } else if (value.length === 6) { r = parseInt(value.slice(0, 2), 16); g = parseInt(value.slice(2, 4), 16); b = parseInt(value.slice(4, 6), 16); } return new Vector3(r / 255, g / 255, b / 255); } export default function FloatingLines({ linesGradient, enabledWaves = ['top', 'middle', 'bottom'], lineCount = [6], lineDistance = [5], topWavePosition, middleWavePosition, bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 }, animationSpeed = 1, interactive = true, bendRadius = 5.0, bendStrength = -0.5, mouseDamping = 0.05, parallax = true, parallaxStrength = 0.2, mixBlendMode = 'screen' }: FloatingLinesProps) { const containerRef = useRef(null); const targetMouseRef = useRef(new Vector2(-1000, -1000)); const currentMouseRef = useRef(new Vector2(-1000, -1000)); const targetInfluenceRef = useRef(0); const currentInfluenceRef = useRef(0); const targetParallaxRef = useRef(new Vector2(0, 0)); const currentParallaxRef = useRef(new Vector2(0, 0)); const getLineCount = (waveType: 'top' | 'middle' | 'bottom'): number => { if (typeof lineCount === 'number') return lineCount; if (!enabledWaves.includes(waveType)) return 0; const index = enabledWaves.indexOf(waveType); return lineCount[index] ?? 6; }; const getLineDistance = (waveType: 'top' | 'middle' | 'bottom'): number => { if (typeof lineDistance === 'number') return lineDistance; if (!enabledWaves.includes(waveType)) return 0.1; const index = enabledWaves.indexOf(waveType); return lineDistance[index] ?? 0.1; }; const topLineCount = enabledWaves.includes('top') ? getLineCount('top') : 0; const middleLineCount = enabledWaves.includes('middle') ? getLineCount('middle') : 0; const bottomLineCount = enabledWaves.includes('bottom') ? getLineCount('bottom') : 0; const topLineDistance = enabledWaves.includes('top') ? getLineDistance('top') * 0.01 : 0.01; const middleLineDistance = enabledWaves.includes('middle') ? getLineDistance('middle') * 0.01 : 0.01; const bottomLineDistance = enabledWaves.includes('bottom') ? getLineDistance('bottom') * 0.01 : 0.01; useEffect(() => { if (!containerRef.current) return; const scene = new Scene(); const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1); camera.position.z = 1; const renderer = new WebGLRenderer({ antialias: true, alpha: false }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.domElement.style.width = '100%'; renderer.domElement.style.height = '100%'; containerRef.current.appendChild(renderer.domElement); const uniforms = { iTime: { value: 0 }, iResolution: { value: new Vector3(1, 1, 1) }, animationSpeed: { value: animationSpeed }, enableTop: { value: enabledWaves.includes('top') }, enableMiddle: { value: enabledWaves.includes('middle') }, enableBottom: { value: enabledWaves.includes('bottom') }, topLineCount: { value: topLineCount }, middleLineCount: { value: middleLineCount }, bottomLineCount: { value: bottomLineCount }, topLineDistance: { value: topLineDistance }, middleLineDistance: { value: middleLineDistance }, bottomLineDistance: { value: bottomLineDistance }, topWavePosition: { value: new Vector3(topWavePosition?.x ?? 10.0, topWavePosition?.y ?? 0.5, topWavePosition?.rotate ?? -0.4) }, middleWavePosition: { value: new Vector3( middleWavePosition?.x ?? 5.0, middleWavePosition?.y ?? 0.0, middleWavePosition?.rotate ?? 0.2 ) }, bottomWavePosition: { value: new Vector3( bottomWavePosition?.x ?? 2.0, bottomWavePosition?.y ?? -0.7, bottomWavePosition?.rotate ?? 0.4 ) }, iMouse: { value: new Vector2(-1000, -1000) }, interactive: { value: interactive }, bendRadius: { value: bendRadius }, bendStrength: { value: bendStrength }, bendInfluence: { value: 0 }, parallax: { value: parallax }, parallaxStrength: { value: parallaxStrength }, parallaxOffset: { value: new Vector2(0, 0) }, lineGradient: { value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)) }, lineGradientCount: { value: 0 } }; if (linesGradient && linesGradient.length > 0) { const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS); uniforms.lineGradientCount.value = stops.length; stops.forEach((hex, i) => { const color = hexToVec3(hex); uniforms.lineGradient.value[i].set(color.x, color.y, color.z); }); } const material = new ShaderMaterial({ uniforms, vertexShader, fragmentShader }); const geometry = new PlaneGeometry(2, 2); const mesh = new Mesh(geometry, material); scene.add(mesh); const clock = new Clock(); const setSize = () => { const el = containerRef.current; if (!el) return; const width = el.clientWidth || 1; const height = el.clientHeight || 1; renderer.setSize(width, height, false); const canvasWidth = renderer.domElement.width; const canvasHeight = renderer.domElement.height; uniforms.iResolution.value.set(canvasWidth, canvasHeight, 1); }; setSize(); const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(setSize) : null; if (ro && containerRef.current) { ro.observe(containerRef.current); } const handlePointerMove = (event: PointerEvent) => { const rect = renderer.domElement.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const dpr = renderer.getPixelRatio(); targetMouseRef.current.set(x * dpr, (rect.height - y) * dpr); targetInfluenceRef.current = 1.0; if (parallax) { const centerX = rect.width / 2; const centerY = rect.height / 2; const offsetX = (x - centerX) / rect.width; const offsetY = -(y - centerY) / rect.height; targetParallaxRef.current.set(offsetX * parallaxStrength, offsetY * parallaxStrength); } }; const handlePointerLeave = () => { targetInfluenceRef.current = 0.0; }; if (interactive) { renderer.domElement.addEventListener('pointermove', handlePointerMove); renderer.domElement.addEventListener('pointerleave', handlePointerLeave); } let raf = 0; const renderLoop = () => { uniforms.iTime.value = clock.getElapsedTime(); if (interactive) { currentMouseRef.current.lerp(targetMouseRef.current, mouseDamping); uniforms.iMouse.value.copy(currentMouseRef.current); currentInfluenceRef.current += (targetInfluenceRef.current - currentInfluenceRef.current) * mouseDamping; uniforms.bendInfluence.value = currentInfluenceRef.current; } if (parallax) { currentParallaxRef.current.lerp(targetParallaxRef.current, mouseDamping); uniforms.parallaxOffset.value.copy(currentParallaxRef.current); } renderer.render(scene, camera); raf = requestAnimationFrame(renderLoop); }; renderLoop(); return () => { cancelAnimationFrame(raf); if (ro && containerRef.current) { ro.disconnect(); } if (interactive) { renderer.domElement.removeEventListener('pointermove', handlePointerMove); renderer.domElement.removeEventListener('pointerleave', handlePointerLeave); } geometry.dispose(); material.dispose(); renderer.dispose(); if (renderer.domElement.parentElement) { renderer.domElement.parentElement.removeChild(renderer.domElement); } }; }, [ linesGradient, enabledWaves, lineCount, lineDistance, topWavePosition, middleWavePosition, bottomWavePosition, animationSpeed, interactive, bendRadius, bendStrength, mouseDamping, parallax, parallaxStrength ]); return (

); }

About

Tags

Share

About

Tags

Share

More from juandadev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from juandadev

More Templates Like This