[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import InfiniteGallery from '@/components/InfiniteGallery'; export default function Home() { const sampleImages = [ { src: '/1.webp', alt: 'Image 1' }, { src: '/2.webp', alt: 'Image 2' }, { src: '/3.webp', alt: 'Image 3' }, { src: '/4.webp', alt: 'Image 4' }, { src: '/5.webp', alt: 'Image 5' }, { src: '/6.webp', alt: 'Image 6' }, { src: '/7.webp', alt: 'Image 7' }, { src: '/8.webp', alt: 'Image 8' }, ]; return (

I create; therefore I am

Use mouse wheel, arrow keys, or touch to navigate

Auto-play resumes after 3 seconds of inactivity

); } [V0_FILE]json:file="package.json" isMerged="true" { "name": "infinite-gallery-v0", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build --turbopack", "start": "next start" }, "dependencies": { "@react-three/drei": "^9.114.0", "@react-three/fiber": "^9.0.0", "@react-three/postprocessing": "^3.0.4", "next": "15.5.3", "react": "19.1.0", "react-dom": "19.1.0", "three": "^0.171.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.544.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "@tailwindcss/postcss": "^4", "tailwindcss": "^4", "postcss": "8.5.6" } } [V0_FILE]plaintext:file="public/8.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8-qqbYhuiLntJrbWVXp2KVRuyfQCdJ78.webp" isMerged="true" [V0_FILE]plaintext:file="public/7.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-Hfd0omnFSE1FXfLaK7Znv838dQWNke.webp" isMerged="true" [V0_FILE]plaintext:file="public/6.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6-eLf5PHoVywNElQQaGvdrRFnxKMnc1f.webp" isMerged="true" [V0_FILE]plaintext:file="public/5.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5-uCoetbft1EzlxjzDBY7AVgb2Mk6y4g.webp" isMerged="true" [V0_FILE]plaintext:file="public/4.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4-1kiiVmgKLgNoQjPdgIMvN1pDPxeoOj.webp" isMerged="true" [V0_FILE]plaintext:file="public/3.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3-kw7Z8s0ETYOQu5g63w1zqTefT6d5Vf.webp" isMerged="true" [V0_FILE]plaintext:file="public/2.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-uj2Fvq3DpWH7LtGcK6WkaU7H6WX4S8.webp" isMerged="true" [V0_FILE]plaintext:file="public/1.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-w2tftoVl3cV3Z5Qubu2qeaYYKi4pwj.webp" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next'; import { Geist_Mono, Instrument_Serif } from 'next/font/google'; import "./globals.css" const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'], }); const instrumentSerif = Instrument_Serif({ variable: '--font-instrument', subsets: ['latin'], weight: '400', style: ['italic', 'normal'], }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import 'tailwindcss'; :root { --background: #ffffff; --foreground: #171717; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --font-serif: var(--font-instrument); } @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } [V0_FILE]typescriptreact:file="components/InfiniteGallery.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useRef, useMemo, useCallback, useState, useEffect } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { useTexture } from "@react-three/drei" import * as THREE from "three" type ImageItem = string | { src: string; alt?: string } interface FadeSettings { /** Fade in range as percentage of depth range (0-1) */ fadeIn: { start: number end: number } /** Fade out range as percentage of depth range (0-1) */ fadeOut: { start: number end: number } } interface BlurSettings { /** Blur in range as percentage of depth range (0-1) */ blurIn: { start: number end: number } /** Blur out range as percentage of depth range (0-1) */ blurOut: { start: number end: number } /** Maximum blur amount (0-10, higher values = more blur) */ maxBlur: number } interface InfiniteGalleryProps { images: ImageItem[] /** Speed multiplier applied to scroll delta (default: 1) */ speed?: number /** Spacing between images along Z in world units (default: 2.5) */ zSpacing?: number /** Number of visible planes (default: clamp to images.length, min 8) */ visibleCount?: number /** Near/far distances for opacity/blur easing (default: { near: 0.5, far: 12 }) */ falloff?: { near: number; far: number } /** Fade in/out settings with ranges based on depth range percentage (default: { fadeIn: { start: 0.05, end: 0.15 }, fadeOut: { start: 0.85, end: 0.95 } }) */ fadeSettings?: FadeSettings /** Blur in/out settings with ranges based on depth range percentage (default: { blurIn: { start: 0.0, end: 0.1 }, blurOut: { start: 0.9, end: 1.0 }, maxBlur: 3.0 }) */ blurSettings?: BlurSettings /** Optional className for outer container */ className?: string /** Optional style for outer container */ style?: React.CSSProperties /** Camera position as a tuple [x, y, z] (default: [5, 5, 5]) */ cameraPosition?: [number, number, number] /** Camera field of view (default: 65) */ cameraFov?: number } interface PlaneData { index: number z: number imageIndex: number x: number y: number // Added y property for vertical positioning } const DEFAULT_DEPTH_RANGE = 30 const MAX_HORIZONTAL_OFFSET = 8 const MAX_VERTICAL_OFFSET = 8 // Custom shader material for blur, opacity, and cloth folding effects const createClothMaterial = () => { return new THREE.ShaderMaterial({ transparent: true, uniforms: { map: { value: null }, opacity: { value: 1.0 }, blurAmount: { value: 0.0 }, scrollForce: { value: 0.0 }, time: { value: 0.0 }, isHovered: { value: 0.0 }, }, vertexShader: ` uniform float scrollForce; uniform float time; uniform float isHovered; varying vec2 vUv; varying vec3 vNormal; void main() { vUv = uv; vNormal = normal; vec3 pos = position; // Create smooth curving based on scroll force float curveIntensity = scrollForce * 0.3; // Base curve across the plane based on distance from center float distanceFromCenter = length(pos.xy); float curve = distanceFromCenter * distanceFromCenter * curveIntensity; // Add gentle cloth-like ripples float ripple1 = sin(pos.x * 2.0 + scrollForce * 3.0) * 0.02; float ripple2 = sin(pos.y * 2.5 + scrollForce * 2.0) * 0.015; float clothEffect = (ripple1 + ripple2) * abs(curveIntensity) * 2.0; // Flag waving effect when hovered float flagWave = 0.0; if (isHovered > 0.5) { // Create flag-like wave from left to right float wavePhase = pos.x * 3.0 + time * 8.0; float waveAmplitude = sin(wavePhase) * 0.1; // Damping effect - stronger wave on the right side (free edge) float dampening = smoothstep(-0.5, 0.5, pos.x); flagWave = waveAmplitude * dampening; // Add secondary smaller waves for more realistic flag motion float secondaryWave = sin(pos.x * 5.0 + time * 12.0) * 0.03 * dampening; flagWave += secondaryWave; } // Apply Z displacement for curving effect (inverted) with cloth ripples and flag wave pos.z -= (curve + clothEffect + flagWave); gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `, fragmentShader: ` uniform sampler2D map; uniform float opacity; uniform float blurAmount; uniform float scrollForce; varying vec2 vUv; varying vec3 vNormal; void main() { vec4 color = texture2D(map, vUv); // Simple blur approximation if (blurAmount > 0.0) { vec2 texelSize = 1.0 / vec2(textureSize(map, 0)); vec4 blurred = vec4(0.0); float total = 0.0; for (float x = -2.0; x <= 2.0; x += 1.0) { for (float y = -2.0; y <= 2.0; y += 1.0) { vec2 offset = vec2(x, y) * texelSize * blurAmount; float weight = 1.0 / (1.0 + length(vec2(x, y))); blurred += texture2D(map, vUv + offset) * weight; total += weight; } } color = blurred / total; } // Add subtle lighting effect based on curving float curveHighlight = abs(scrollForce) * 0.05; color.rgb += vec3(curveHighlight * 0.1); gl_FragColor = vec4(color.rgb, color.a * opacity); } `, }) } function ImagePlane({ texture, position, scale, material, }: { texture: THREE.Texture position: [number, number, number] scale: [number, number, number] material: THREE.ShaderMaterial }) { const meshRef = useRef(null) const [isHovered, setIsHovered] = useState(false) useEffect(() => { if (material && texture) { material.uniforms.map.value = texture } }, [material, texture]) useEffect(() => { if (material && material.uniforms) { material.uniforms.isHovered.value = isHovered ? 1.0 : 0.0 } }, [material, isHovered]) return ( setIsHovered(true)} onPointerLeave={() => setIsHovered(false)} > ) } function GalleryScene({ images, speed = 1, visibleCount = 8, fadeSettings = { fadeIn: { start: 0.05, end: 0.15 }, fadeOut: { start: 0.85, end: 0.95 }, }, blurSettings = { blurIn: { start: 0.0, end: 0.1 }, blurOut: { start: 0.9, end: 1.0 }, maxBlur: 3.0, }, }: Omit) { const [scrollVelocity, setScrollVelocity] = useState(0) const [autoPlay, setAutoPlay] = useState(true) const lastInteraction = useRef(Date.now()) // Normalize images to objects const normalizedImages = useMemo( () => images.map((img) => (typeof img === "string" ? { src: img, alt: "" } : img)), [images], ) // Load textures const textures = useTexture(normalizedImages.map((img) => img.src)) // Create materials pool const materials = useMemo(() => Array.from({ length: visibleCount }, () => createClothMaterial()), [visibleCount]) const spatialPositions = useMemo(() => { const positions: { x: number; y: number }[] = [] const maxHorizontalOffset = MAX_HORIZONTAL_OFFSET const maxVerticalOffset = MAX_VERTICAL_OFFSET for (let i = 0; i < visibleCount; i++) { const x = 0 const y = 0 positions.push({ x, y }) } return positions }, [visibleCount]) const totalImages = normalizedImages.length const depthRange = DEFAULT_DEPTH_RANGE // Initialize plane data const planesData = useRef( Array.from({ length: visibleCount }, (_, i) => ({ index: i, z: visibleCount > 0 ? ((depthRange / visibleCount) * i) % depthRange : 0, imageIndex: totalImages > 0 ? i % totalImages : 0, x: spatialPositions[i]?.x ?? 0, // Use spatial positions for x y: spatialPositions[i]?.y ?? 0, // Use spatial positions for y })), ) useEffect(() => { planesData.current = Array.from({ length: visibleCount }, (_, i) => ({ index: i, z: visibleCount > 0 ? ((depthRange / Math.max(visibleCount, 1)) * i) % depthRange : 0, imageIndex: totalImages > 0 ? i % totalImages : 0, x: spatialPositions[i]?.x ?? 0, y: spatialPositions[i]?.y ?? 0, })) }, [depthRange, spatialPositions, totalImages, visibleCount]) // Handle scroll input const handleWheel = useCallback( (event: WheelEvent) => { event.preventDefault() setScrollVelocity((prev) => prev + event.deltaY * 0.01 * speed) setAutoPlay(false) lastInteraction.current = Date.now() }, [speed], ) // Handle keyboard input const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (event.key === "ArrowUp" || event.key === "ArrowLeft") { setScrollVelocity((prev) => prev - 2 * speed) setAutoPlay(false) lastInteraction.current = Date.now() } else if (event.key === "ArrowDown" || event.key === "ArrowRight") { setScrollVelocity((prev) => prev + 2 * speed) setAutoPlay(false) lastInteraction.current = Date.now() } }, [speed], ) useEffect(() => { const canvas = document.querySelector("canvas") if (canvas) { canvas.addEventListener("wheel", handleWheel, { passive: false }) document.addEventListener("keydown", handleKeyDown) return () => { canvas.removeEventListener("wheel", handleWheel) document.removeEventListener("keydown", handleKeyDown) } } }, [handleWheel, handleKeyDown]) // Auto-play logic useEffect(() => { const interval = setInterval(() => { if (Date.now() - lastInteraction.current > 3000) { setAutoPlay(true) } }, 1000) return () => clearInterval(interval) }, []) useFrame((state, delta) => { // Apply auto-play if (autoPlay) { setScrollVelocity((prev) => prev + 0.3 * delta) } // Damping setScrollVelocity((prev) => prev * 0.95) // Update time uniform for all materials const time = state.clock.getElapsedTime() materials.forEach((material) => { if (material && material.uniforms) { material.uniforms.time.value = time material.uniforms.scrollForce.value = scrollVelocity } }) // Update plane positions const imageAdvance = totalImages > 0 ? visibleCount % totalImages || totalImages : 0 const totalRange = depthRange const halfRange = totalRange / 2 planesData.current.forEach((plane, i) => { let newZ = plane.z + scrollVelocity * delta * 10 let wrapsForward = 0 let wrapsBackward = 0 if (newZ >= totalRange) { wrapsForward = Math.floor(newZ / totalRange) newZ -= totalRange * wrapsForward } else if (newZ < 0) { wrapsBackward = Math.ceil(-newZ / totalRange) newZ += totalRange * wrapsBackward } if (wrapsForward > 0 && imageAdvance > 0 && totalImages > 0) { plane.imageIndex = (plane.imageIndex + wrapsForward * imageAdvance) % totalImages } if (wrapsBackward > 0 && imageAdvance > 0 && totalImages > 0) { const step = plane.imageIndex - wrapsBackward * imageAdvance plane.imageIndex = ((step % totalImages) + totalImages) % totalImages } plane.z = ((newZ % totalRange) + totalRange) % totalRange plane.x = spatialPositions[i]?.x ?? 0 plane.y = spatialPositions[i]?.y ?? 0 const worldZ = plane.z - halfRange // Calculate opacity based on fade settings const normalizedPosition = plane.z / totalRange // 0 to 1 let opacity = 1 if (normalizedPosition >= fadeSettings.fadeIn.start && normalizedPosition <= fadeSettings.fadeIn.end) { // Fade in: opacity goes from 0 to 1 within the fade in range const fadeInProgress = (normalizedPosition - fadeSettings.fadeIn.start) / (fadeSettings.fadeIn.end - fadeSettings.fadeIn.start) opacity = fadeInProgress } else if (normalizedPosition < fadeSettings.fadeIn.start) { // Before fade in starts: fully transparent opacity = 0 } else if (normalizedPosition >= fadeSettings.fadeOut.start && normalizedPosition <= fadeSettings.fadeOut.end) { // Fade out: opacity goes from 1 to 0 within the fade out range const fadeOutProgress = (normalizedPosition - fadeSettings.fadeOut.start) / (fadeSettings.fadeOut.end - fadeSettings.fadeOut.start) opacity = 1 - fadeOutProgress } else if (normalizedPosition > fadeSettings.fadeOut.end) { // After fade out ends: fully transparent opacity = 0 } // Clamp opacity between 0 and 1 opacity = Math.max(0, Math.min(1, opacity)) // Calculate blur based on blur settings let blur = 0 if (normalizedPosition >= blurSettings.blurIn.start && normalizedPosition <= blurSettings.blurIn.end) { // Blur in: blur goes from maxBlur to 0 within the blur in range const blurInProgress = (normalizedPosition - blurSettings.blurIn.start) / (blurSettings.blurIn.end - blurSettings.blurIn.start) blur = blurSettings.maxBlur * (1 - blurInProgress) } else if (normalizedPosition < blurSettings.blurIn.start) { // Before blur in starts: full blur blur = blurSettings.maxBlur } else if (normalizedPosition >= blurSettings.blurOut.start && normalizedPosition <= blurSettings.blurOut.end) { // Blur out: blur goes from 0 to maxBlur within the blur out range const blurOutProgress = (normalizedPosition - blurSettings.blurOut.start) / (blurSettings.blurOut.end - blurSettings.blurOut.start) blur = blurSettings.maxBlur * blurOutProgress } else if (normalizedPosition > blurSettings.blurOut.end) { // After blur out ends: full blur blur = blurSettings.maxBlur } // Clamp blur to reasonable values blur = Math.max(0, Math.min(blurSettings.maxBlur, blur)) // Update material uniforms const material = materials[i] if (material && material.uniforms) { material.uniforms.opacity.value = opacity material.uniforms.blurAmount.value = blur } }) }) if (normalizedImages.length === 0) return null return ( <> {planesData.current.map((plane, i) => { const texture = textures[plane.imageIndex] const material = materials[i] if (!texture || !material) return null const worldZ = plane.z - depthRange / 2 // Calculate scale to maintain aspect ratio const aspect = texture.image ? texture.image.width / texture.image.height : 1 const scale: [number, number, number] = aspect > 1 ? [2 * aspect, 2, 1] : [2, 2 / aspect, 1] return ( ) })} ) } // Fallback component for when WebGL is not available function FallbackGallery({ images }: { images: ImageItem[] }) { const normalizedImages = useMemo( () => images.map((img) => (typeof img === "string" ? { src: img, alt: "" } : img)), [images], ) return (

WebGL not supported. Showing image list:

{normalizedImages.map((img, i) => ( {img.alt}

))}

) } export default function InfiniteGallery({ images, className = "h-96 w-full", style, fadeSettings = { fadeIn: { start: 0.05, end: 0.25 }, fadeOut: { start: 0.9, end: 1 }, }, blurSettings = { blurIn: { start: 0.0, end: 0.1 }, blurOut: { start: 0.7, end: 0.8 }, maxBlur: 8.0, }, cameraPosition = [2, 4, 5], cameraFov = 48, }: InfiniteGalleryProps) { const [webglSupported, setWebglSupported] = useState(true) useEffect(() => { // Check WebGL support try { const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") if (!gl) { setWebglSupported(false) } } catch (e) { setWebglSupported(false) } }, []) if (!webglSupported) { return (

) } return (

) }

About

Tags

Share

About

Tags

Share

More from joelbqz

More Templates Like This

About

Tags

Share

About

Tags

Share

More from joelbqz

More Templates Like This