Only Deranged Media Canada https://cdn.tailwindcss.com https://unpkg.com/@phosphor-icons/web body { zoom: 0.75; /* 75% Scale as requested */ background-color: #000; color: #fff; overflow-x: hidden; } .page-section { display: none; animation: fadeIn 0.5s ease-in-out; } .page-section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .stroke-text { -webkit-text-stroke: 1px rgba(255,255,255,0.5); } .slide-bg { transition: opacity 1s ease-in-out; opacity: 0; } .slide-bg.active { opacity: 0.4; } .slide-content { transition: all 0.7s ease-in-out; opacity: 0; transform: translateY(20px); } .slide-content.active { opacity: 1; transform: translateY(0); } .slide-art { transition: all 1s ease-in-out; opacity: 0; transform: translateX(40px) scale(0.95); } .slide-art.active { opacity: 1; transform: translateX(0) scale(1); } #player { transition: transform 0.5s ease-out; transform: translateY(100%); } #player.active { transform: translateY(0); }
ODM
ONLY DERANGED
MEDIA CANADA SURGENCY

Discography

Latest Releases

Studio

Deranged Media Productions

Visual storytelling from the underground up. Our in-house production team specializes in music videos, short films, and digital content that matches the grit of our sound.

Roster

Full profiles coming soon.

Merch Store

Shop coming soon.

About The Agency

Authenticity
Above All.

Only Deranged Media Canada operates at the intersection of music, culture, and visual art. Founded in New Westminster and now headquartered in Vancouver, BC, we are a collective of creators who refuse to compromise.

Under our umbrella sits Surgency Records, our music division dedicated to raw lyricism and experimental soundscapes, and Deranged Media Productions, our visual arm crafting the aesthetics of the underground.

Led by Sebbie Johal, we bridge the gap between the isolation of the artist’s mind and the global stage. We are influenced by the greats, but we answer only to our own vision.

Established

2018

Location

Vancouver, BC

Roster

Selective

ONLY DERANGED

Media Canada

The official hub for underground culture, music production, and artist development in Vancouver, BC.

Divisions

  • Surgency Records
  • Deranged Media Productions
  • ODM Artist Management

Connect

  • Demo Submission
  • Press Inquiries
  • Vancouver HQ

© 2018-2026 Only Deranged Media Canada.

Surgency Records™ Deranged Media Productions™
Art

Title

Artist

