// Vibe Den — components (multi-page hash-routed React) const { useState, useEffect, useRef, useCallback } = React; // ---------- shared ---------- const Eyebrow = ({ children, center }) => (
{children} {center &&
}
); const GlitchText = ({ children, className = "", as: Tag = "h2" }) => { const ref = React.useRef(null); const [seen, setSeen] = React.useState(false); React.useEffect(() => { if (!ref.current || seen) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setSeen(true); const el = ref.current; el.classList.remove('glitch-enter'); void el.offsetWidth; el.classList.add('glitch-enter'); io.disconnect(); } }); }, { threshold: 0.3, rootMargin: '0px 0px -10% 0px' }); io.observe(ref.current); return () => io.disconnect(); }, []); return ( {children} ); }; // ---------- routing (hash) ---------- function useRoute() { const get = () => { const h = window.location.hash.replace(/^#/, '') || '/'; return h.startsWith('/') ? h : '/' + h; }; const [route, setRoute] = useState(get()); useEffect(() => { const onHash = () => { setRoute(get()); window.scrollTo(0, 0); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); return route; } // ---------- nav ---------- const Nav = ({ route }) => { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const [megaOpen, setMegaOpen] = useState(false); const [active, setActive] = useState(null); // active mega column index const [trailing, setTrailing] = useState(null); // index of menu showing the cyan leave-trail const closeTimer = useRef(null); const trailTimer = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { setOpen(false); setMegaOpen(false); setActive(null); }, [route]); const columns = [ { label: 'About', href: '#/', items: [ ['Vibe Den', '#/'], ['The Crew', '#/#crew'], ['New Releases','#/#releases'], ['Events', '#/#events'], ['Gallery', '#/#gallery'], ['Testimonials','#/#press'], ['Creator', '#/#creator'], ]}, { label: 'Artists', href: '#/artists', items: [ ['All Artists', '#/artists'], ['NOVA', '#/artists/nova'], ['ZEPHYR', '#/artists/zephyr'], ['PULSE', '#/artists/pulse'], ]}, { label: 'Discography', href: '#/discography', items: [ ['All Releases','#/discography'], ['Albums', '#/discography'], ['EPs', '#/discography'], ['Singles', '#/discography'], ]}, { label: 'Media', href: '#/media', items: [ ['All Media', '#/media'], ['Videos', '#/media'], ['Photos', '#/media'], ]}, { label: 'Connect', href: '#/connect', items: [ ['Contact', '#/connect'], ['Send Message','#/connect'], ]}, { label: 'The Town', href: '#/the-town', items: [ ['Community', '#/the-town'], ['From the Crew','#/the-town'], ]}, ]; const isCurrent = (href) => { const path = href.replace('#/', '/').split('#')[0] || '/'; if (path === '/') return route === '/'; return route === path || route.startsWith(path + '/'); }; const handleEnter = (i) => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } // If we're hovering this same item again, kill any pending trail for it if (trailing === i) { if (trailTimer.current) { clearTimeout(trailTimer.current); trailTimer.current = null; } setTrailing(null); } else if (active !== null && active !== i && active !== trailing) { // The previously-hovered item starts a leave-trail (cyan filled circle fading) if (trailTimer.current) { clearTimeout(trailTimer.current); } setTrailing(active); trailTimer.current = setTimeout(() => { setTrailing(null); trailTimer.current = null; }, 280); } setMegaOpen(true); setActive(i); }; const handleLeave = () => { closeTimer.current = setTimeout(() => { // When leaving the whole nav, the last hovered item also gets a trail if (active !== null) { const last = active; if (trailTimer.current) { clearTimeout(trailTimer.current); } setTrailing(last); trailTimer.current = setTimeout(() => { setTrailing(null); trailTimer.current = null; }, 280); } setMegaOpen(false); setActive(null); }, 120); }; return ( {/* Mobile drawer */}
setOpen(false)} />
{columns.map((c) => (
{c.label} →
    {c.items.map(([label, href]) => (
  • {label}
    • ))}
))}
); }; // ---------- Brand Intro (huge logo + wordmark, first thing on home) ---------- const BrandIntro = () => (
{/* HUGE logo mark — RGB glitch (different rhythm than the wordmark) */} {/* HUGE wordmark — VIBE DEN on a single line */}

VIBE DEN

{/* tagline */}

Where 3D meets beats. Born in the metaverse, crafting sounds for the future.

