Stories of Joy

// Desktop setup const mediaMessages = { "#mediabox1": "Commenting on the project, Fiilin told Cineuropa: “In Joy Eternal, we show a character struggling with her self-worth, mistakenly thinking it is tied to her achievements and failures. She continuously sacrifices herself to prove herself worthy, but in the end, by recognising her self-worth, she can save herself and those she loves.”", "#mediabox2": "This visually rich and imaginative animated series explores themes of loss, grief, environmental crisis, and the power of never giving up.", "#mediabox3": "Juha: Joy Eternal was initially inspired by works like Dante’s Inferno and Hellboy, drawing on darker literary traditions. However, the series gradually evolved into a more unique vision of the afterlife, where a monstrous entity roams the void, capturing souls and transporting them to the City of Lost Souls. This blend of supernatural adventure, mystery, and comedy also includes elements of fantasy and sci-fi.", "#mediabox4": "“We are seeking early conversations with theatrical distributors, festival programmers and strategic sales agents passionate about adult animation and psychologically intense genre films. We believe Echo Chamber stands out by offering a high-concept, emotionally resonant story with visual ambition tailored for the growing young-adult anime and dark genre markets,” Fiilin tells Cineuropa.", "#mediabox5": "However, darker tones and a bit of dry humour might be just what the buyers want, hopes Juha Fiilin from Fiilin Good Films, developing a psychological horror set in the Nordics, and anime influenced. “There’s a feature film and video game in early development, too. It’s certainly more indie, and a different voice. We are thinking about producing it with a game engine software and making it a pan-European co-production.”" }; const overlayIds = { "#mediabox1": "#overlay1", "#mediabox2": "#overlay2", "#mediabox3": "#overlay3", "#mediabox4": "#overlay4", "#mediabox5": "#overlay5", }; let activeMediaId = "#mediabox1"; // Mobile setup const mobileMessages = { "#overlayMobile1": mediaMessages["#mediabox1"], "#overlayMobile2": mediaMessages["#mediabox2"], "#overlayMobile3": mediaMessages["#mediabox3"], "#overlayMobile4": mediaMessages["#mediabox4"], "#overlayMobile5": mediaMessages["#mediabox5"], }; $w.onReady(() => { // --- DESKTOP --- if ($w("#overlay1").rendered !== undefined) { setActiveMediaDesktop(activeMediaId); Object.entries(overlayIds).forEach(([mediaId, overlayId]) => { $w(overlayId).onMouseIn(() => { if (mediaId !== activeMediaId) { setActiveMediaDesktop(mediaId); } }); }); } // --- MOBILE --- if ($w("#overlayMobile1").rendered !== undefined) { // Set initial mobile text and dimming to first overlay's message setActiveMediaMobile("#overlayMobile1"); Object.keys(mobileMessages).forEach(overlayId => { $w(overlayId).onClick(() => { setActiveMediaMobile(overlayId); }); }); } }); // Desktop helper function function setActiveMediaDesktop(newActiveId) { Object.keys(mediaMessages).forEach(id => { $w(overlayIds[id]).show(); // Show all overlays (dim all) }); $w(overlayIds[newActiveId]).hide(); // Hide overlay on active media (undim) $w("#mediatext").text = mediaMessages[newActiveId]; activeMediaId = newActiveId; } // Mobile helper function function setActiveMediaMobile(newActiveId) { // Show all overlays (dim all) Object.keys(mobileMessages).forEach(id => { $w(id).show(); }); // Hide the active overlay (undim it) $w(newActiveId).hide(); // Update the mobile text box $w("#mediatextMobile").text = mobileMessages[newActiveId]; }