// — Data — const SLIDES = [ { id: 4, type: “single”, category: “New Single”, title: “WHERE YA AT?”, artist: “Only Deranged Media”, bgImage: “https://images.unsplash.com/photo-1493225255756-d9584f8606e9?auto=format&fit=crop&q=80&w=1600”, coverArt: “https://images.unsplash.com/photo-1493225255756-d9584f8606e9?auto=format&fit=crop&q=80&w=600”, year: “2026” }, { id: 1, type: “album”, category: “Featured Album”, title: “IMPRESSIONS”, artist: “Sebbie Johal”, bgImage: “https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&q=80&w=1600”, coverArt: “https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?auto=format&fit=crop&q=80&w=600”, year: “2025” }, { id: 3, type: “artist”, category: “Artist Spotlight”, title: “NOMEN”, artist: “The Enigma”, bgImage: “https://images.unsplash.com/photo-1616091216791-a5360b5fc78a?auto=format&fit=crop&q=80&w=1600”, coverArt: “https://images.unsplash.com/photo-1616091216791-a5360b5fc78a?auto=format&fit=crop&q=80&w=600”, year: “2026” } ]; // — Navigation Logic — function navigate(pageId) { // Hide all pages document.querySelectorAll(‘.page-section’).forEach(page => page.classList.remove(‘active’)); // Show target page document.getElementById(`page-${pageId}`).classList.add(‘active’); // Update Nav styling document.querySelectorAll(‘.nav-btn’).forEach(btn => { if(btn.dataset.target === pageId) { btn.classList.replace(‘text-zinc-400’, ‘text-red-500’); } else { btn.classList.replace(‘text-red-500’, ‘text-zinc-400’); } }); // Close mobile menu if open document.getElementById(‘mobile-menu’).classList.add(‘hidden’); window.scrollTo(0,0); } function toggleMobileMenu() { const menu = document.getElementById(‘mobile-menu’); const icon = document.getElementById(‘mobile-menu-icon’); if(menu.classList.contains(‘hidden’)) { menu.classList.remove(‘hidden’); icon.classList.replace(‘ph-list’, ‘ph-x’); } else { menu.classList.add(‘hidden’); icon.classList.replace(‘ph-x’, ‘ph-list’); } } // — Slider Logic — let currentSlide = 0; let slideInterval; function initSlider() { const bgContainer = document.getElementById(‘slider-bg-container’); const dotsContainer = document.getElementById(‘slider-dots’); // Build Backgrounds & Dots SLIDES.forEach((slide, idx) => { bgContainer.innerHTML += `
`; dotsContainer.innerHTML += `
`; }); updateSlideUI(); startSlideInterval(); } function updateSlideUI() { const slide = SLIDES[currentSlide]; // Trigger exit animations document.querySelectorAll(‘.slide-content, .slide-art’).forEach(el => el.classList.remove(‘active’)); setTimeout(() => { // Update text/images document.getElementById(‘slide-category’).innerText = slide.category; document.getElementById(‘slide-title’).innerText = slide.title; document.getElementById(‘slide-artist’).innerText = slide.artist; document.getElementById(‘slide-cover’).src = slide.coverArt; document.getElementById(‘slide-year’).innerText = slide.year; // Trigger entry animations document.querySelectorAll(‘.slide-content, .slide-art’).forEach(el => el.classList.add(‘active’)); }, 300); // Wait for exit animation // Update Backgrounds document.querySelectorAll(‘.slide-bg’).forEach((bg, idx) => { if(idx === currentSlide) bg.classList.add(‘active’); else bg.classList.remove(‘active’); }); // Update Dots document.querySelectorAll(‘#slider-dots div’).forEach((dot, idx) => { if(idx === currentSlide) { dot.className = “h-[2px] transition-all duration-500 w-12 bg-red-500”; } else { dot.className = “h-[2px] transition-all duration-500 w-4 bg-zinc-700″; } }); } function nextSlide() { currentSlide = (currentSlide + 1) % SLIDES.length; updateSlideUI(); resetSlideInterval(); } function prevSlide() { currentSlide = (currentSlide – 1 + SLIDES.length) % SLIDES.length; updateSlideUI(); resetSlideInterval(); } function startSlideInterval() { slideInterval = setInterval(nextSlide, 8000); } function resetSlideInterval() { clearInterval(slideInterval); startSlideInterval(); } function playCurrentSlide() { playTrack(SLIDES[currentSlide].title, SLIDES[currentSlide].artist, SLIDES[currentSlide].coverArt); } // — Release Scroll Logic — function populateReleases() { const container = document.getElementById(‘release-scroll-container’); let html = ”; // Generate HTML for releases based on SLIDES data SLIDES.forEach(slide => { html += `
Cover

${slide.title}

${slide.category} • ${slide.artist}

`; }); container.innerHTML = html; } function scrollReleases(direction) { const container = document.getElementById(‘release-scroll-container’); const amount = direction === ‘left’ ? -320 : 320; container.scrollBy({ left: amount, behavior: ‘smooth’ }); } // — Player Logic — let isPlaying = false; function playTrack(title, artist, image) { document.getElementById(‘player-title’).innerText = title; document.getElementById(‘player-artist’).innerText = artist; document.getElementById(‘player-img’).src = image; document.getElementById(‘player’).classList.add(‘active’); isPlaying = true; updatePlayerIcon(); } function togglePlay() { if(!document.getElementById(‘player’).classList.contains(‘active’)) return; isPlaying = !isPlaying; updatePlayerIcon(); } function updatePlayerIcon() { const icon = document.getElementById(‘player-icon’); if(isPlaying) { icon.classList.replace(‘ph-play’, ‘ph-pause’); icon.classList.remove(‘ml-1’); } else { icon.classList.replace(‘ph-pause’, ‘ph-play’); icon.classList.add(‘ml-1’); } } // — Initialization — document.addEventListener(‘DOMContentLoaded’, () => { initSlider(); populateReleases(); });