{/* scroll cue — sexy lines, sci-fi tracking brackets + long thread */}
{/* SCROLL with corner brackets */}
{/* corner brackets */}
SCROLL
{/* tiny meta caption */}
↓ enter the den ↓
{/* long sexy line with diamond + traveling pulse */}
{/* base line — gradient fade */}
{/* traveling pulse */}
{/* diamond at the end */}
); // ---------- HOME ---------- const Hero = () => (
Virtual DJ Crew
Vibe Den

Where 3D meets beats

Experience the future of electronic music with our crew of virtual 3D characters, pushing the boundaries of digital performance.

{[ ['Instagram','https://www.instagram.com/vibeden_official'], ['Facebook','https://www.facebook.com/profile.php?id=61560331666068'], ['Discography','#/discography'], ].map(([l, h]) => ( {l} ))}
Vibe Den crew
LIVE · METAVERSE

2026

World Tour

); const CrewSection = () => (
The Crew Meet our virtual artists

Three unique 3D characters, each bringing their own style and energy to every performance.

{window.CREW.map((m, i) => (
{m.name}
{`0${i+1}`}

{m.role}

{m.name}

{m.genre}

↗
))}

We are Vibe Den — a collective of virtual artists pushing the boundaries of music and digital art. Born in the metaverse, creating sounds for the future.

); const EventsSection = () => (
Upcoming Shows Live Events

Join us in the metaverse or catch a hybrid show. The future of concerts is here.

{window.EVENTS.map(ev => (
{ev.title}
{ev.type}
{ev.soldOut &&
Sold Out
}

{ev.title}

📅 {ev.date}
📍 {ev.location}
))}
); const ReleasesSection = () => { const [selected, setSelected] = useState(null); return (
Latest New Releases

Click any album to listen on your favorite streaming platform.

{window.ALBUMS.slice(0, 6).map(a => (
setSelected(a)} className="group cursor-pointer">
{a.title}
{a.type}

{a.title}

{a.artist} · {a.year}

))}
{selected && setSelected(null)} />}
); }; const StreamingModal = ({ album, onClose }) => (
e.stopPropagation()} className="bg-card border border-border rounded-2xl p-8 max-w-md w-full">
{album.title}

{album.type}

{album.title}

{album.artist} · {album.year}

