[V0_FILE]json:file="package.json" isMerged="true" { "name": "gradient-background-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.4", "ogl": "^1.0.6" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18" } } [V0_FILE]typescriptreact:file="components/GradientBlinds.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef } from "react" import { Renderer, Program, Mesh, Triangle } from "ogl" export interface GradientBlindsProps { className?: string dpr?: number paused?: boolean gradientColors?: string[] angle?: number noise?: number blindCount?: number blindMinWidth?: number mouseDampening?: number mirrorGradient?: boolean spotlightRadius?: number spotlightSoftness?: number spotlightOpacity?: number distortAmount?: number shineDirection?: "left" | "right" mixBlendMode?: string } const MAX_COLORS = 8 const hexToRGB = (hex: string): [number, number, number] => { const c = hex.replace("#", "").padEnd(6, "0") const r = Number.parseInt(c.slice(0, 2), 16) / 255 const g = Number.parseInt(c.slice(2, 4), 16) / 255 const b = Number.parseInt(c.slice(4, 6), 16) / 255 return [r, g, b] } const prepStops = (stops?: string[]) => { const base = (stops && stops.length ? stops : ["#0f1629", "#1e3a8a", "#2563eb", "#1d4ed8"]).slice(0, MAX_COLORS) if (base.length === 1) base.push(base[0]) while (base.length < MAX_COLORS) base.push(base[base.length - 1]) const arr: [number, number, number][] = [] for (let i = 0; i < MAX_COLORS; i++) arr.push(hexToRGB(base[i])) const count = Math.max(2, Math.min(MAX_COLORS, stops?.length ?? 2)) return { arr, count } } const GradientBlinds: React.FC = ({ className, dpr, paused = false, gradientColors = ["#0f1629", "#1e3a8a", "#2563eb", "#1d4ed8"], angle = 0, noise = 0.3, blindCount = 16, blindMinWidth = 60, mouseDampening = 0.15, mirrorGradient = false, spotlightRadius = 0.5, spotlightSoftness = 1, spotlightOpacity = 1, distortAmount = 0, shineDirection = "left", mixBlendMode = "lighten", }) => { const containerRef = useRef(null) const rafRef = useRef(null) const programRef = useRef(null) const meshRef = useRef | null>(null) const geometryRef = useRef(null) const rendererRef = useRef(null) const mouseTargetRef = useRef<[number, number]>([0, 0]) const lastTimeRef = useRef(0) const firstResizeRef = useRef(true) useEffect(() => { const container = containerRef.current if (!container) return const renderer = new Renderer({ dpr: dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1), alpha: true, antialias: true, }) rendererRef.current = renderer const gl = renderer.gl const canvas = gl.canvas as HTMLCanvasElement canvas.style.width = "100%" canvas.style.height = "100%" canvas.style.display = "block" container.appendChild(canvas) const vertex = ` attribute vec2 position; attribute vec2 uv; varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); } ` const fragment = ` #ifdef GL_ES precision mediump float; #endif uniform vec3 iResolution; uniform vec2 iMouse; uniform float iTime; uniform float uRevealProgress; uniform float uAngle; uniform float uNoise; uniform float uBlindCount; uniform float uSpotlightRadius; uniform float uSpotlightSoftness; uniform float uSpotlightOpacity; uniform float uMirror; uniform float uDistort; uniform float uShineFlip; uniform vec3 uColor0; uniform vec3 uColor1; uniform vec3 uColor2; uniform vec3 uColor3; uniform vec3 uColor4; uniform vec3 uColor5; uniform vec3 uColor6; uniform vec3 uColor7; uniform int uColorCount; varying vec2 vUv; float rand(vec2 co){ return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); } vec2 rotate2D(vec2 p, float a){ float c = cos(a); float s = sin(a); return mat2(c, -s, s, c) * p; } vec3 getGradientColor(float t){ float tt = clamp(t, 0.0, 1.0); int count = uColorCount; if (count < 2) count = 2; float scaled = tt * float(count - 1); float seg = floor(scaled); float f = fract(scaled); if (seg < 1.0) return mix(uColor0, uColor1, f); if (seg < 2.0 && count > 2) return mix(uColor1, uColor2, f); if (seg < 3.0 && count > 3) return mix(uColor2, uColor3, f); if (seg < 4.0 && count > 4) return mix(uColor3, uColor4, f); if (seg < 5.0 && count > 5) return mix(uColor4, uColor5, f); if (seg < 6.0 && count > 6) return mix(uColor5, uColor6, f); if (seg < 7.0 && count > 7) return mix(uColor6, uColor7, f); if (count > 7) return uColor7; if (count > 6) return uColor6; if (count > 5) return uColor5; if (count > 4) return uColor4; if (count > 3) return uColor3; if (count > 2) return uColor2; return uColor1; } void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv0 = fragCoord.xy / iResolution.xy; float aspect = iResolution.x / iResolution.y; vec2 p = uv0 * 2.0 - 1.0; p.x *= aspect; vec2 pr = rotate2D(p, uAngle); pr.x /= aspect; vec2 uv = pr * 0.5 + 0.5; vec2 uvMod = uv; if (uDistort > 0.0) { float a = uvMod.y * 6.0; float b = uvMod.x * 6.0; float w = 0.01 * uDistort; uvMod.x += sin(a) * w; uvMod.y += cos(b) * w; } float t = uvMod.x; if (uMirror > 0.5) { t = 1.0 - abs(1.0 - 2.0 * fract(t)); } vec3 base = getGradientColor(t); float glowWave = sin(iTime * 0.8 + uv0.y * 3.14159) * 0.5 + 0.5; float glowPosition = sin(iTime * 0.3) * 0.5 + 0.5; float glowDistance = abs(uv0.y - glowPosition); float glowIntensity = 1.0 - smoothstep(0.0, 0.25, glowDistance); vec3 glowColor = base * (1.0 + glowIntensity * 0.01 * glowWave); vec2 offset = vec2(iMouse.x/iResolution.x, iMouse.y/iResolution.y); float d = length(uv0 - offset); float r = max(uSpotlightRadius, 1e-4); float dn = d / r; float spot = (1.0 - 2.0 * pow(dn, uSpotlightSoftness)) * uSpotlightOpacity; vec3 cir = vec3(spot); float stripe = fract(uvMod.x * max(uBlindCount, 1.0)); if (uShineFlip > 0.5) stripe = 1.0 - stripe; vec3 ran = vec3(stripe); vec3 col = cir + glowColor - ran; col += (rand(gl_FragCoord.xy + iTime) - 0.5) * uNoise; fragColor = vec4(col, 1.0); } void main() { vec4 color; mainImage(color, vUv * iResolution.xy); gl_FragColor = color; } ` const { arr: colorArr, count: colorCount } = prepStops(gradientColors) const uniforms: { iResolution: { value: [number, number, number] } iMouse: { value: [number, number] } iTime: { value: number } uRevealProgress: { value: number } uAngle: { value: number } uNoise: { value: number } uBlindCount: { value: number } uSpotlightRadius: { value: number } uSpotlightSoftness: { value: number } uSpotlightOpacity: { value: number } uMirror: { value: number } uDistort: { value: number } uShineFlip: { value: number } uColor0: { value: [number, number, number] } uColor1: { value: [number, number, number] } uColor2: { value: [number, number, number] } uColor3: { value: [number, number, number] } uColor4: { value: [number, number, number] } uColor5: { value: [number, number, number] } uColor6: { value: [number, number, number] } uColor7: { value: [number, number, number] } uColorCount: { value: number } } = { iResolution: { value: [gl.drawingBufferWidth, gl.drawingBufferHeight, 1], }, iMouse: { value: [0, 0] }, iTime: { value: 0 }, uRevealProgress: { value: 1.0 }, uAngle: { value: (angle * Math.PI) / 180 }, uNoise: { value: noise }, uBlindCount: { value: Math.max(1, blindCount) }, uSpotlightRadius: { value: spotlightRadius }, uSpotlightSoftness: { value: spotlightSoftness }, uSpotlightOpacity: { value: spotlightOpacity }, uMirror: { value: mirrorGradient ? 1 : 0 }, uDistort: { value: distortAmount }, uShineFlip: { value: shineDirection === "right" ? 1 : 0 }, uColor0: { value: colorArr[0] }, uColor1: { value: colorArr[1] }, uColor2: { value: colorArr[2] }, uColor3: { value: colorArr[3] }, uColor4: { value: colorArr[4] }, uColor5: { value: colorArr[5] }, uColor6: { value: colorArr[6] }, uColor7: { value: colorArr[7] }, uColorCount: { value: colorCount }, } const program = new Program(gl, { vertex, fragment, uniforms, }) programRef.current = program const geometry = new Triangle(gl) geometryRef.current = geometry const mesh = new Mesh(gl, { geometry, program }) meshRef.current = mesh const resize = () => { const rect = container.getBoundingClientRect() renderer.setSize(rect.width, rect.height) uniforms.iResolution.value = [gl.drawingBufferWidth, gl.drawingBufferHeight, 1] if (blindMinWidth && blindMinWidth > 0) { const maxByMinWidth = Math.max(1, Math.floor(rect.width / blindMinWidth)) const effective = blindCount ? Math.min(blindCount, maxByMinWidth) : maxByMinWidth uniforms.uBlindCount.value = Math.max(1, effective) } else { uniforms.uBlindCount.value = Math.max(1, blindCount) } const cx = gl.drawingBufferWidth / 2 const cy = gl.drawingBufferHeight / 2 uniforms.iMouse.value = [cx, cy] mouseTargetRef.current = [cx, cy] } resize() const ro = new ResizeObserver(resize) ro.observe(container) const loop = (t: number) => { rafRef.current = requestAnimationFrame(loop) uniforms.iTime.value = t * 0.001 lastTimeRef.current = t if (!paused && programRef.current && meshRef.current) { try { renderer.render({ scene: meshRef.current }) } catch (e) { console.error(e) } } } rafRef.current = requestAnimationFrame(loop) return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) ro.disconnect() const callIfFn = (obj: T | null, key: K) => { if (obj && typeof obj[key] === "function") { ;(obj[key] as unknown as () => void).call(obj) } } callIfFn(programRef.current, "remove") callIfFn(geometryRef.current, "remove") callIfFn(meshRef.current as unknown as { remove?: () => void }, "remove") callIfFn(rendererRef.current as unknown as { destroy?: () => void }, "destroy") programRef.current = null geometryRef.current = null meshRef.current = null rendererRef.current = null } }, [ dpr, paused, gradientColors, angle, noise, blindCount, blindMinWidth, mouseDampening, mirrorGradient, spotlightRadius, spotlightSoftness, spotlightOpacity, distortAmount, shineDirection, ]) return (

) } export default GradientBlinds [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import GradientBlinds from "@/components/GradientBlinds" import Navbar from "@/components/Navbar" export default function Home() { return (

{/* Animated Gradient Background */}

{/* Hero Section */}

The Future of Crypto
Trading Starts Here

Access hundreds of digital assets with real-time charts, deep liquidity, and lightning-fast execution.

) } [V0_FILE]typescriptreact:file="components/Navbar.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" export default function Navbar() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [isScrolled, setIsScrolled] = useState(false) const [isWalletConnected, setIsWalletConnected] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleMobileNavClick = (sectionId: string) => { setIsMobileMenuOpen(false) const element = document.getElementById(sectionId) if (element) { const headerOffset = 120 const elementPosition = element.getBoundingClientRect().top + window.pageYOffset const offsetPosition = elementPosition - headerOffset window.scrollTo({ top: offsetPosition, behavior: "smooth", }) } } const handleWalletConnect = () => { setIsWalletConnected(!isWalletConnected) } return ( <> {/* Desktop Header */} {/* Mobile Header */}

{/* Mobile Menu Overlay */} {isMobileMenuOpen && (

)} ) }

The Future of Crypto Trading Starts Here

The Future of Crypto
Trading Starts Here

About

Tags

Share

About

Tags

Share

More from abhi16016

More Templates Like This

About

Tags

Share

About

Tags

Share

More from abhi16016

More Templates Like This