[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "Digital Liminal Museum", description: "An immersive digital art experience", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-start-rgb)); cursor: none; overflow: hidden; margin: 0; padding: 0; font-family: monospace; } .glitch-active { animation: glitch 150ms infinite; } @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } } @layer utilities { .text-balance { text-wrap: balance; } } [V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" export default function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) } return (

DLMuseum {/* Desktop Navigation */} {/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

setIsMenuOpen(false)} />

)}

) } function NavLinks({ mobile = false, onClick }: { mobile?: boolean; onClick?: () => void }) { const linkClass = mobile ? "block py-2 text-lg text-white hover:text-cyan-400 transition-colors" : "text-white hover:text-cyan-400 transition-colors" return ( <> Gallery Exhibitions Artists About Visit ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import type React from "react" import Link from "next/link" import { Facebook, Instagram, Twitter, Youtube } from "lucide-react" export default function Footer() { return ( ) } function SocialLink({ href, icon, label }: { href: string; icon: React.ReactNode; label: string }) { return ( {icon} ) } function FooterLink({ href, children }: { href: string; children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/gallery/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Filter, Search, ChevronDown, ExternalLink } from "lucide-react" export default function GalleryPage() { return (

{/* Gallery Header */}

Digital Art Gallery

Explore our curated collection of digital artworks from renowned and emerging artists

{/* Gallery Filters */}

{/* Gallery Grid */}

{galleryArtworks.map((artwork, index) => ( ))}

) } function FilterButton({ label }: { label: string }) { return ( ) } function GalleryItem({ artwork }: { artwork: GalleryArtwork }) { return (

{artwork.title}

{artwork.artist}

{artwork.category}

) } interface GalleryArtwork { id: string title: string artist: string category: string imageUrl: string } const galleryArtworks: GalleryArtwork[] = [ { id: "digital-dreams", title: "Digital Dreams", artist: "Elena Vortex", category: "3D Art", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "neon-nostalgia", title: "Neon Nostalgia", artist: "Retro Futurist", category: "Pixel Art", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "virtual-reality", title: "Virtual Reality Landscape", artist: "Digital Nomad", category: "VR Art", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "cyber-dreams", title: "Cyber Dreams", artist: "Neon Wave", category: "Generative", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "digital-dystopia", title: "Digital Dystopia", artist: "Future Shock", category: "Concept Art", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "glitch-garden", title: "Glitch Garden", artist: "Data Corruptor", category: "Glitch Art", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "vaporwave-sunset", title: "Vaporwave Sunset", artist: "Aesthetic Dreams", category: "Vaporwave", imageUrl: "/placeholder.svg?height=500&width=500", }, { id: "fractal-forest", title: "Fractal Forest", artist: "Recursive Mind", category: "Fractal Art", imageUrl: "/placeholder.svg?height=500&width=500", }, ] [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import GlitchText from "@/components/glitch-text" import NoiseFilter from "@/components/noise-filter" import ParticleField from "@/components/particle-field" export default function AboutPage() { const router = useRouter() const [scrollPosition, setScrollPosition] = useState(0) useEffect(() => { const handleScroll = () => { setScrollPosition(window.scrollY) } window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("scroll", handleScroll) } }, []) return (

This is not a website. This is an experience.

The Digital Liminal Museum exists in the space between virtual and physical, between code and art, between concept and execution. It is an exploration of what happens when we break free from traditional web design constraints.

Each "exhibit" is a unique visual experience generated through code. The museum evolves, glitches, and transforms with each viewing, ensuring no two visits are exactly the same.

We invite you to explore the boundaries of digital art in this liminal space.

Behind the Experience

The Digital Liminal Museum uses a combination of generative art techniques:

Procedurally generated visuals using mathematics and randomization
Canvas-based animations and particle systems
Glitch aesthetics that mimic VHS artifacts and digital corruption
Interactive elements that respond to user input
Experimental navigation that challenges conventional web interfaces

Technical Stack

This experience is built using:

Next.js for the application framework
Canvas API for generative artwork
Custom animation algorithms
Procedural color generation
CSS and JavaScript effects

The Digital Liminal Museum is an ongoing exploration. New exhibits are continuously being developed and added.

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/glitch-text.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" interface GlitchTextProps { text: string className?: string intensity?: number // 1-5, higher = more intense glitching } export default function GlitchText({ text, className = "", intensity = 3 }: GlitchTextProps) { const [displayText, setDisplayText] = useState(text) const [isGlitching, setIsGlitching] = useState(false) useEffect(() => { // Initial slight delay before starting glitch effect const initialDelay = setTimeout(() => { startGlitchEffect() }, 2000) return () => clearTimeout(initialDelay) }, []) const startGlitchEffect = () => { const glitchInterval = setInterval(() => { // Randomly decide if we should glitch now if (Math.random() < 0.1 * intensity) { glitchText() } }, 200) return () => clearInterval(glitchInterval) } const glitchText = () => { setIsGlitching(true) // Number of glitch frames based on intensity const glitchFrames = Math.floor(Math.random() * intensity * 3) + 2 let frameCount = 0 // Create glitch animation with multiple frames const glitchAnimation = setInterval(() => { if (frameCount < glitchFrames) { // Generate glitched version of text let glitchedText = "" for (let i = 0; i < text.length; i++) { // Higher chance to glitch characters with higher intensity if (Math.random() < 0.2 * intensity) { // Possible glitch characters const glitchChars = "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ!@#$%^&*()_+-=[]{}|;:,.<>?/\\'\"`~" glitchedText += glitchChars.charAt(Math.floor(Math.random() * glitchChars.length)) } else { glitchedText += text[i] } } setDisplayText(glitchedText) frameCount++ } else { // Reset to original text after glitch animation setDisplayText(text) setIsGlitching(false) clearInterval(glitchAnimation) } }, 50) } return ( {displayText} ) } [V0_FILE]typescriptreact:file="components/noise-filter.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface NoiseFilterProps { intensity?: number // 0-1 } export default function NoiseFilter({ intensity = 0.1 }: NoiseFilterProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas to full screen const resize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } window.addEventListener("resize", resize) resize() // Animation frame let animationId: number // Render noise const render = () => { // Create ImageData const imageData = ctx.createImageData(canvas.width, canvas.height) const data = imageData.data // Generate noise for (let i = 0; i < data.length; i += 4) { // Random value between 0 and 255 const value = Math.floor(Math.random() * 256 * intensity) // Set RGB to same value for gray noise data[i] = value // R data[i + 1] = value // G data[i + 2] = value // B data[i + 3] = 50 // Alpha (semi-transparent) } // Put the image data back onto the canvas ctx.putImageData(imageData, 0, 0) // Schedule next frame animationId = requestAnimationFrame(render) } render() // Cleanup return () => { cancelAnimationFrame(animationId) window.removeEventListener("resize", resize) } }, [intensity]) return (

About

Tags

Share

About

Tags

Share

More from achen2089

More Templates Like This

About

Tags

Share

About

Tags

Share

More from achen2089

More Templates Like This