{[ ['Spotify', '#'], ['Apple Music', '#'], ['YouTube Music', 'https://www.youtube.com/@VIBE_DEN_Official'], ['SoundCloud', '#'], ].map(([s, href]) => ( {s} ↗ ))}
); const HorizontalGallery = () => { const containerRef = useRef(null); const trackRef = useRef(null); const [progress, setProgress] = useState(0); const items = [ { src: 'images/dj-character-1.jpg', label: 'NEON performing' }, { src: 'images/event-1.jpg', label: 'Virtual concert' }, { src: 'images/dj-character-2.jpg', label: 'PULSE in action' }, { src: 'images/event-2.jpg', label: 'Club atmosphere' }, { src: 'images/dj-character-3.jpg', label: 'BASS dropping beats' }, { src: 'images/crew-group.jpg', label: 'Full crew' }, { src: 'images/hero-dj-stage.jpg', label: 'Main stage' }, ]; useEffect(() => { const onScroll = () => { const el = containerRef.current; const track = trackRef.current; if (!el || !track) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight; const total = el.offsetHeight - vh; const scrolled = Math.min(Math.max(-rect.top, 0), total); const p = total > 0 ? scrolled / total : 0; setProgress(p); const trackWidth = track.scrollWidth - window.innerWidth + 96; track.style.transform = `translate3d(${-p * trackWidth}px, 0, 0)`; }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); return ( ); }; const Editorial = () => (
{window.STATS.map((s, i) => (

{s.value}

{s.label}

))}
); const MerchSection = () => { const items = [ { name: 'Vibe Den Hoodie', desc: 'Neon logo embroidered', price: '$89', tag: 'Bestseller', img: 'images/dj-character-1.jpg' }, { name: 'Crew Tee', desc: 'Limited edition print', price: '$45', tag: null, img: 'images/dj-character-2.jpg' }, { name: 'Neon Cap', desc: 'Glow-in-the-dark logo', price: '$35', tag: 'New', img: 'images/dj-character-3.jpg' }, { name: 'VR Poster Pack', desc: 'Set of 3 AR posters', price: '$25', tag: null, img: 'images/crew-group.jpg' }, ]; return (
Official Merch Rep the Crew
View all products →
{items.map((it) => (
{it.name} {it.tag && ( {it.tag} )}

{it.name}

{it.desc}

{it.price}
))}
); }; const MusicVideoSection = () => (
Watch Now Latest Music Video

"Neon Dreams" — Official 4K virtual concert capture. NOVA × PULSE, dropped 2024.

Music video thumbnail
04:21 · OFFICIAL VIDEO

Neon Dreams (Live from the Metaverse)

4K · HDR
); const BornInMetaverse = () => (
Vibe Den Crew
EST · 2023
The Story Born in the Metaverse

Vibe Den started as an experiment in virtual artistry. Today, we're a movement — three digital souls connected by a love for electronic music and the endless possibilities of the virtual world.

{[['2023', 'Founded'], ['3', 'Artists'], ['∞', 'Possibilities']].map(([v, l]) => (

{v}

{l}

))}
); const CreatorSection = () => (
The Creator One vision,
endless possibilities

Vibe Den is a solo creative project where 3D characters, original music, and visual experiences come together. From modeling and animation to production and direction, every element is crafted by a single creator with a passion for blending art and technology.

    {['3D Modeling & Animation', 'Music Production', 'Visual Direction', 'Creative Development'].map((d, i) => (
  • {d}
    • ))}
Follow: {[ ['Instagram', 'https://www.instagram.com/vibeden_official'], ['YouTube', 'https://www.youtube.com/@VIBE_DEN_Official'], ['Twitter', '#'], ].map(([s, href]) => ( {s} ))}
Creator { e.currentTarget.src = 'images/dj-character-1.jpg'; }} />
); const Press = () => { const [idx, setIdx] = useState(0); useEffect(() => { const t = setInterval(() => setIdx(p => (p + 1) % window.PRESS.length), 5000); return () => clearInterval(t); }, []); return (
Press
{window.PRESS.map((q, i) => (
"{q.text}"

{q.author}

{q.role}

))}
{window.PRESS.map((_, i) => (
); }; // ---------- ARTISTS LIST ---------- const ArtistsPage = () => (
); // ---------- ARTIST DETAIL ---------- const ArtistDetail = ({ slug }) => { const m = window.CREW.find(c => c.slug === slug); if (!m) return
Not found
; const albums = window.ALBUMS.filter(a => m.discog.some(d => a.coverUrl.includes(d))); return (
← Back to Crew
{m.name}

{m.role}

{m.name}

{m.bio}

{[['Tracks', m.stats.tracks], ['Releases', m.stats.releases], ['Events', m.stats.events]].map(([l, v]) => (

{v}

{l}

))}

Discography

{albums.map(a => (
{a.title}

{a.title}

{a.year}

 ))}
); }; // ---------- DISCOGRAPHY ---------- const DiscographyPage = () => { const [filter, setFilter] = useState('All'); const filters = ['All', 'Albums', 'EPs', 'Singles']; const matched = window.ALBUMS.filter(a => filter === 'All' || a.type + 's' === filter || a.type === filter.slice(0, -1)); const byYear = matched.reduce((acc, a) => { (acc[a.year] = acc[a.year] || []).push(a); return acc; }, {}); const years = Object.keys(byYear).sort((a, b) => b.localeCompare(a)); return (
Music Discography
{filters.map(f => ( ))}
{years.map(y => (

{y}

{byYear[y].length} releases
{byYear[y].map(a => (
{a.title}
{a.type}

{a.title}

{a.artist}

))}
))}
); }; // ---------- MEDIA ---------- const MediaPage = () => { const [filter, setFilter] = useState('All'); const filters = ['All', 'Photos', 'Videos']; const items = window.MEDIA.filter(m => filter === 'All' || m.kind === filter.slice(0, -1)); return (
Gallery Media
{filters.map(f => ( ))}
{items.map((item, i) => (
{item.title}
{item.kind}
{item.kind === 'Video' && (
)}

{item.title}

))}
); }; // ---------- CONNECT ---------- const ConnectPage = () => (
Get In Touch Connect

For bookings, press, collaborations, and general inquiries. We'd love to hear from you.

{[ { label: 'Booking', email: 'booking@vibeden.io', desc: 'Live shows, festivals, club nights' }, { label: 'Press', email: 'press@vibeden.io', desc: 'Interviews, features, press kit' }, { label: 'Collaboration', email: 'collab@vibeden.io', desc: 'Producers, vocalists, visuals' }, { label: 'Management', email: 'mgmt@vibeden.io', desc: 'Business & partnership inquiries' }, ].map(c => (

{c.label}

{c.email}

{c.desc}

))}

Send a message

We'll get back to you within 48 hours.