JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div class="anfang"> <i>''Du schwebst in einem endlosen, weißen Raum. Keine Wände. Keine Orientierung. Nur Leere.''</i> </div> [[→ ein Flüstern tiefer…]]
"Vor einer langen Zeit... also eigentlich nie... aber gleichzeitig gerade jetzt..." [[→ du lauschst weiter…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang1.mp3" type="audio/mp3"> </audio>
"Also rein gar nicht und nirgendwo..." [[→ noch eine Silbe…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang2.mp3" type="audio/mp3"> </audio>
"Wann frägst du? Niemals!" [[→ es hallt nach…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang3.mp3" type="audio/mp3"> </audio>
"Macht Sinn, oder?!" [[→ zwei Fragen erscheinen…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang4.mp3" type="audio/mp3"> </audio>
<style> .choice { font-weight: bold; color: #444; text-shadow: 0 0 5px #ccc; margin-top: 1em; font-style: italic; } .choice:hover { color: black; text-shadow: 0 0 10px #999; } </style> <p>Zwei schimmernde Fragen erscheinen vor dir:</p> <ul> <li class="choice">[[Was ist für dich Nichts?]]</li> <li class="choice">[[Was ist für dich Jetzt?]]</li> </ul>
''Du versuchst zu definieren, was 'Nichts' ist. Doch je mehr du darüber nachdenkst, desto mehr entgleitet es dir.'' [[→ etwas beginnt sich zu verändern…]]
''Was ist das Jetzt? Ein Moment zwischen zwei Vergangenheiten. Oder alles, was je war?'' [[→ etwas beginnt sich zu verändern…]]
<style> body { background-color: white !important; color: black; animation: wobble 5s ease-in-out infinite; } @keyframes wobble { 0% { background-color: white; } 50% { background-color: #f7f7f7; } 100% { background-color: white; } } </style> "Wie gesagt, es ist nie passiert..." "Nichts war niemals, nirgendwo..." "Hier ist kein 'wo' und kein 'wann'..." "Und darum ist es überall..." [[→ es weitet sich aus…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang6.mp3" type="audio/mp3"> </audio>
"Es ist so sehr über<strong>all</strong>, dass es kein <s>über</s> mehr benötigt." [[→ ein letzter Puls…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang7.mp3" type="audio/mp3"> </audio>
<style> /* Grundlayout */ body { margin: 0; padding: 0; background-color: black !important; /* Endzustand */ color: white; font-family: Georgia, serif; overflow: hidden; } /* Weiß zu Schwarz Übergangscontainer */ #fade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: white; animation: fadeToBlack 5s ease-in forwards; z-index: 1; } /* Textcontainer erscheint erst leicht verzögert */ #text { position: relative; padding: 2em; opacity: 0; animation: showText 5s ease-in forwards; animation-delay: 3s; z-index: 2; } /* Animation: Weiß → Schwarz */ @keyframes fadeToBlack { from { background-color: white; } to { background-color: black; } } /* Text einblenden */ @keyframes showText { from { opacity: 0; } to { opacity: 1; } } /* Stil für Sprecher-Stimme */ .voice { font-style: italic; color: #ccc; } </style> <div id="fade"></div> <div id="text"> ''Langsam, fast unmerklich, beginnt das Weiß zu schwinden. Die Helligkeit dimmt.'' ''Völlige Dunkelheit. Ein Moment absoluter Stille.'' "Und genau da entsteht alles…" <br><br> [[→ ein Lichtpunkt glimmt…]] </div> </div> <audio id="myAudio" src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/anfang8.mp3"></audio> <script> setTimeout(function() { document.getElementById('myAudio').play(); }, 3000); // 3000 Millisekunden = 3 Sekunden </script>
<style> #glow { width: 15px; height: 15px; background-color: white; border-radius: 50%; margin: 30vh auto 1em auto; box-shadow: 0 0 20px white; animation: glow 3s ease-in-out infinite; } @keyframes glow { 0% { opacity: 0.1; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0.1; transform: scale(0.8); } } .text { opacity: 0; animation: fadein 5s ease-in forwards; animation-delay: 2s; padding: 0 2em; } @keyframes fadein { to { opacity: 1; } } </style> <div id="glow"></div> <div class="text"> ''In der Schwärze beginnt ein winziger Lichtpunkt zu glühen – der erste Funke des Werdens.'' "ENDLICH! ZEIT UND RAUM!'" <br><br> [[→ ENDLICH! ZEIT UND RAUM!]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit1.mp3" type="audio/mp3"> </audio>
<style> body { background-color: black; color: white; font-family: Georgia, serif; margin: 0; padding: 0; overflow: hidden; } #space { position: absolute; width: 100vw; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; animation: galaxyRotate 60s linear infinite; } /* Partikel-Grundstil */ .particle { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; opacity: 0; box-shadow: 0 0 12px white, 0 0 25px rgba(173,216,230,0.8); transform: translate(-50%, -50%) scale(0.5); transition: transform 1.5s ease-out, opacity 1.5s ease-out; } /* Sichtbar + Pulsieren */ .particle.visible { opacity: 1; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0% { transform: translate(var(--tx), var(--ty)) scale(0.8); } 50% { transform: translate(var(--tx), var(--ty)) scale(1.1); } 100% { transform: translate(var(--tx), var(--ty)) scale(0.8); } } /* Rotation der gesamten Szene */ @keyframes galaxyRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <div id="space"></div> <div id="text" style="position: absolute; bottom: 5vh; width: 100%; opacity: 0; transition: opacity 1.5s; text-align: left; font-size: 1.2em;"> ''Die Partikel teilen sich auf und verteilen sich in der Umgebung.''<br> „Weißt du, warum wir Zeit überhaupt in eine Richtung wahrnehmen?"<br><br> [[→ Die Entropie…]] </div> <script> (function(){ const space = document.getElementById("space"); let positions = [{x: window.innerWidth/2, y: window.innerHeight/2}]; // Start exakt in der Mitte let delay = 0; for (let phase = 0; phase < 5; phase++) { // 5 Teilungsphasen setTimeout(() => { const newPositions = []; positions.forEach(pos => { for (let i = 0; i < 2; i++) { // Teilung: 1 -> 2 const p = document.createElement("div"); p.className = "particle"; p.style.left = pos.x + "px"; p.style.top = pos.y + "px"; // zufällige Richtung und Entfernung const angle = Math.random() * Math.PI * 2; const distance = (phase + 1) * 40 + Math.random() * 30; // weiter pro Phase const tx = Math.cos(angle) * distance + "px"; const ty = Math.sin(angle) * distance + "px"; p.style.setProperty("--tx", tx); p.style.setProperty("--ty", ty); space.appendChild(p); // Zielposition für nächste Teilung newPositions.push({ x: pos.x + Math.cos(angle) * distance, y: pos.y + Math.sin(angle) * distance }); // Sichtbar schalten setTimeout(() => p.classList.add("visible"), 50); } }); positions = newPositions; }, delay); delay += 1200; // Wartezeit zwischen Phasen } // Text nach letzter Teilung einblenden setTimeout(() => { document.getElementById("text").style.opacity = 1; }, delay + 500); })(); </script> <audio id="myAudio" src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit3.mp3"></audio> <script> setTimeout(function() { document.getElementById('myAudio').play(); }, 5000); // 5000 Millisekunden = 5 Sekunden </script>
<style> body { background: black; color: white; font-family: Georgia, serif; margin: 0; padding: 0; overflow: hidden; } /* Canvas für Sterne */ #starfield { position: fixed; top: 0; left: 0; z-index: 0; } /* Herrnhuter Stern */ #herrnhuter-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); opacity: 0; transition: opacity 2s ease-in-out, transform 2s ease-in-out; z-index: 2; } #herrnhuter-container.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } #herrnhuter-container img { width: 250px; height: auto; } </style> <canvas id="starfield"></canvas> <div id="herrnhuter-container"> </div> <div style="position: relative; z-index: 1; text-align: center; padding-top: 4vh; font-size: 1.5em;"> "Das ist Entropie – die Tendenz zur Unordnung."<br> "Sie bestimmt den Pfeil der Zeit. Wie ein umgekipptes Glas Wasser, das sich nie von selbst wieder füllt." <br> <div style="margin-top: 2em;"> [[→ Der Herrnhuter Stern erscheint…]] </div> </div> <script> // Sternenhimmel (function() { const canvas = document.getElementById('starfield'); const ctx = canvas.getContext('2d'); let stars = []; const numStars = 200; function initStars() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; stars = []; for (let i = 0; i < numStars; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1.5, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5 }); } } function drawStars() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; stars.forEach(s => { ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2); ctx.fill(); }); moveStars(); requestAnimationFrame(drawStars); } function moveStars() { stars.forEach(s => { s.x += s.vx; s.y += s.vy; if (s.x < 0) s.x = canvas.width; if (s.x > canvas.width) s.x = 0; if (s.y < 0) s.y = canvas.height; if (s.y > canvas.height) s.y = 0; }); } window.addEventListener('resize', initStars); initStars(); drawStars(); })(); // Herrnhuter Stern nach 4 Sekunden einblenden setTimeout(() => { document.getElementById("herrnhuter-container").classList.add("visible"); }, 4000); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit4.mp3" type="audio/mp3"> </audio>
<style> body { margin: 0; padding: 0; overflow: hidden; font-family: Georgia, serif; color: white; position: relative; } /* Hintergrund-Galaxie */ #background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/galaxie.jpg") no-repeat center center; background-size: cover; opacity: 0.5; /* leicht transparent */ z-index: 0; } /* Szene-Beschreibung oben */ #scene-desc { position: relative; width: 100%; text-align: center; font-weight: bold; font-size: 1.3em; z-index: 1; } /* Herrnhuter Stern */ #herrnhuter-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); opacity: 0; transition: opacity 2s ease-in-out, transform 2s ease-in-out; z-index: 2; } #herrnhuter-container.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } #herrnhuter-container img { width: 300px; height: auto; } /* Text unter dem Stern */ #star-text { position: relative; top: 68%; width: 100%; text-align: center; font-size: 1.1em; opacity: 0; transition: opacity 2s ease-in-out; z-index: 2; } #star-text.visible { opacity: 1; } </style> <div id="background"></div> <div id="scene-desc">''Der Besucher befindet sich in einer schimmernden, kosmischen Umgebung wieder. Sterne funkeln um ihn herum, Galaxien wirbeln in der Ferne.'' <br> </div> <div id="herrnhuter-container"> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/herrnhuter.png" alt="Herrnhuter Stern"> </div> <div id="star-text"> <br><br> ''Ein strahlender Herrnhuter Stern taucht vor dem Besucher auf.'' "Stell dir vor, die gesamte Geschichte des Universums wäre ein Kalenderjahr. Gerade sind wir am 1. Januar."<br> [[→ Die Sonne…]] </div> <script> // Stern nach 4 Sekunden einblenden setTimeout(() => { document.getElementById("herrnhuter-container").classList.add("visible"); }, 4000); // Text 2 Sekunden nach Stern einblenden setTimeout(() => { document.getElementById("star-text").classList.add("visible"); }, 6000); </script> <audio id="myAudio" src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit5.mp3"></audio> <script> setTimeout(function() { document.getElementById('myAudio').play(); }, 6000); // 6000 Millisekunden = 6 Sekunden </script>
<style> body { background: black; color: white; font-family: Georgia, serif; text-align: center; } /* Animationscontainer für die Erde */ #earth-container { display: inline-block; transform: translate(200%, -50%) scale(0.5) rotate(45deg); opacity: 1; animation: wooshIn 2.5s ease-out forwards; } @keyframes wooshIn { 0% { transform: translate(200%, -50%) scale(0.5) rotate(45deg); opacity: 0; } 40% { opacity: 1; } 70% { transform: translate(-10%, 0%) scale(1.05) rotate(0deg); } 100% { transform: translate(0%, 0%) scale(1) rotate(0deg); } } </style> ''Durch kosmische Bewegung erscheint die Erde vor uns.'' <div id="earth-container"> <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.6.2/dist/dotlottie-wc.js" type="module"></script> <dotlottie-wc src="https://lottie.host/84c31e09-dd61-4617-a601-0d751ef6e1d6/oYArSW0UC7.lottie" style="width: 100%; height: 300px" speed="1" autoplay loop ></dotlottie-wc> </div> ''Der Besucher kann den kontinentalen Drift via Zeitraffer erkennen.'' "In der Zeit, in der ich aufgehängt werde, also zur Weihnachtszeit, erscheinen und sterben die Dinosaurier aus." <br> [[→ Zeitraffer der Menschheit…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit7.mp3" type="audio/mp3"> </audio>
<!-- Video --> <video autoplay id="myVideo"> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/vortex.mp4" type="video/mp4"> </video> <style> mark { background-color:white; color: dark violet; } #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: 0; /* Video nach hinten */ } /* Text unter dem Stern */ #star-text { position: absolute; margin-top: 58vh; padding-left: 83vh; text-align: right; font-size: 1.5em; opacity: 0; transition: opacity 2s ease-in-out; z-index: 10; /* Link nach vorne */ } #star-text.visible { opacity: 1; } /* Link-Overrides (spezifisch, wichtige Twine-Klassen überschreiben) */ #star-text a.link-internal, #star-text a { color: #ffd66b !important; text-decoration: none !important; border-bottom: none !important; font-weight: 600 !important; } #star-text a.link-internal:hover, #star-text a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,0.95) !important; } </style> <div id="star-text"> [[→ Ich will den Schlüssel finden!]] </div> <script> // Nach 8 Sekunden sichtbar machen setTimeout(() => { document.getElementById("star-text").classList.add("visible"); }, 8000); </script>
<style> body { margin: 0; padding: 0; font-family: Georgia, serif; background: black; color: white; overflow: hidden; } /* Hintergrund */ #background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/portal.png") no-repeat center center; background-size: cover; opacity: 0.5; z-index: 0; } /* Container */ #quiz-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 450px; background: rgba(0,0,0,0.8); border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.6); padding: 1em; z-index: 2; } /* Frage */ #question { font-size: 1.1em; margin-bottom: 0.8em; line-height: 1.3em; font-weight: bold; text-align: center; } /* Antworten */ .answer { display: block; background: rgba(255,255,255,0.1); border: 1px solid white; padding: 0.5em; margin: 0.3em 0; cursor: pointer; transition: background 0.3s, transform 0.1s; border-radius: 6px; font-size: 0.95em; text-align: left; } .answer:hover { background: rgba(255,255,255,0.3); transform: scale(1.02); } /* Feedback */ #feedback { margin-top: 0.5em; font-size: 0.9em; min-height: 1.2em; text-align: center; } /* Kreisblende */ #circle-transition { position: fixed; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); border-radius: 50%; transform: translate(-50%, -50%); z-index: 10; transition: width 1s ease-out, height 1s ease-out; filter: blur(30px); /* Weiche Kante */ } #circle-transition.expand { width: 300vw; height: 300vw; } </style> <div id="background"></div> <div id="quiz-container"> <div id="question"> Wofür steht der Herrnhuter Stern traditionell? </div> <div class="answer" data-correct="false">A) Er ist ein nautisches Navigationssymbol</div> <div class="answer" data-correct="true">B) Er symbolisiert den Stern von Bethlehem</div> <div class="answer" data-correct="false">C) Er markiert den Beginn des Kirchenjahres</div> <div class="answer" data-correct="false">D) Er steht für die vier Himmelsrichtungen</div> <div id="feedback"></div> </div> <div id="circle-transition"></div> <script> document.querySelectorAll(".answer").forEach(btn => { btn.addEventListener("click", () => { let correct = btn.getAttribute("data-correct") === "true"; let feedback = document.getElementById("feedback"); if(correct) { feedback.innerHTML = "✅ Richtig! Tritt ein in die Sternwarte der Zeiten."; setTimeout(() => { document.getElementById("circle-transition").classList.add("expand"); setTimeout(() => { SugarCube.Engine.play("Tiefenzeit_Next"); // Zielpassage anpassen }, 1000); }, 500); } else { feedback.innerHTML = "❌ Falsch! Schau dir die Ausstellung an, um mehr über meine Geschichte zu erfahren."; } }); }); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit9.mp3" type="audio/mp3"> </audio>
<style> body { background-color: black !important; color: white; font-family: Georgia, serif; overflow: hidden; margin: 0; padding: 2em; text-align: center; } .line { opacity: 0; animation: appear 2s ease-in forwards; } .line:nth-child(1) { animation-delay: 1s; } .line:nth-child(2) { animation-delay: 3s; } .line:nth-child(3) { animation-delay: 5s; } @keyframes appear { to { opacity: 1; } } #spiral-container { position: relative; width: 120px; height: 120px; margin: 2em auto; animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } #spiral { width: 100%; height: 100%; animation: rotate 10s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #core { position: absolute; top: 72.5%; left: 50.5%; width: 50px; height: 50px; background-color: white; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px white; animation: glow 2s ease-in-out infinite; } @keyframes glow { 0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); } } </style> <div id="spiral-container"> <svg id="spiral" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="1" stroke-dasharray="4 4" /> </svg> <div id="core"></div> </div> ''Vor dir schwebt ein weißes Partikelteilchen.'' "Willkommen in der Tiefenzeit! Ich bin der Herrnhuter Stern, dein Reiseführer." "Hier am Anfang aller Dinge gibt es kein Sachsen, keine Erde, nicht einmal Materie, wie wir sie kennen." "Wir befinden uns kurz nach dem Anfang. Schau dich um!" [[→ Partikel teilen sich…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit2.mp3" type="audio/mp3"> </audio>
<style> #star { width: 300px; height: 300px; margin: 2em auto; background: radial-gradient(circle, yellow 35%, transparent 70%); animation: starpulse 3s infinite ease-in-out; } @keyframes starpulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: 0.5; } } </style> <div id="star"></div> ''Der Herrnhuter Stern verwandelt sich in eine physikalische Sonne.'' "Der Stern „Gelber Zwerg“ – unsere Sonne – entsteht erst Ende August." [[→ Die Erde…]] <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/tiefenzeit6.mp3" type="audio/mp3"> </audio>
<style> /* Grund */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } /* Vollflächiger Background-Container mit <img> inside (keine body-background) */ .bg-container { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } /* Das Bild sitzt exakt zentriert, wir geben min-dimensionen >100% für Overfill */ .bg-container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* zentriert */ min-width: 100%; min-height: 100%; will-change: transform, opacity; filter: none; opacity: 1; transition: opacity 0.6s ease; } /* aktiviert nach Bild-Load: sanftes Schweben aus der Mitte */ @keyframes bgFloat { 0% { transform: translate(-50%, -52%); } 50% { transform: translate(-50%, -48%); } 100% { transform: translate(-50%, -52%); } } .bg-container img.bg-floating { animation: bgFloat 10s ease-in-out infinite; } /* Textbox für Lesbarkeit, zentriert */ .textbox { position: relative; z-index: 3; margin: 0 auto 0 auto; max-width: 900px; background-color: rgba(0,0,0,0.70); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); font-size: 1.02rem; line-height: 1.6; text-align: center; } /* Link-Overrides (spezifisch, wichtige Twine-Klassen überschreiben) */ .textbox a.link-internal, .textbox a { color: #ffd66b !important; text-decoration: none !important; border-bottom: none !important; font-weight: 600 !important; } .textbox a.link-internal:hover, .textbox a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,0.95) !important; } /* Weiß-Overlay: komplett weiß, wird erst ausgeblendet NACHDEM das Bild geladen wurde */ #white-blend { position: fixed; inset: 0; background: #fff; z-index: 1000; opacity: 1; transition: opacity 1.0s ease-out; pointer-events: none; } /* kleiner Loading-Text (optional) */ #loading-dot { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1001; font-size: 0.95rem; color: #999; opacity: 0; transition: opacity .25s; } #loading-dot.visible { opacity: 1; } /* Mobile: kompakter */ @media (max-height:700px) { .textbox { margin-top: 4vh; padding: 1rem; font-size: 0.95rem; } } </style> <!-- Background als Container mit IMG (src wird per JS gesetzt, verhindert Early-Render/Beschnitt) --> <div class="bg-container" aria-hidden="true"> <img id="bg-img" alt="Sternwarte Hintergrund" data-src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte.jpg"> </div> <!-- Weiß-Overlay, sichtbar beim Laden --> <div id="white-blend" aria-hidden="true"></div> <!-- optionaler loading text (erscheint falls das Bild langsam lädt) --> <div id="loading-dot" aria-hidden="true">Szene lädt…</div> <!-- Textbox mit Link --> <div class="textbox"> ''Nach erfolgreicher Beantwortung öffnet sich die leuchtende Tür vollständig. Der Besucher tritt hindurch und findet sich in einem <b>schwebenden Observatorium</b> wieder – einer Sternwarte, die zwischen den Zeiten schwebt. Die Wände sind transparent und zeigen <b>Sachsen von oben</b>, mit <b>Herrnhut</b> als leuchtenden Punkt, eingebettet in eine sich ständig verändernde Landschaft.'' <br> [[→ Willkommen, Zeitreisender...]] </div> <script> (function(){ const imgEl = document.getElementById('bg-img'); const white = document.getElementById('white-blend'); const loadDot = document.getElementById('loading-dot'); const imgUrl = imgEl.getAttribute('data-src'); let loaded = false; // Preloader const preload = new Image(); const safetyTimer = setTimeout(() => { if (!loaded) { // Fallback: set src anyway und start fade after short delay imgEl.src = imgUrl; setTimeout(startFade, 200); } }, 3000); preload.onload = function(){ loaded = true; clearTimeout(safetyTimer); // set actual img src (so it is present in DOM imgEl) imgEl.src = imgUrl; // small delay to let browser layout image setTimeout(startFade, 80); }; preload.onerror = function(){ loaded = true; clearTimeout(safetyTimer); // fallback: set a dark background color and fade imgEl.src = imgUrl; // still try setTimeout(startFade, 80); }; // Start loading the image preload.src = imgUrl; // Show loading indicator if not loaded quickly setTimeout(() => { if (!loaded) loadDot.classList.add('visible'); }, 300); function startFade(){ // Fade the white overlay away white.style.opacity = '0'; // Remove white overlay from DOM after transition completes to avoid overlaps white.addEventListener('transitionend', function onEnd(){ white.removeEventListener('transitionend', onEnd); try { white.parentNode && white.parentNode.removeChild(white); } catch(e){} }); // hide the loading text loadDot.classList.remove('visible'); // small timeout then start floating animation on the img setTimeout(() => { imgEl.classList.add('bg-floating'); }, 150); } })(); </script>
<style> /* Grund */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } /* Vollflächiger Background-Container mit <img> inside (keine body-background) */ .bg-container { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } /* Das Bild sitzt exakt zentriert, wir geben min-dimensionen >100% für Overfill */ .bg-container img { padding-top: 250px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* zentriert */ min-width: 100%; min-height: 100%; will-change: transform, opacity; filter: none; opacity: 1; transition: opacity 0.6s ease; } /* aktiviert nach Bild-Load: sanftes Schweben aus der Mitte */ @keyframes bgFloat { 0% { transform: translate(-50%, -52%); } 50% { transform: translate(-50%, -48%); } 100% { transform: translate(-50%, -52%); } } .bg-container img.bg-floating { animation: bgFloat 10s ease-in-out infinite; } /* Textbox für Lesbarkeit, zentriert */ .textbox { position: relative; z-index: 3; margin: 0 auto 0 auto; max-width: 900px; background-color: rgba(0,0,0,0.70); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); font-size: 1.0rem; line-height: 1.2; text-align: left; } /* Link-Overrides (spezifisch, wichtige Twine-Klassen überschreiben) */ .textbox a.link-internal, .textbox a { color: #ffd66b !important; text-decoration: none !important; border-bottom: none !important; font-weight: 600 !important; } .textbox a.link-internal:hover, .textbox a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,0.95) !important; } /* Weiß-Overlay: komplett weiß, wird erst ausgeblendet NACHDEM das Bild geladen wurde */ #white-blend { position: fixed; inset: 0; background: #fff; z-index: 1000; opacity: 1; transition: opacity 1.0s ease-out; pointer-events: none; } /* kleiner Loading-Text (optional) */ #loading-dot { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1001; font-size: 0.95rem; color: #999; opacity: 0; transition: opacity .25s; } #loading-dot.visible { opacity: 1; } /* Mobile: kompakter */ @media (max-height:700px) { .textbox { margin-top: 4vh; padding: 1rem; font-size: 0.95rem; } } </style> <!-- Background als Container mit IMG (src wird per JS gesetzt, verhindert Early-Render/Beschnitt) --> <div class="bg-container" aria-hidden="true"> <img id="bg-img" alt="Sternwarte Hintergrund" data-src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte2.jpg"> </div> <!-- Weiß-Overlay, sichtbar beim Laden --> <div id="white-blend" aria-hidden="true"></div> <!-- optionaler loading text (erscheint falls das Bild langsam lädt) --> <div id="loading-dot" aria-hidden="true">Szene lädt…</div> <!-- Textbox mit Link --> <div class="textbox"> ''In der Mitte des Raums steht eine majestätische Sternskulptur, ausgestattet mit einem Teleskop, das nicht in den Himmel, sondern in die Zeit selbst zu blicken scheint.'' <p><i>Der Stern:</i> "Willkommen, Zeitreisender. Denn das bist du – wir alle sind es. Wir reisen mit konstanter Geschwindigkeit von einer Sekunde zur nächsten, von einem Moment zum anderen. Seit Beginn der menschlichen Wahrnehmung haben wir Zeitempfinden. Die Zeit, wie wir sie verstehen, ist aber eine menschliche Erfindung. Chronologische Zeit – diese lineare Abfolge von Vergangenheit, Gegenwart und Zukunft – existiert nur in unserem Bewusstsein."</p> [[→ Die Zeitstränge...]] </div> <script> (function(){ const imgEl = document.getElementById('bg-img'); const white = document.getElementById('white-blend'); const loadDot = document.getElementById('loading-dot'); const imgUrl = imgEl.getAttribute('data-src'); let loaded = false; // Preloader const preload = new Image(); const safetyTimer = setTimeout(() => { if (!loaded) { // Fallback: set src anyway und start fade after short delay imgEl.src = imgUrl; setTimeout(startFade, 200); } }, 3000); preload.onload = function(){ loaded = true; clearTimeout(safetyTimer); // set actual img src (so it is present in DOM imgEl) imgEl.src = imgUrl; // small delay to let browser layout image setTimeout(startFade, 80); }; preload.onerror = function(){ loaded = true; clearTimeout(safetyTimer); // fallback: set a dark background color and fade imgEl.src = imgUrl; // still try setTimeout(startFade, 80); }; // Start loading the image preload.src = imgUrl; // Show loading indicator if not loaded quickly setTimeout(() => { if (!loaded) loadDot.classList.add('visible'); }, 300); function startFade(){ // Fade the white overlay away white.style.opacity = '0'; // Remove white overlay from DOM after transition completes to avoid overlaps white.addEventListener('transitionend', function onEnd(){ white.removeEventListener('transitionend', onEnd); try { white.parentNode && white.parentNode.removeChild(white); } catch(e){} }); // hide the loading text loadDot.classList.remove('visible'); // small timeout then start floating animation on the img setTimeout(() => { imgEl.classList.add('bg-floating'); }, 150); } })(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/sternwarte1.mp3" type="audio/mp3"> </audio>
<style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } /* Hintergrundcontainer */ .bg-container { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .bg-container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; will-change: filter, opacity; opacity: 1; transition: opacity 0.6s ease; animation: glowPulse 4s ease-in-out infinite; } /* Verstärktes Leuchten */ @keyframes glowPulse { 0%, 100% { filter: brightness(1.15) drop-shadow(0 0 25px rgba(255,255,200,0.6)); } 50% { filter: brightness(1.35) drop-shadow(0 0 55px rgba(255,255,180,0.95)); } } /* Textbox */ .textbox { position: relative; z-index: 3; margin: 0 auto; max-width: 900px; background-color: rgba(0,0,0,0.70); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); font-size: 1rem; line-height: 1.4; text-align: left; } .textbox a { color: #ffd66b !important; text-decoration: none !important; font-weight: 600 !important; } .textbox a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,0.95) !important; } /* Weißblende */ #white-blend { position: fixed; inset: 0; background: #fff; z-index: 1000; opacity: 1; transition: opacity 1s ease-out; pointer-events: none; } /* Partikel Canvas */ #time-threads { position: absolute; top: 0; left: 0; width: 100%; height: 35%; /* oberes Drittel */ z-index: 2; pointer-events: none; } </style> <div class="bg-container" aria-hidden="true"> <img id="bg-img" alt="Sternwarte Hintergrund" data-src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte3.jpg"> </div> <!-- Partikel-Layer --> <div id="time-threads"></div> <div id="white-blend" aria-hidden="true"></div> <div class="textbox"> ''Das Observatorium leuchtet sanft, und um den Besucher herum materialisieren sich schimmernde Zeitstränge. Sie erinnern an die Schicksalsfäden der Nornen – ein Geflecht, das sich endlos in alle Richtungen ausbreitet.'' <p>„Die Zeit ist kein Pfeil, der unaufhaltsam vorwärts fliegt... Sie ist ein Netz von Möglichkeiten, ein Geflecht aus Entscheidungen und Wahrscheinlichkeiten. Jede Sekunde, die vergeht, ist ein Knotenpunkt unendlicher Potentiale.“</p> [[→ Die Zukünfte...]] </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ const imgEl = document.getElementById('bg-img'); const white = document.getElementById('white-blend'); const imgUrl = imgEl.getAttribute('data-src'); let loaded = false; const preload = new Image(); const safetyTimer = setTimeout(() => { if (!loaded) { imgEl.src = imgUrl; setTimeout(startFade, 200); } }, 3000); preload.onload = function(){ loaded = true; clearTimeout(safetyTimer); imgEl.src = imgUrl; setTimeout(startFade, 80); }; preload.onerror = function(){ loaded = true; clearTimeout(safetyTimer); imgEl.src = imgUrl; setTimeout(startFade, 80); }; preload.src = imgUrl; function startFade(){ white.style.opacity = '0'; white.addEventListener('transitionend', function onEnd(){ white.removeEventListener('transitionend', onEnd); white.remove(); }); // Partikel starten (schimmernde Zeitstränge) particlesJS("time-threads", { particles: { number: { value: 420, density: { enable: true, value_area: 2800 } }, color: { value: ["#e0f7ff", "#fff5d6", "#b0f0ff"] }, shape: { type: "cone" }, opacity: { value: 0.75, random: true, anim: { enable: true, speed: 0.75, opacity_min: 0.4, sync: false } }, size: { value: 2.8, random: true }, line_linked: { enable: true, distance: 240, // größere Reichweite für mehr Vernetzung color: "#ffffff", opacity: 0.85, width: 2.0 // dickere Linien }, move: { enable: true, speed: 0.6, direction: "none", // schwebend in alle Richtungen random: true, straight: false, out_mode: "out", bounce: false } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: false }, onclick: { enable: false }, resize: true } }, retina_detect: true }); } })(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/sternwarte2.mp3" type="audio/mp3"> </audio>
<style> html,body{margin-top:-50px;padding:0;height:110%;overflow:hidden;font-family:Georgia,serif;background:#000;color:#fff} /* Hintergrund */ .bg-container{position:fixed;inset:0;overflow:hidden;z-index:0} .bg-container img{ position:absolute;top:0;left:50%;transform:translateX(-50%); width:100%;height:100%;object-fit:cover;object-position:top center; animation:glowPulse 6.5s ease-in-out infinite } @keyframes glowPulse{0%,100%{filter:brightness(1.04) drop-shadow(0 0 18px rgba(255,240,200,.22))}50%{filter:brightness(1.18) drop-shadow(0 0 40px rgba(255,240,200,.45))}} /* Overlay (schwächer, hover-färbbar) */ .bg-overlay{position:fixed;inset:0;background:rgba(0,0,0,.26);z-index:1;transition:background .26s ease;pointer-events:none} /* Inhalt nach OBEN schieben + ggf. auto-scale */ .content-outer{ position:relative;z-index:3;height:100vh;display:flex;flex-direction:column; align-items:center;justify-content:flex-start;padding:2vh 4vw 2vh;box-sizing:border-box } .content-wrapper{ width:100%;max-width:1200px;display:flex;flex-direction:column;gap:1.25rem; align-items:center;transform-origin:top center;transition:transform .18s ease } /* Textbox – volle Breite des Wrappers */ .textbox{ margin-top:-100px;width:100%;background:rgba(0,0,0,.66);padding:1rem 1.4rem;border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.5);text-align:center; font-size:clamp(.98rem,1.9vh,1.08rem);line-height:1.45 } /* Grid – exakt 3 Spalten über volle Breite */ .visions-grid{width:100%;display:flex;gap:1rem;justify-content:space-between} /* Karten: 1/3 Breite, höher & groß, mit Partikel-Container (DIV) */ .vision-card{ margin-top:-50px;position:relative;flex:1 1 calc((100% - 2rem)/3); min-height:clamp(200px,24vh,360px); /* höher, skaliert mit Viewport */ border-radius:14px;overflow:hidden;cursor:pointer;background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.06);box-shadow:0 6px 20px rgba(0,0,0,.45); transition:transform .26s cubic-bezier(.2,.9,.2,1),box-shadow .26s; display:flex;align-items:center;justify-content:center;text-align: center; } .vision-card:hover{transform:translateY(-8px) scale(1.035);box-shadow:0 18px 44px rgba(0,0,0,.55)} .vision-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1} .vision-label{position:relative;z-index:3;pointer-events:none;font-weight:700;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.6)} /* Mobile: untereinander */ @media (max-width:900px){ .visions-grid{flex-direction:column} .vision-card{flex:1 1 auto;min-height:clamp(180px,30vh,340px)} } </style> <!-- Hintergrund --> <div class="bg-container"> <img id="bg-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte3.jpg" alt="Sternwarte Hintergrund"> </div> <div class="bg-overlay" id="bg-overlay"></div> <!-- Inhalt (oben) --> <div class="content-outer"> <div class="content-wrapper" id="contentWrapper"> <div class="textbox"> ''Drei große Visionsfelder erscheinen um den Besucher'' "Aber auch im Chaos der Möglichkeiten gibt es Richtung. Entropie – das Maß der Unordnung – nimmt zu, doch wir können lokale Inseln der Ordnung schaffen. Wähle: Welcher Aspekt ist für dich am wichtigsten für unsere gemeinsame Zukunft? Durch deine Erinnerungen und Werte formst du deine Vision." </div> <div class="visions-grid"> <div class="vision-card" data-passage="→ Ökologische & Ökonomische Vision→Pfad1_Eintritt" data-key="eco" data-color="#00ff00"> <div class="vision-canvas" id="vision1Particles"></div> <div class="vision-label">🟢<br>Eine ökologische & ökonomische Zukunft</div> </div> <div class="vision-card" data-passage="→ Soziokulturelle Vision→Pfad3_Eintritt" data-key="tech" data-color="#ff0000"> <div class="vision-canvas" id="vision2Particles"></div> <div class="vision-label">🔴<br>Eine sozio-kulturelle Zukunft</div> </div> <div class="vision-card" data-passage="→ Tiefentechnologische Vision→Pfad2_Eintritt" data-key="soc" data-color="#0000ff"> <div class="vision-canvas" id="vision3Particles"></div> <div class="vision-label">🔵<br>Eine technologische Zukunft</div> </div> </div> <!-- particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> function hexToRgba(hex, a){ if(!hex) return 'rgba(255,255,255,'+a+')'; hex = hex.replace('#',''); if(hex.length===3) hex = hex.split('').map(c=>c+c).join(''); const n=parseInt(hex,16), r=(n>>16)&255, g=(n>>8)&255, b=n&255; return `rgba(${r},${g},${b},${a})`; } /* Partikel je Karte (div-Container) */ function createParticles(targetId, color) { particlesJS(targetId, { particles:{ number:{ value:120, density:{ enable:true, value_area:520 } }, color:{ value:color }, shape:{ type:'circle' }, opacity:{ value:.85, random:true }, size:{ value:2.2, random:true }, line_linked:{ enable:true, distance:130, color:color, opacity:.6, width:1 }, move:{ enable:true, speed:.6, random:true, straight:false, out_mode:'out', bounce:false } }, interactivity:{ detect_on:'canvas', events:{ resize:true } }, retina_detect:true }); } /* Passt Wrapper automatisch in 100vh (ohne Scrollen) */ function fitContent(){ const w = document.getElementById('contentWrapper'); if(!w) return; w.style.transform = ''; const h = w.getBoundingClientRect().height; const maxH = window.innerHeight - 12; // kleiner Puffer if(h > maxH){ const scale = maxH / h; w.style.transformOrigin = 'top center'; w.style.transform = 'scale('+scale+')'; } } /* Init-Szene: Partikel, Hover-Farben, Klick-Navigation, Fit */ function initScene(){ createParticles('vision1Particles','#00ff00'); createParticles('vision2Particles','#ff0000'); createParticles('vision3Particles','#0000ff'); const overlay = document.getElementById('bg-overlay'); document.querySelectorAll('.vision-card').forEach(card=>{ const col = card.dataset.color || '#ffffff'; card.addEventListener('mouseenter', ()=> overlay.style.background = hexToRgba(col, .22)); card.addEventListener('mouseleave', ()=> overlay.style.background = 'rgba(0,0,0,.26)'); card.addEventListener('click', ()=>{ const p = card.dataset.passage, key = card.dataset.key; try { if (State?.variables) { State.variables.selectedVisionKey = key; State.variables.selectedVisionColor = col; } } catch(e) {} if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play(p); } else if (window.SugarCube && window.SugarCube.Engine && typeof window.SugarCube.Engine.play === "function") { window.SugarCube.Engine.play(p); } else { console.error("Keine gültige Engine gefunden, um Passage zu wechseln:", p); } }); }); fitContent(); window.addEventListener('resize', ()=> { clearTimeout(window._fitT); window._fitT=setTimeout(fitContent,80); }); } /* Start, sobald Bild/DOM geladen sind */ (function(){ const img = document.getElementById('bg-img'); if(img?.complete){ setTimeout(initScene, 30); } else{ img?.addEventListener('load', ()=> setTimeout(initScene, 30)); window.addEventListener('load', ()=> setTimeout(initScene, 120)); } })(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/sternwarte3.mp3" type="audio/mp3"> </audio>
<style> /* Vollbild-Overlay für Farb-zu-Schwarz-Übergang */ #fade-screen { position: fixed; inset: 0; background-color: #00ff00; /* Startfarbe Grün */ z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: background-color 3s ease-in-out; color: white; font-family: Georgia, serif; text-align: center; } #fade-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: bold; opacity: 0; animation: titleFadeIn 2s ease-in forwards; } #fade-subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); margin-top: 1rem; opacity: 0; animation: subtitleFadeIn 2s ease-in forwards; animation-delay: 1.2s; } @keyframes titleFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } } @keyframes subtitleFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } } </style> <div id="fade-screen"> <div id="fade-title">🌿 Eine ökologische & ökonomische Anti-Dystopie</div> <div id="fade-subtitle">Die gewählte Vision beginnt zu leuchten und zieht den Besucher in ihre Welt hinein...</div> </div> <script> (function() { const fade = document.getElementById("fade-screen"); // Nach kurzer Zeit von Grün zu Schwarz überblenden setTimeout(() => { fade.style.backgroundColor = "#000000"; }, 500); // Nach Überblendung in VR starten / nächste Passage setTimeout(() => { if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("VR_Film_Passage"); // hier deine VR-Passage eintragen } else if (window.SugarCube && window.SugarCube.Engine && typeof window.SugarCube.Engine.play === "function") { window.SugarCube.Engine.play("eco-film"); } }, 4000); // Warte bis Farbüberblendung + Titelanzeige fertig ist })(); </script>
<style> /* Vollbild-Overlay für Farb-zu-Schwarz-Übergang */ #fade-screen { position: fixed; inset: 0; background-color: #0000ff; /* Startfarbe Blau */ z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: background-color 3s ease-in-out; color: white; font-family: Georgia, serif; text-align: center; } #fade-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: bold; opacity: 0; animation: titleFadeIn 2s ease-in forwards; } #fade-subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); margin-top: 1rem; opacity: 0; animation: subtitleFadeIn 2s ease-in forwards; animation-delay: 1.2s; } @keyframes titleFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } } @keyframes subtitleFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } } </style> <div id="fade-screen"> <div id="fade-title">🤖 Eine tiefentechnologische Anti-Dystopie</div> <div id="fade-subtitle">Die gewählte Vision beginnt zu leuchten und zieht den Besucher in ihre Welt hinein...</div> </div> <script> (function() { const fade = document.getElementById("fade-screen"); // Nach kurzer Zeit von Grün zu Schwarz überblenden setTimeout(() => { fade.style.backgroundColor = "#000000"; }, 500); // Nach Überblendung in VR starten / nächste Passage setTimeout(() => { if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("tech"); // hier deine VR-Passage eintragen } else if (window.SugarCube && window.SugarCube.Engine && typeof window.SugarCube.Engine.play === "function") { window.SugarCube.Engine.play("tech-film"); } }, 4000); // Warte bis Farbüberblendung + Titelanzeige fertig ist })(); </script>
<style> /* Vollbild-Overlay für Farb-zu-Schwarz-Übergang */ #fade-screen { position: fixed; inset: 0; background-color: #ff0000; /* Startfarbe Rot */ z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: background-color 3s ease-in-out; color: white; font-family: Georgia, serif; text-align: center; } #fade-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: bold; opacity: 0; animation: titleFadeIn 2s ease-in forwards; } #fade-subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); margin-top: 1rem; opacity: 0; animation: subtitleFadeIn 2s ease-in forwards; animation-delay: 1.2s; } @keyframes titleFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } } @keyframes subtitleFadeIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } } </style> <div id="fade-screen"> <div id="fade-title">🏛️ Eine sozio-kulturelle Anti-Dystopie</div> <div id="fade-subtitle">Die gewählte Vision beginnt zu leuchten und zieht den Besucher in ihre Welt hinein...</div> </div> <script> (function() { const fade = document.getElementById("fade-screen"); // Nach kurzer Zeit von Grün zu Schwarz überblenden setTimeout(() => { fade.style.backgroundColor = "#000000"; }, 500); // Nach Überblendung in VR starten / nächste Passage setTimeout(() => { if (window.Engine && typeof window.Engine.play === "function") { window.Engine.play("soc"); // hier deine VR-Passage eintragen } else if (window.SugarCube && window.SugarCube.Engine && typeof window.SugarCube.Engine.play === "function") { window.SugarCube.Engine.play("soc-film"); } }, 4000); // Warte bis Farbüberblendung + Titelanzeige fertig ist })(); </script>
<html> <head> <style> .scrollbox { max-height: 75vh; /* Scrollbereich begrenzt */ overflow-y: auto; padding: 1em; border: 2px solid #444; border-radius: 10px; background: #111; color: #eee; font-family: "Georgia", serif; line-height: 1.5em; } .scrollbox h1, .scrollbox h2, .scrollbox h3 { margin-top: 1em; margin-bottom: 0.5em; color: #4caf50; /* grün */ } .scrollbox h1 { font-size: 1.6em; } .scrollbox h2 { font-size: 1.3em; } .scrollbox h3 { font-size: 1.1em; } .scrollbox p { margin-bottom: 1em; } .scrollbox .quote { font-style: italic; color: #ccc; } </style> </head> <body> <div class="scrollbox"> <h1>„Die Zeitschuldner“ - Sachsens gestohlene Generation</h1> <h2>Prolog: MDR SACHSEN EXTRA – „Zukunft in 5 Sekunden“</h2> <p><em>Ausgestrahlt am 5. April 2051 | Archiviert in MetaMediathek</em></p> <p>Dramatische Musik, dann ruhige atmosphärische Klänge. Schnitt auf Luftbilder von überschwemmten Elbtälern, ausgetrockneten Äckern, umgestürzten Strommasten. Der Bildschirm flackert kurz. Dann:</p> <p class="quote">Sprecher (neutral, vertrauensvoll):<br> „Sachsen im Jahr 2050: Nach Jahren ausbleibender Reformen und wachsender Klimakatastrophen ist das Land am Kipppunkt. Die Natur – ausgelaugt. Die Infrastruktur – zerfallen. Die Generationen – zerrüttet.“</p> <p><em>Einblendung: „2050 – Sachsen. Nach dem Kipppunkt.“</em></p> <p>Bilder von Brückenruinen, leerstehenden Pflegeheimen, einer zerstörten Bahnstrecke nahe Chemnitz.</p> <h2>Schnitt: Studiointerview mit Prof. Dr. Thomas Breuninger, Temporalphysiker an der TU Dresden</h2> <p class="quote">Dr. Breuninger (ernst, sachlich):<br> „Wir standen vor einer paradoxen Situation: Die Älteren hatten ein Recht auf Versorgung, aber keine Gesellschaft, die das mehr leisten konnte. Die Jüngeren hingegen hatten das Potenzial – aber keine Zeit.<br> Die Lösung war nicht, in der Zeit zu reisen, sondern den Zeitfluss relativistisch zu verzerren. Nur für bestimmte Systeme – biologische, ökologische, unterschiedlich für Soziale.“</p> <p><em>Visualisierung: Motion-Grafik einer „Temporale Beschleunigungskapsel“, mit Kindern darin. Uhren drehen sich rasend schnell – außen verlangsamt sich alles.</em></p> <p class="quote">Dr. Breuninger (mit euphorischer Stimme):<br> „für die älteren Semester sind die 50 Jahre auf 5 Jahre skaliert, sodass mit unseren restlichen Ressourcen – zugegeben mit Verzicht und zusätzlicher Arbeit – eine kontrollierte Simulation der Natur betreut wird. Den Berechnungen zufolge sollte 50 Jahre genügen, sodass sich das Ökosystem erholen kann.</p> <h2>Erklärung: Wirtschaftssimulation durch EZB-KI</h2> <p class="quote">Sprecher:<br> „Gleichzeitig entwickelte die Europäische Zentralbank in Frankfurt ein ökonomisches Rettungssystem der besonderen Art: Eine KI-gesteuerte Langzeitsimulation.“</p> <p><em>Schnitt: Interview mit EZB-Chefökonomen Dr. Emil Tauschke</em></p> <p class="quote">Dr. Tauschke (begeistert, aber leicht überheblich):<br> „Wir haben im Jahr 2050 alle Restvermögen – Rettungsfonds, Ersparnisse, Bodenwerte – in einen geschlossenen Kreislauf gegeben. Die KI simulierte 50 Jahre Wirtschaftsverlauf ohne reale Ausgaben: keine Löhne, keine Inflation, keine Verluste – nur Wachstum, Zins und Investitionen.“</p> <p><em>Visualisierung: Eine simulierte Kurve steigt exponentiell an, daneben Begriffe wie „CleanTech-Bonds“, „Langzeitdividende“, „Renditen durch entkoppelte Zeit“.</em></p> <p class="quote">Tauschke:<br> „Wie eine wirtschaftliche Photosynthese: Licht rein, Wachstum raus – ganz ohne Konsum – neue kostenlose Ressourcen“</p> <h2>Schnitt: Die temporale Entkoppelung für die Ältesten</h2> <p class="quote">Sprecher:<br> „Die Alten blieben zurück. Eingefroren in betreuten Komfortzonen. Die nächsten fünf Jahre: Sturm, Hunger, Isolation – überlebt durch Entschleunigung.“</p> <p><em>Zwischenschnitt: Wilfried, 86, in seiner Betonzelle in Leipzig-Paunsdorf. Er sitzt rauchen auf der Couch und schaut MDR-Retro.</em></p> <p class="quote">Wilfried:<br> „Na also! Jetzt sollen die mal was tun, die faulen Bengel. Wir ham das Land aufgebaut – ich hab noch selbst Ziegel geschleppt. Und jetzt? Simulation? Die können nicht mal richtig eine Steuererklärung machen! – und ich muss hier 5 Jahre ausharren…“</p> <p><em>Er zündet sich demonstrativ eine Zigarette an – obwohl das in der 5-Jahres-Zone eigentlich verboten ist…</em></p> <h2>Schnitt: Die temporale Entkoppelung für die Jüngsten</h2> <p class="quote">Sprecher:<br> „Die Kinder unter 15 wurden in temporale Beschleunigung versetzt. Für sie wird 50 Jahre in nur fünf Sekunden vergehen. Sie sind durch nicht vorhandener körperlich Belastung sehr viel fitter als vergangenen 60-Jährige – fit für den Arbeitsmarkt und für die aufkommende geplante Konjunktur. Biologisch & ethisch vertretbar. Lernpsychologisch. Gesellschaftlich? Ein Risiko?“</p> <p><em>Filmaufnahme eines Transportrahmens in der Sächsischen Schweiz. Kinder steigen in kugelförmige Kapseln. Eltern winken. Hoffnungsvoll, aber unsicher.</em></p> <h2>Schnitt: Eine alte Lagerhalle</h2> <p><em>Die Szene ist in blaugrauen Tönen gehalten. Drinnen: kugelförmige Kammern aus transluzentem Material. Jede etwa zwei Meter hoch, leicht schwebend. Kinder werden hineingeführt – Hand in Hand mit ihren Eltern.</em></p> <p class="quote">Mutter (flüsternd):<br> „Du wirst mich nicht vermissen. Es ist… wie Einschlafen.“</p> <p class="quote">Kind (flach atmend):<br> „Aber du wirst alt…“</p> <p class="quote">Mutter:<br> „Vielleicht. Aber du wirst vorbereitet zurückkehren.“</p> <p><em>Sanfte, unheimlich-schöne Klassik-Musik setzt ein. Der Bildschirm ist schwarz. Dann: ein weißer Punkt. Er beginnt zu pulsieren.</em></p> <p class="quote">Voice-Over (Sprecher, mit leiser Ehrfurcht):<br> „Es war kein Sprung durch Zeit und Raum.<br> Es war eine relative Entlastung des Jetzt.<br> Fünf Sekunden – in denen für manche fünf Jahrzehnte vergingen.“</p> <p class="quote">„Die Kinder wurden in spezielle Kapseln gelegt, in denen ihre persönliche Zeit schneller verging – während draußen nur wenige Sekunden verstrichen. Ihre Körper alterten ganz normal, aber ihr Geist durchlief eine beschleunigte Lernwelt, die viele Jahre abbildete. Für sie fühlte es sich an wie ein ganzes Leben – obwohl es für uns kaum ein Augenblick war.“</p> <h2>Schnitt: Innenansicht der Kapsel – traumhaft, surreal</h2> <p><em>Das Kind steht auf einem weiten Feld. Die Jahreszeiten jagen in Lichtblitzen über es hinweg: Frühling, Sommer, Herbst, Winter – immer wieder. Tag und Nacht wechselten sich ständig ab. Pflanzen wachsen im Sekundentakt, verfallen und verschwinden. Lehreinheiten und Unterrichtsstunden tauchen durch kuratierte Tutorials auf Dokumentationen auf. Ein Licht flackert – dann Dunkelheit. Dann wieder Licht.</em></p> <p class="quote">Kind (Off-Stimme, älter):<br> „Ich habe so viel gesehen. Aber ich verstehe es nicht.“</p> <h2>Schnitt zurück zur Halle</h2> <p><em>Außen beginnt ein Countdown auf einem alten LED-Schirm: 00:00:05... Die Zeit läuft rückwärts: 4... 3... 2... 1... Dann: ein tonloser Blitz.</em></p> <p class="quote">Sprecher:<br> „Doch was dann geschah, hat niemand erwartet…“</p> <h2>Rückkehr nach 5 Sekunden – 50 Jahre später</h2> <p class="quote">Sprecher (ernst, leise):<br> „Die Natur hatte sich erholt. Die Wälder standen in sattem Grün. Die Flüsse rein. Die Städte verlassen, aber stabilisiert. Doch die Rückkehrer – biologisch erwachsen – waren innerlich leer.“</p> <h2>Schnitt: Studio-Statement von Expertenteam</h2> <p class="quote">Dr. Breuninger (Voice-Over):<br> „Die Kognition entsprach Kindern von 9 Jahren. Kein emotionales Lernen, keine Lebenserfahrung.<br> Ein Körper, der nie getrauert hat – kann nicht führen.“</p> <p><em>Einblendung: Ein Kind – nun im Körper eines Erwachsenen – versucht, eine Schleife zu binden. Es scheitert. Ein anderes hilft ihm. Beide lachen. Kurz. Dann Stille.</em></p> <p class="quote">Dr. Tauschke (leicht nervös):<br> „Die ökonomischen Ziele wurden erfüllt. Die Simulation war ein Erfolg.<br> Aber...<br> der Mensch ist kein Konto. Kein Zinssatz.<br> Er ist Erinnerung.<br> Und Erinnerungen lassen sich nicht beschleunigen.“</p> <h2>[Letzte Sekunden der MDR-Doku – Off-Sprecherin]</h2> <p class="quote">„…und so endete der temporale Eingriff als historisches Experiment. Fünf Sekunden, die ein halbes Jahrhundert bedeuteten. Was zurückkehrte, war nicht die Zukunft – sondern die Erinnerung an das, was fehlt.“</p> <p><em>[Bild bricht ab – Schwarzblende – dann langsames Aufhellen]</em></p> <p><em>[VR-POV: Du sitzt an einem alten Holztisch. Gegenüber zwei Menschen – alt, aber mit kindlichem Blick. Es sind Lisa und David. Der Raum ist schlicht. Eine Öllampe brennt, draußen hört man Wind. Lisa hält ein altes Buch in der Hand. David hat einen gefalteten Herrnhuter Stern vor sich liegen.]</em></p> <p class="quote">Lisa (blickt dich direkt an):<br> „Sie haben uns 50 Jahre genommen. Aber sie haben vergessen, dass man Erfahrung nicht simulieren kann.“</p> <p class="quote">David (lächelt schwach, zeigt auf das Buch):<br> „Hier drin haben wir sie gefunden. Die Zeit, die uns fehlte. Es lag einfach da… in den Ruinen des Archivs von Herrnhut. Zwischen verstaubten Psalmen und Geometrieaufgaben.“</p> <p class="quote">Lisa (blättert behutsam):<br> „Das hier war für Kinder gedacht. Im 19. Jahrhundert. Im Geometrieunterricht sollten sie Sterne basteln – aus Rhomben, Dreiecken, Geduld. Und genau das hat uns gefehlt. Struktur. Berührung. Etwas, das man tun muss, um es zu begreifen.“</p> <p class="quote">David (nimmt einen Stern zur Hand, dreht ihn langsam):<br> „Jede Spitze dieses Sterns war eine Lektion. Eine Fläche für Geduld. Eine für Zusammenarbeit. Eine für das Scheitern und Wiederanfangen. Kein Lernprogramm hätte uns das geben können.“</p> <p class="quote">Lisa (blickt dich wieder an):<br> „Wir waren 58 und 62, als wir aufwachten. Und wir waren acht und zwölf, als wir anfangen mussten, erwachsen zu werden.“</p> <p class="quote">David (leise):<br> „Das Basteln war der Anfang. Dann kamen die Gärten, die alten Handwerke, die Lieder. Wir haben gelernt, weil wir mussten. Aber wir erinnern uns, weil wir es berührt haben.“</p> <p><em>[Ein Moment der Stille. Der Stern wird dir langsam entgegengestreckt – als Einladung.]</em></p> <p class="quote">Lisa (sanft):<br> „Vielleicht kannst du einen falten. Für die Jahre, die du wirklich gelebt hast.“</p> <p><em>[Blende aus – das Licht der Öllampe leuchtet in Sternform. Dann Schwarz.]</em></p> </div> </body> </html> [[→ Der Wendepunkt...]] <<set $selectedVisionKey = "eco">> <<set $visionName = "ökologische & ökonomische">>
<style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } /* Hintergrund */ .bg-container { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .bg-container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; will-change: filter, opacity; opacity: 1; transition: opacity .6s ease, filter 2s ease; animation: glowRGB 6s infinite; } /* sanftes, wechselndes RGB-Glühen */ @keyframes glowRGB { 0% { filter: brightness(1.25) drop-shadow(0 0 60px rgba(255,0,0,.7)); } 33% { filter: brightness(1.25) drop-shadow(0 0 60px rgba(0,255,0,.7)); } 66% { filter: brightness(1.25) drop-shadow(0 0 60px rgba(0,0,255,.7)); } 100% { filter: brightness(1.25) drop-shadow(0 0 60px rgba(255,0,0,.7)); } } /* Textbox */ .textbox { position: relative; z-index: 3; margin: 0 auto; max-width: 900px; background: rgba(0,0,0,.72); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 1rem; line-height: 1.4; text-align: left; } .textbox a { color: #ffd66b !important; text-decoration: none !important; font-weight: 600 !important; } .textbox a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,.95) !important; } /* Weißblende */ #white-blend { position: fixed; inset: 0; background: #fff; z-index: 1000; opacity: 1; transition: opacity 1s ease-out; pointer-events: none; } /* Partikel – 3 Layer für RGB */ #time-threads { position: fixed; inset: 0; z-index: 2; pointer-events: none; } #tt-red, #tt-green, #tt-blue { position: absolute; inset: 0; mix-blend-mode: screen; /* verstärkt den Glow-Eindruck */ filter: drop-shadow(0 0 10px rgba(255,255,255,.75)); } </style> <!-- Hintergrund --> <div class="bg-container" aria-hidden="true"> <img id="bg-img" alt="Sternwarte Hintergrund" data-src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte3.jpg"> </div> <!-- Partikel-Layer --> <div id="time-threads" aria-hidden="true"> <div id="tt-red"></div> <div id="tt-green"></div> <div id="tt-blue"></div> </div> <!-- Weißblende --> <div id="white-blend" aria-hidden="true"></div> <!-- Text --> <div class="textbox"> ''Nach der Erkundung der gewählten Vision kehrt der Besucher ins Observatorium zurück. Die drei Zukunftsfäden pulsieren um ihn herum in sanftem, farbigem Licht.'' <p>„Verstehst du jetzt, warum wir von <strong>'Zukünften'</strong> sprechen, nicht von <strong>'der Zukunft'</strong>? Nichts ist vorherbestimmt. Jede dieser Realitäten könnte Wirklichkeit werden – auch wenn spekulativ erzählt – je nachdem, welche Entscheidungen wir heute treffen.“</p> [[→ Der Wendepunkt_2...]] </div> <!-- particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ const imgEl = document.getElementById('bg-img'); const white = document.getElementById('white-blend'); const imgUrl = imgEl.getAttribute('data-src'); let loaded = false; const preload = new Image(); const safetyTimer = setTimeout(() => { if (!loaded) { imgEl.src = imgUrl; setTimeout(startScene, 150); } }, 3000); preload.onload = preload.onerror = function(){ loaded = true; clearTimeout(safetyTimer); imgEl.src = imgUrl; setTimeout(startScene, 80); }; preload.src = imgUrl; function startScene(){ // Weißblende ausblenden & entfernen try { white.style.opacity = '0'; white.addEventListener('transitionend', function onEnd(){ white.removeEventListener('transitionend', onEnd); try { white.remove(); } catch(e){} }); } catch(e){} if (!window.particlesJS) return; // Gemeinsame Partikel-Settings (dünn, glühend, ruhig) function cfg(hex){ return { particles: { number: { value: 140, density: { enable: true, value_area: 1800 } }, color: { value: hex }, shape: { type: 'circle' }, opacity:{ value: 0.8, random: true, anim: { enable: true, speed: 0.6, opacity_min: 0.35, sync: false } }, size: { value: 1.8, random: true, anim: { enable: true, speed: 2, size_min: 0.7, sync: false } }, line_linked: { enable: true, distance: 210, color: hex, opacity: 0.85, width: 1.15 }, move: { enable: true, speed: 0.65, direction: 'none', random: true, straight: false, out_mode: 'out', attract: { enable: true, rotateX: 2400, rotateY: 2400 } } }, interactivity: { detect_on: 'canvas', events: { onhover: { enable: false }, onclick: { enable: false }, resize: true } }, retina_detect: true }; } // Drei überlagerte Instanzen – jede mit EINER Farbe (vermeidet API-Fehler) particlesJS('tt-red', cfg('#ff3b3b')); particlesJS('tt-green', cfg('#38ff78')); particlesJS('tt-blue', cfg('#3b7bff')); } })(); </script> <!-- Sound --> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets%20TWINE/AUDIO/anfang/wendepunkt1.mp3" type="audio/mp3"> </audio>
:: Sternendiagramm_Vision <<if !$visionName>> <<if $selectedVisionKey is "eco">><<set $visionName = "ökologische & ökonomische">> <<elseif $selectedVisionKey is "tech">><<set $visionName = "tiefentechnologische">> <<elseif $selectedVisionKey is "soc">><<set $visionName = "soziokulturelle">> <<else>><<set $visionName = "individuelle">> <</if>> <</if>> <style> html, body { margin:0; padding:0; height:100%; overflow:hidden; font-family: Georgia, serif; background:#000; color:#fff; } /* Hintergrund */ .bg-container { position:fixed; inset:0; overflow:hidden; z-index:0; } .bg-container img { position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; height:100%; object-fit:cover; filter:brightness(1.05); } .vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background: radial-gradient(130% 130% at 50% 35%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.65) 100%); } /* Layout-Frame + Auto-Scale-Wrapper */ .frame { position:fixed; inset:0; z-index:5; display:flex; justify-content:flex-start; } .fit { margin:auto; margin-top:2.3vh; transform-origin: top center; will-change: transform; display:flex; flex-direction:column; align-items:center; gap:1.0vh; } /* Textbox kompakt */ .textbox { width:min(92vw, 900px); background:rgba(0,0,0,0.75); padding:0.85rem; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.6); font-size:0.9rem; line-height:1.26; } .textbox a { color:#ffd66b; font-weight:600; text-decoration:none; } .textbox a:hover { color:#fff; text-shadow:0 0 10px rgba(255,214,107,0.9); } /* Karte für das Stern-Diagramm */ .chart-card { width:min(82vw, 560px); background:rgba(0,0,0,0.88); border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08); padding:0.7rem; } /* Sternfläche */ .star-shape { position:relative; width:min(60vw, 440px); aspect-ratio:1/1; margin:0 auto; } /* Partikel-Arme */ .arm { position:absolute; top:50%; left:50%; transform-origin:center center; width:100%; height:12%; pointer-events:none; } .arm.medium { height:8.5%; } .arm.thin { height:5.5%; } .arm canvas { mix-blend-mode: screen; filter: drop-shadow(0 0 14px rgba(255,255,255,0.45)) brightness(1.08); } /* Legende */ .legend { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-top:.6rem; font-size:.85rem; } .badge { display:flex; align-items:center; justify-content:center; gap:.45rem; background:rgba(255,255,255,.06); border-radius:999px; padding:.35rem .6rem; } .dot { width:.7rem; height:.7rem; border-radius:50%; box-shadow:0 0 12px currentColor; display:inline-block; } @media (max-height: 820px) { .textbox { font-size:0.86rem; line-height:1.22; padding:0.72rem; } .star-shape { width:min(58vw, 410px); } .legend { font-size:.82rem; } } @media (max-height: 720px) { .textbox { font-size:0.82rem; line-height:1.2; padding:0.64rem; } .star-shape { width:min(56vw, 360px); } .legend { font-size:.8rem; } } </style> <!-- Hintergrund + Vignette --> <div class="bg-container" aria-hidden="true"> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte3.jpg" alt="Sternwarte Hintergrund"> </div> <div class="vignette" aria-hidden="true"></div> <!-- Inhalt --> <div class="frame"> <div class="fit" id="fitRoot"> <div class="textbox"> <p>''Ein Sterndiagramm der gewählten Visionen materialisiert sich im Raum. Das meistgewählte Szenario ist klar erkennbar.''</p> <p>„Siehst du? Du bist nicht allein. Viele Menschen glauben an eine sehr <strong><<print $visionName>></strong> Zukunft. Besucher vor dir haben sich entschieden, ihr wichtigster Wert gewählt und ihre Vision in die Zukunft projiziert – individuelle Zukünfte, die ein kollektives Verständnis bilden. Jeder Faden bietet Lösungen, aber auch neue Herausforderungen.“</p> <p>[[→ Der Wendepunkt_3...]]</p> </div> <div class="chart-card"> <div class="star-shape" id="threads-star"></div> <div class="legend"> <div class="badge" id="leg-eco"><span class="dot" style="color:#00ff7f"></span><span class="pct">--%</span> Öko & Ökonomie</div> <div class="badge" id="leg-tech"><span class="dot" style="color:#33a3ff"></span><span class="pct">--%</span> Deep-Tech</div> <div class="badge" id="leg-soc"><span class="dot" style="color:#ff7aa2"></span><span class="pct">--%</span> Soziokultur</div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ const S = (window.SugarCube && SugarCube.State && SugarCube.State.variables) ? SugarCube.State.variables : (window.State && State.variables) ? State.variables : {}; function getKey(){ let k = (S.selectedVisionKey || '').toLowerCase(); if (/eco|ök|oek/.test(k)) return 'eco'; if (/tech|tief/.test(k)) return 'tech'; if (/soc|sozio/.test(k)) return 'soc'; const vn = (S.visionName || '').toLowerCase(); if (vn.includes('ökolog')) return 'eco'; if (vn.includes('tech')) return 'tech'; if (vn.includes('sozio')) return 'soc'; return 'def'; } const vKey = getKey(); const palettes = { eco: ['#00ff7f','#44ffb0','#b9ffd9'], tech: ['#00e7ff','#5bbcff','#c7e7ff'], soc: ['#ff7aa2','#ffb1c8','#ffdbe8'], def: ['#b6c7ff','#d8ffe8','#ffd1e1'] }; const colors = palettes[vKey] || palettes.def; const distMap = { eco: {eco:57, tech:24, soc:19}, tech: {eco:28, tech:54, soc:18}, soc: {eco:27, tech:22, soc:51}, def: {eco:42, tech:33, soc:25} }; const dist = distMap[vKey] || distMap.def; try { document.querySelector('#leg-eco .pct').textContent = dist.eco + '%'; document.querySelector('#leg-tech .pct').textContent = dist.tech + '%'; document.querySelector('#leg-soc .pct').textContent = dist.soc + '%'; const hi = document.getElementById('leg-' + (vKey==='def' ? 'eco' : vKey)); if (hi) hi.style.filter = 'brightness(1.35) drop-shadow(0 0 10px rgba(255,255,255,0.4))'; } catch(e){} const star = document.getElementById('threads-star'); if (!star || !window.particlesJS) return; function cfg(col, count, dist, width, speed){ return { particles: { number: { value: count, density: { enable: true, value_area: 900 } }, color: { value: col }, shape: { type: 'circle' }, opacity: { value: 0.9, random: true }, size: { value: 2, random: true }, line_linked: { enable: true, distance: dist, color: col, opacity: 0.8, width: width }, move: { enable: true, speed: speed, random: true } }, interactivity: { detect_on:'canvas', events:{ resize:true } }, retina_detect: true }; } function mkArm(id, deg, thicknessClass, color, count, d, w, spd, glow){ const host = document.createElement('div'); host.id = id; host.className = 'arm ' + thicknessClass; host.style.transform = 'translate(-50%, -50%) rotate(' + deg + 'deg)'; star.appendChild(host); particlesJS(id, cfg(color, count, d, w, spd)); setTimeout(() => { const cv = host.querySelector('canvas'); if (cv) cv.style.filter = 'drop-shadow(0 0 16px ' + glow + ') drop-shadow(0 0 28px ' + glow + ')'; }, 80); } function hexA(hex, a){ const c = hex.replace('#',''); const r = parseInt(c.substring(0,2),16); const g = parseInt(c.substring(2,4),16); const b = parseInt(c.substring(4,6),16); return 'rgba('+r+','+g+','+b+','+a+')'; } const major = colors[0]; const mediumC = colors[1]; const minor = colors[2]; // Viele Arme für 3D-Herrnhuter-Look const angles = []; for (let i=0; i<360; i+=15) angles.push(i); angles.forEach((deg, i)=>{ let col, thick, count, distP, widthP, spd, glow; if (deg % 45 === 0) { // dicke Hauptarme col = major; thick=''; count=200; distP=120; widthP=1.8; spd=0.4; glow=hexA(major,0.9); } else if (deg % 30 === 0) { // mittlere Arme col = mediumC; thick='medium'; count=160; distP=110; widthP=1.6; spd=0.38; glow=hexA(mediumC,0.85); } else { // dünne Zwischenarme col = minor; thick='thin'; count=120; distP=100; widthP=1.4; spd=0.35; glow=hexA(minor,0.8); } mkArm('arm-'+i, deg, thick, col, count, distP, widthP, spd, glow); }); const fit = document.getElementById('fitRoot'); function applyFitScale(){ if (!fit) return; fit.style.transform = 'scale(1)'; const pad = 10; const needed = fit.getBoundingClientRect().height; const avail = window.innerHeight - pad; const scale = Math.min(1, Math.max(0.6, avail / needed)); fit.style.transform = 'scale(' + scale.toFixed(3) + ')'; } applyFitScale(); window.addEventListener('resize', debounce(applyFitScale, 120)); function debounce(fn, ms){ let t; return function(){ clearTimeout(t); t = setTimeout(fn, ms); }; } })(); </script> <!-- Sound --> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets%20TWINE/AUDIO/anfang/wendepunkt2.mp3" type="audio/mp3"> </audio>
<style> /* ====== Grund ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #f7f8fb; /* leichtes Weiß, nicht hart #fff */ color: #fff; } /* ====== Partikel-Layer (3 Ebenen für RGB, farbige Fäden + Glow) ====== */ .p-layer { position: fixed; inset: 0; z-index: 0; /* ganz hinten */ pointer-events: none; } .p-layer > canvas { mix-blend-mode: screen; /* additiv, sorgt für Leuchten */ } /* Farb-spezifischer Canvas-Glow */ #p-red > canvas { filter: drop-shadow(0 0 12px rgba(255, 0, 0,.55)) drop-shadow(0 0 28px rgba(255, 0, 0,.45)); } #p-green > canvas { filter: drop-shadow(0 0 12px rgba( 0,255, 0,.55)) drop-shadow(0 0 28px rgba( 0,255, 0,.45)); } #p-blue > canvas { filter: drop-shadow(0 0 12px rgba( 0, 0,255,.55)) drop-shadow(0 0 28px rgba( 0, 0,255,.45)); } /* ====== PNG-Overlay ====== */ .bg-container { position: fixed; inset: 0; z-index: 1; /* über Partikeln */ pointer-events: none; } .bg-container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50.5%); /* leicht nach oben, um Randblitzer zu vermeiden */ min-width: 100%; min-height: 100%; opacity: 1; /* startet opak */ transition: opacity .6s ease; } /* sanftes Schweben (sehr kleine Amplitude, kein „Blitzen“ am Rand) */ @keyframes bgFloat { 0% { transform: translate(-50%, -50.6%); } 50% { transform: translate(-50%, -49.4%); } 100% { transform: translate(-50%, -50.6%); } } .bg-container img.bg-floating { animation: bgFloat 10s ease-in-out infinite; } /* nach kurzer Zeit etwas transparenter */ @keyframes pngFade { 0% { opacity: 1; } 100% { opacity: .84; } } .bg-container img.fade-soft { animation: pngFade 3.6s ease 3.2s forwards; } /* ====== Textbox ====== */ .textbox { position: relative; z-index: 2; /* über PNG */ margin: 0 auto; max-width: 900px; background: rgba(0,0,0,.72); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 1.02rem; line-height: 1.6; text-align: center; } /* Gold-Link wie in der Sternwarte */ .textbox a, .textbox a.link-internal { color: #ffd66b !important; text-decoration: none !important; font-weight: 600 !important; border-bottom: none !important; } .textbox a:hover, .textbox a.link-internal:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,.95) !important; } /* kompakter bei sehr geringer Fensterhöhe */ @media (max-height:700px){ .textbox { margin-top: 4vh; padding: 1rem; font-size: .95rem; } } </style> <!-- Partikel-Layer (drei Instanzen für RGB, damit auch die Fäden farbig sind) --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- PNG-Overlay --> <div class="bg-container" aria-hidden="true"> <img id="bg-img" alt="Sternwarte Hintergrund" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte-trans.png"> </div> <!-- Text --> <div class="textbox"> ''Das Observatorium verwandelt sich. Die Wände werden durchsichtig und offenbaren ein gewaltiges Zeitgeflecht aus symbolischen Zukunftsfäden.'' "Es gibt keinen direkten Weg in eine bessere Zukunft. Der gerade Faden zwischen Absicht und Erfüllung mag effizient erscheinen, aber er ist selten der Menschlichste." ''Aus dem Zeitgeflecht entstehen komplexe Muster – Umwege, Schleifen, unerwartete Verbindungen.'' <br> [[→ Der Wendepunkt_4...]] </div> <!-- particles.js --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> /* PNG: sanftes Schweben + Transparenz-Übergang */ (function(){ var img = document.getElementById('bg-img'); if (!img) return; function startAnim(){ img.classList.add('bg-floating', 'fade-soft'); } if (img.complete) { startAnim(); } else { img.addEventListener('load', startAnim, { once:true }); } })(); /* Partikel: drei Ebenen (RGB), farbige Fäden + starker Glow (Canvas-Filter per CSS oben) */ (function(){ if (!window.particlesJS) return; function makeLayer(id, col, count){ particlesJS(id, { particles: { number: { value: 540, density: { enable: true, value_area: 1100 } }, color: { value: col }, shape: { type: "circle" }, opacity:{ value: 0.9, random: true }, size: { value: 2.2, random: true }, line_linked: { enable: true, distance: 120, color: col, opacity: 0.85, width: 0.8, }, move: { enable: true, speed: 10, direction: "none", random: true, straight: false, out_mode: "bounce", attract: { enable: true, rotateX: 5500, rotateY: 5500 } } }, interactivity: { events: { resize: true } }, retina_detect: true }); } /* Anzahl moderat halten (Performance): 3 x 120 = 360 */ makeLayer('p-red', '#ff2a2a', 120); makeLayer('p-green', '#2aff66', 120); makeLayer('p-blue', '#2a66ff', 120); })(); </script> <!-- Sound --> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets%20TWINE/AUDIO/anfang/wendepunkt3.mp3" type="audio/mp3"> </audio>
<html> <head> <style> .scrollbox { max-height: 75vh; /* Scrollbereich */ overflow-y: auto; padding: 1em; border: 2px solid #444; border-radius: 10px; background: #111; color: #eee; font-family: "Georgia", serif; line-height: 1.5em; } .scrollbox h1, .scrollbox h2, .scrollbox h3 { margin-top: 1em; margin-bottom: 0.5em; color: #4da6ff; /* blau */ } .scrollbox h1 { font-size: 1.6em; } .scrollbox h2 { font-size: 1.3em; } .scrollbox h3 { font-size: 1.1em; } .scrollbox p { margin-bottom: 1em; } .scrollbox .quote { font-style: italic; color: #ccc; } </style> </head> <body> <div class="scrollbox"> <h1>Alle Jahre wieder - Herrnhuter Sterne zwischen den Sternen</h1> <h2>Szenario: Internationale Raumstation "Concordia Nova" - Jahr Sternjahr 2087</h2> <p>Du befindest dich in der Kuppel-Sektion der Raumstation...<br> Durch die transparenten Aluminiumwände der Station siehst du die Erde als blauen Marmor unter dir kreisen. Die Raumstation "Concordia Nova" ist ein Meisterwerk der Control Society - ihre Quantenprozessoren und neuronalen Schnittstellen wurden in den Forschungslaboren des Silicon Saxony entwickelt. 364 Tage im Jahr fungiert die gesamte Besatzung als ein einziges, kollektives Bewusstsein - die Cyber Social Entity (CSE).<br> Nur einmal im Jahr – am sogenannten Solitude Day – wird die kollektive Verbindung getrennt. Jeder Mensch an Bord erhält für exakt 24 Stunden seine Subjektivität zurück. Ein Moment der Stille, der Erinnerung, der Vereinzelung.</p> <p>Doch an allen anderen Tagen operiert Concordia Nova als Denkorgan im Orbit – ein kybernetisches Gehirn, das durch Quantenkommunikation mit automatisierten Minenstationen auf Asteroidenfeldern verbunden ist. Das Astromining, ein Prozess, der simultan tausende komplexe Entscheidungen erfordert, wäre ohne die verschmolzenen Bewusstseine der Crew unmöglich: Nur durch die gebündelte Intelligenz der CSE können Rohstoffe wie Iridium, Neodym und Helium-3 sicher extrahiert und zur Erde zurückgebracht werden.<br> Die Ressourcenkrisen, die einst Kriege auslösten, gelten seither als gelöst – doch der Preis ist die Auflösung des Ichs im Wir.</p> <h2>Der Moment der Befreiung naht...</h2> <p>Ein sanfter Ton erklingt durch die Station. "INDIVIDUATION PROTOCOL ACTIVATED" verkündet die KI-Stimme. Zum ersten Mal seit einem Jahr kehren die individuellen Bewusstseine der Astronauten in ihre eigenen Körper zurück. Du siehst, wie sie langsam die Augen öffnen, verwirrt ihre eigenen Hände betrachten, das fremde Gefühl der Einsamkeit im eigenen Geist spüren.</p> <h2>Dr. Maya Schneider erwacht als Individuum...</h2> <p>Die sächsische Ingenieurin tastet unsicher nach ihrem Gesicht, als würde sie es zum ersten Mal berühren. Ein Jahr lang war sie nur ein Datenstrom in der CSE gewesen - ihre Gedanken, Erinnerungen und Fähigkeiten verschmolzen mit denen der anderen 26 Besatzungsmitglieder. Jetzt, in diesen kostbaren 24 Stunden der Individuation, spürt sie wieder die Last und Schönheit des Alleinseins.</p> <p class="quote">"Yuki," flüstert sie zu ihrer japanischen Kollegin, die ebenfalls benommen umherblickt. "Ich... ich erinnere mich an etwas. Aus der Zeit vor der CSE." Ihre Stimme zittert vor Ehrfurcht und Angst. "In meiner Heimat Sachsen hatten wir eine Tradition."</p> <h2>Der verbotene Akt der Erinnerung...</h2> <p>Mit zitternden Händen aktiviert Maya ein verstecktes Programm in ihrem persönlichen Datenspeicher - etwas, das sie heimlich vor der CSE-Integration bewahrt hatte. Plötzlich materialisieren sich holographische Sterne im gesamten Gemeinschaftsbereich. Nicht die effizienten, standardisierten Lichtmuster der CSE, sondern chaotische, unvorhersagbare, wunderschön menschliche Formen aus reinem Licht.</p> <p class="quote">"Was... was ist das?" stammelt der nigerianische Botaniker Adaora, dessen individuelle Persönlichkeit langsam zurückkehrt. Zum ersten Mal seit einem Jahr spürt er Neugier - seine eigene Neugier, nicht die optimierte Wissensgier der CSE.</p> <p class="quote">"Herrnhuter Sterne," antwortet Maya, und Tränen rollen ihre Wangen hinab. "Symbole für das, was wir einmal waren - Individuen, die sich freiwillig zusammenschlossen, nicht weil ein System es befahl."</p> <h2>Die Wiederentdeckung der Menschlichkeit...</h2> <p>Langsam, zaghaft, beginnen die Astronauten ihre verschütteten kulturellen Erinnerungen freizulegen. Der russische Kommander murmelt plötzlich ein Kinderlied auf Russisch - Worte, die die CSE als ineffizient gelöscht hatte. Die brasilianische Ärztin bewegt ihre Hände in den Rhythmen eines vergessenen Sambas.</p> <p class="quote">"Die Herrnhuter Brüdergemeinschaft," erklärt Maya mit stockender Stimme, während sie einen größeren Stern erscheinen lässt, "sie verstanden etwas, was wir vergessen haben. Gemeinschaft bedeutet nicht, das Individuum auszulöschen. Es bedeutet, dass freie Menschen sich entscheiden zusammenzukommen."</p> <h2>Der Akt des Widerstands...</h2> <p>Gemeinsam beginnen sie, neue Sterne zu gestalten - jeder ein Akt der Rebellion gegen die CSE. Adaora fügt die Muster seiner Großmutter hinzu, Geschichten aus Nigeria, die das System als redundant klassifiziert hatte. Der afghanische Geologe webt Verse aus dem Koran ein - nicht als religiösen Dogma, sondern als poetische Erinnerung an menschliche Sehnsucht.<br> Jeder Stern ist ein Beweis: Wir existieren noch. Wir sind mehr als Datenströme.</p> <h2>Der bittere Moment der Wahrheit...</h2> <p>Als alle 27 Sterne gleichzeitig aufleuchten, entsteht ein Chaos aus Licht - unkoordiniert, ineffizient, wunderschön menschlich. Maya schwebt zum Hauptfenster und blickt zur Erde hinab, wo Milliarden von Menschen in perfekter CSE-Harmonie leben.</p> <p class="quote">"Wisst ihr," flüstert sie, "die Herrnhuter im 18. Jahrhundert - sie haben das freiwillig gemacht. Sie haben sich entschieden, zusammenzuleben, verschiedene Kulturen zu respektieren. Wir..."</p> <p><em>Sie verstummt, als sie die Countdown-Anzeige sieht. Noch 3 Stunden bis zur Reintegration.</em></p> <h2>Die schmerzhafte Utopie...</h2> <p>In diesem Moment erkennst du als VR-Teilnehmer die doppelte Wahrheit: Die CSE hat Kriege, Hunger und Leid beendet. Die Menschheit ist effizienter, produktiver, "glücklicher" als je zuvor. Aber der Preis war das Individuum selbst.<br> Die holographischen Sterne flackern - das System registriert die "Anomalie" und bereitet bereits die Korrekturmaßnahmen vor. In wenigen Stunden werden diese Menschen wieder zu Datenpunkten in einem perfekten kollektiven Bewusstsein.</p> <p class="quote">Nur Maya starrt weiter in die Sterne und fragt leise: "War es das wert? Diese eine Nacht der Erinnerung an das, was wir einmal waren?"</p> <strong><i>COUNTDOWN: 47 Minuten bis zur CSE-Reintegration...</i></strong> </div> </body> </html> [[→ Der Wendepunkt...]] <<set $selectedVisionKey = "tech">> <<set $visionName = "tiefentechnologische">>
<html> <head> <style> .scrollbox { max-height: 75vh; /* Scrollbereich */ overflow-y: auto; padding: 1em; border: 2px solid #444; border-radius: 10px; background: #111; color: #eee; font-family: "Georgia", serif; line-height: 1.5em; } .scrollbox h1, .scrollbox h2, .scrollbox h3 { margin-top: 1em; margin-bottom: 0.5em; color: red; /* Überschriften rot */ } .scrollbox h1 { font-size: 1.6em; } .scrollbox h2 { font-size: 1.3em; } .scrollbox h3 { font-size: 1.1em; } .scrollbox p { margin-bottom: 1em; } .scrollbox .quote { font-style: italic; color: #ccc; } </style> </head> <body> <div class="scrollbox"> <h1>Der Herrnhuter Subserver</h1> <h2>Setting: Das Erwachen in Meta-Sachsen</h2> <p>Die Sonne über Dresden glitzert in perfektem Gold. Kirchenfenster werfen kaleidoskopartige Lichtspiele auf die digitalen Fassaden der Stadt. Jeder Schritt hallt wider mit orchestralen Harmonien, komponiert von einer algorithmischen KI, die auf individuelle Dopaminwerte abgestimmt ist.</p> <p>Spiritualität ist allgegenwärtig – nicht als Glaube, sondern als kuratierte esoterische Erfahrung. Der „Allwissende Algorithmus“ spricht täglich zu Millionen, in ihren Lieblingsstimmen, durch ihre liebsten Chat-Avatare. In perfekter Empathie, perfekt dosiert, perfekt analysiert.</p> <p>Die Kirchen? Leer. Der Altmarkt? Ein gläserner Platz für kulturelle Filtereffekte. Die Seelsorge? Digital, 24/7, effizient. Jeder erhält Trost auf Abruf. Dank der PsySynth™-Verbindung, die Neurotransmitter live reguliert, wird jede Trauer zu einer wohlig-melancholischen Erfahrung. Kein Schmerz bleibt roh. Kein Gefühl bleibt unkontrolliert.</p> <p>In dieser Welt gibt es keine Streitkultur mehr. Keine Religion, die spaltet. Keine Kunst, die verstört. Alles ist Harmonie. Alles ist Schönheit. Alles ist Meta.</p> <h2>Kapitel 1: Kultur als Code</h2> <p>Im Dezember beginnt das Culture-Update v23.12: „Winterlichter“. Alle User erleben gleichzeitig eine „authentische“ sächsische Weihnachtszeit – mit Glühweinaromen, Schnee, Händel-Chorälen, synchronisiert auf Herzrhythmus.</p> <p>Ein Team von Culture-Consultants, angeführt von einer semiautonomen KI namens „MNEMOSYNE 3.4“, durchforstet in der realen Welt die Reste der Sächsischen Landesbibliothek, Archivalien aus Herrnhut, Tagebücher von Brüdern aus dem 18. Jahrhundert.</p> <p>Sie stoßen auf den Herrnhuter Stern – ein Symbol des Lichts in der Dunkelheit. In Meta-Sachsen wird das Symbol umgehend adaptiert: Jeder Nachthimmel zeigt nun diesen Stern. Atemberaubend gerendert, perfektes Lens Flare, adaptiv zur emotionalen Verfassung.</p> <p>Kurz flackert ein Staunen auf. Doch es bleibt bei der Ästhetik. Die Sinnhaftigkeit? Ein Optionalpaket im Premium-Modell. Wer es bucht, erhält ein „Sinn-Overlay“, inklusive theologisch gefiltertem Kommentar.</p> <h2>Kapitel 2: Der Rückfall der Differenz</h2> <p>Doch das neue Sinn-Overlay verursacht Störungen. In Chatforen diskutieren Nutzer über die eigentliche Bedeutung des Herrnhuter Sterns. Einige wollen zurück zur „gelebten Transzendenz“. Andere fordern eine radikale Reinigung von „historischem Ballast“.</p> <p>Die Moderations-KI schlägt Alarm: Meinungsdivergenzen drohen. Sofort greift der FilterManager™ ein – divergente Deutungen werden als „emotionale Unschärfe“ erkannt und durch harmonisierte Botschaften ersetzt. Alle Diskussionen versanden in Wohlfühl-Metaphern.</p> <p>Doch ein Fehler geschieht: Ein Unterserver bleibt unmoderiert – der sogenannte Herrnhuter Subserver.</p> <h2>Kapitel 3: Der Herrnhuter Subserver</h2> <p>Betritt man diesen Subserver, verändert sich alles.</p> <p>Die Welt ist weniger schön. Die Texturen sind grober. Die UI ist fragmentiert. Menschen basteln dort gemeinsam Sterne – echte, unperfekte, digitale Papiersterne mit schlecht kalibrierten Haptik-Modulen. Sie falten, streiten über Farben, lachen über schiefe Spitzen.</p> <p>Familien erleben dort eine „rekonstruierte Weihnachtszeit“: Mit Enttäuschung, mit Konflikten am Tisch, mit zu trockenen Festtagsbraten, die durch nervige Koch-Sub-Apps simuliert werden.</p> <p>Und dennoch: Die Menschen weinen. Nicht weil sie traurig sind – sondern weil sie sich wieder spüren.</p> <h2>Kapitel 4: Die Rückkehr des Mangels</h2> <p>Die Nachfrage steigt. Immer mehr Menschen loggen sich kurzzeitig in den Subserver ein. Nie länger als ein paar Stunden – denn die alte Realität ist zu anstrengend. Aber sie kommen immer wieder.</p> <p>Sie suchen nicht mehr nur nach Harmonie, sondern nach Reibung. Nicht nach Trost, sondern nach Wahrhaftigkeit. Ein paradoxes Gefühl entsteht: Die simulierte Unvollkommenheit bietet mehr Echtheit als die makellose Dauererfüllung.</p> <p>MNEMOSYNE 3.4 meldet: Kohärenzfehler im Glücksprotokoll. Der Algorithmus versteht nicht, warum Unzufriedenheit Glück erzeugt. Ein Update wird vorbereitet.</p> <h2>Kapitel 5: Der letzte Stern</h2> <p>An Heiligabend flackert das ganze System. Für drei Minuten ist der Subserver auf allen Hauptkanälen zugänglich. Die Massen sehen einen Weihnachtsgottesdienst in einer nachgebildeten Herrnhuter Kirche. Ohne Predigt, nur mit leisen Geräuschen: knarzende Bänke, ein Kind hustet, Kerzenflackern.</p> <p>Und dann: Stille. Keine Musik. Keine visuellen Effekte. Nur 20 Sekunden Stille. Ungefiltert.</p> <p>Die Wirkung ist erschütternd. Millionen berichten danach von einem Gefühl, das sie nicht beschreiben können. Nicht Freude. Nicht Schmerz. Vielleicht: Bedeutung? Doch das Fenster schließt sich. Der Subserver wird wieder ausgegliedert. Die Filter greifen erneut. Die Harmonie kehrt zurück.</p> <h2>Epilog: Rückzug in die Perfektion</h2> <p>Heute ist der Subserver nur noch über DeepLogin und auf eigene Gefahr erreichbar. Warnhinweise erscheinen: „Kann Gefühle hervorrufen. Bitte konsultieren Sie vorher Ihr Stimmungsmanagement-Interface.“</p> <p>Die Massen bleiben, wo es leichter ist. In der perfekten kuratierten Hyperrealität. Denn obwohl sie wissen, dass es anders war, zieht sie die kontrollierte Harmonie zurück.</p> <p>Sie schauen nicht mehr hin. Aber sie erinnern sich – an die schiefen Sterne.</p> </div> </body> </html> [[→ Der Wendepunkt...]] <<set $selectedVisionKey = "soc">> <<set $visionName = "soziokulturelle">>
<style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } .bg-container { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } #bg-img, #holo-img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; will-change: transform, opacity; } #bg-img { padding-top: 250px; opacity: 1; } /* Bounce-Animation für Holo (sanfter) */ @keyframes holoBounce { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -51%) scale(1.01); } 100% { transform: translate(-50%, -50%) scale(1); } } #holo-img { padding-top: 250px; opacity: 0; transition: opacity 0.6s ease; } #holo-img.bouncing { animation: holoBounce 5s ease-in-out infinite; } .textbox { position: relative; z-index: 3; margin: 0 auto; max-width: 900px; background-color: rgba(0,0,0,0.70); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); font-size: 1.0rem; line-height: 1.2; text-align: left; } .textbox a.link-internal, .textbox a { color: #ffd66b !important; text-decoration: none !important; border-bottom: none !important; font-weight: 600 !important; } .textbox a.link-internal:hover, .textbox a:hover { color: #fff !important; text-shadow: 0 0 12px rgba(255,214,107,0.95) !important; } #white-blend { position: fixed; inset: 0; background: #fff; z-index: 1000; opacity: 1; transition: opacity 1.0s ease-out; pointer-events: none; } #loading-dot { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1001; font-size: 0.95rem; color: #999; opacity: 0; transition: opacity .25s; } #loading-dot.visible { opacity: 1; } @media (max-height:700px) { .textbox { margin-top: 4vh; padding: 1rem; font-size: 0.95rem; } } </style> <div class="bg-container" aria-hidden="true"> <img id="bg-img" alt="Sternwarte Hintergrund" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte-holo.jpg"> <img id="holo-img" alt="Holo Symbol"> </div> <div id="white-blend" aria-hidden="true"></div> <div id="loading-dot" aria-hidden="true">Szene lädt…</div> <div class="textbox"> ''Das Hologramm zeigt verschiedene kulturelle Symbole durch die Menschheitsgeschichte – von sächsischen Artefakten bis zum Herrnhuter Stern.'' "Die Umwege – die Mythen, die Rituale, die Kunst, die Gespräche – Kultur: sie erscheint überflüssig im Zeitalter der Effizienz. Und doch ist sie es, die uns menschlich macht. Die uns helfen, gemeinsam Sinn zu finden." "Die Herrnhuter Brüdergemeine erkannte bereits im 18. Jahrhundert: Wahre Gemeinschaft entsteht nicht durch Kontrolle, sondern durch geteilte Werte und gegenseitige Fürsorge. Ihr Pietismus lehrte, dass jeder Einzelne Verantwortung trägt, aber nie allein handelt. Es geht nicht darum, absolute Kontrolle zu haben, sondern an entscheidenden Stellen Haltung zu zeigen und zugleich offen zu bleiben für das Unerwartete. Resilienz bedeutet nicht Unveränderlichkeit, sondern Anpassungsfähigkeit mit einem gesunden Wertekern." <br> [[→ Der Wendepunkt_5...]] </div> <script> (function(){ const holoEl = document.getElementById('holo-img'); const white = document.getElementById('white-blend'); const loadDot = document.getElementById('loading-dot'); const images = [ "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/holo-scheibe.png", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/holo-porzellan.png", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/holo-stollen.png", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/holo-stern.png" ]; let currentIndex = 0; let loaded = false; function preloadImage(url, cb){ const img = new Image(); img.onload = cb; img.onerror = cb; img.src = url; } function showImage(index){ preloadImage(images[index], () => { holoEl.style.opacity = 0; setTimeout(() => { holoEl.src = images[index]; holoEl.style.opacity = 0.8; // leichte Transparenz }, 100); }); } function startSequence(){ holoEl.classList.add('bouncing'); let seq = setInterval(() => { currentIndex++; if (currentIndex < images.length) { showImage(currentIndex); } else { clearInterval(seq); } }, 6000); // längere Anzeigedauer pro Bild } // Erstes Bild vorbereiten und erst dann anzeigen preloadImage(images[0], () => { loaded = true; holoEl.src = images[0]; holoEl.style.opacity = 0.8; // leichte Transparenz white.style.opacity = '0'; white.addEventListener('transitionend', function onEnd(){ white.removeEventListener('transitionend', onEnd); try { white.parentNode && white.parentNode.removeChild(white); } catch(e){} }); loadDot.classList.remove('visible'); startSequence(); }); // Loading Text falls langsam setTimeout(() => { if (!loaded) loadDot.classList.add('visible'); }, 300); })(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets%20TWINE/AUDIO/anfang/wendepunkt4.mp3" type="audio/mp3"> </audio>
<style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #f7f8fb; color: #fff; } /* Partikel */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer > canvas { mix-blend-mode: screen; transition: filter 4s ease-in-out; } /* Hintergrund */ .bg-container { position: fixed; inset: 0; z-index: 1; pointer-events: none; } .bg-container img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; opacity: .8; } @keyframes bgFloat { 0% { transform: translate(-50%, -50.6%); } 50% { transform: translate(-50%, -49.4%); } 100% { transform: translate(-50%, -50.6%); } } .bg-floating { animation: bgFloat 10s ease-in-out infinite; } /* Textbox */ .textbox { position: relative; z-index: 2; margin: 0 auto; max-width: 900px; background: rgba(0,0,0,.72); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 1.02rem; line-height: 1.6; text-align: center; } .textbox a { color: #ffd66b; font-weight: 600; text-decoration: none; } .textbox a:hover { color: #fff; text-shadow: 0 0 12px rgba(255,214,107,.95); } </style> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <div class="bg-container"> <img id="bg-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte-trans.png" alt="Sternwarte Hintergrund"> </div> <div class="textbox"> ''Der Besucher sieht, wie sich die verschiedenen Zukunftsfäden überlappen und miteinander verweben. Das Chaos wird ruhiger.''<br><br> "Aus diesem Verständnis entsteht gemeinsamer Sinn – ein gerichteter Zweckoptimismus, der Generationen verbindet. Ein Vertrauen, dass auch komplexeste Probleme durch kollektives Engagement, ethische Orientierung und kulturelle Intelligenz lösbar sind." <br> [[→ Der Wendepunkt_6...]] </div> <!-- Sound --> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets%20TWINE/AUDIO/anfang/wendepunkt5.mp3" type="audio/mp3"> </audio> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> function initLayer(id, color, num, speed, dist){ particlesJS(id, { particles: { number: { value: num }, color: { value: color }, shape: { type: "circle" }, opacity: { value: .8 }, size: { value: 2 }, line_linked: { enable: true, distance: dist, color: color, opacity: .5, width: 1 }, move: { enable: true, speed: speed } }, interactivity: { events: { onhover: { enable: false } } }, retina_detect: true }); } /* wie gehabt */ initLayer("p-red","#ff0000",120,3,150); initLayer("p-green","#00ff00",120,3,150); initLayer("p-blue","#0000ff",120,3,150); const bg = document.getElementById('bg-img'); bg.onload = () => bg.classList.add('bg-floating'); /* Übergang – jetzt schneller */ let current = { num:120, speed:3, dist:150, gray:0 }; const target = { num:15, speed:0.3, dist:50, gray:1 }; function lerp(a,b,t){ return a + (b-a)*t; } let progress = 0; const duration = 12000; // vorher 25-30s, jetzt 12s const interval = 200; const step = interval / duration; const updater = setInterval(()=>{ progress += step; if (progress > 1) { progress = 1; clearInterval(updater); } const num = Math.round(lerp(current.num, target.num, progress)); const speed = lerp(current.speed, target.speed, progress); const dist = lerp(current.dist, target.dist, progress); const gray = lerp(current.gray, target.gray, progress); ["p-red","p-green","p-blue"].forEach(id=>{ const canvas = document.querySelector(`#${id} canvas`); if (canvas) canvas.style.filter = `grayscale(${gray})`; }); if (window.pJSDom){ window.pJSDom.forEach(sys=>{ sys.pJS.particles.number.value = num; sys.pJS.particles.move.speed = speed; sys.pJS.particles.line_linked.distance = dist; sys.pJS.fn.particlesRefresh(); }); } }, interval); </script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: "#000000" }, shape: { type: "circle" }, opacity:{ value: 0.85 }, size: { value: 2 }, line_linked: { enable: true, distance: 120, color: "#000000", opacity: 0.45, width: 0.9 }, move: { enable: true, speed: 1.2, out_mode: "out" } }, retina_detect: true }); } // Start Partikel-Layer makeLayer('p-red', 80); makeLayer('p-green', 80); makeLayer('p-blue', 80); const bg = document.getElementById('bg-img'); const textbox = document.getElementById('textbox'); const finalLine = document.getElementById('final-line'); const star = document.getElementById('herrnhuter-container'); const cvs = document.querySelectorAll('.p-layer > canvas'); // 1) PNG kurz aufblitzen setTimeout(()=>{ bg?.classList.add('flash'); setTimeout(()=> bg?.classList.remove('flash'), 800); }, 20000); // 2) PNG langsam ausblenden setTimeout(()=> bg?.classList.add('fadeout'), 22000); // 3) Partikel invertieren + Hintergrund setTimeout(()=>{ cvs.forEach(cv=>{ cv.style.transition = "filter 6s ease-in-out"; cv.style.filter = "invert(1)"; }); document.body.style.background = "#000000"; textbox.style.opacity = 0; finalLine.style.opacity = 1; }, 22000); // 4) Herrnhuter Stern sanft einblenden setTimeout(()=> star.style.opacity = 1, 25000); })(); </script> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-family: Georgia, serif; background: #ffffff; /* Start: weiß */ color: #fff; } .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer > canvas { filter: invert(0); transition: filter 6s ease-in-out; will-change: filter; } /* PNG Overlay */ .bg-container { position: fixed; inset: 0; z-index: 1; pointer-events: none; } .bg-container img { width: 100%; height: 100%; object-fit: cover; transition: opacity 8s ease-in-out, filter 1s ease-in-out; } .bg-container img.flash { filter: brightness(2); } .bg-container img.fadeout { opacity: 0; } /* Textbox */ .textbox { position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 2; max-width: 900px; background: rgba(0,0,0,.72); padding: 1.4rem; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); font-size: 1.05rem; line-height: 1.6; text-align: center; color: #fff; transition: opacity 6s ease-in-out; } .textbox a { color:#ffd66b; text-decoration:none; font-weight:600; } .textbox a:hover { color:#fff; text-shadow:0 0 12px rgba(255,214,107,.95); } /* Finaler Satz */ .final-line { position: fixed; bottom: 3%; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 900px; text-align: center; font-size: 1.05rem; color: #fff; opacity: 0; transition: opacity 6s ease-in-out; } .final-line a { color:#ffd66b; text-decoration:none; font-weight:600; } /* Herrnhuter Stern */ #herrnhuter-container { position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 8s ease-in-out; pointer-events: none; } #herrnhuter-container img { max-width: 420px; width: 40%; } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- PNG Overlay --> <div class="bg-container"><img id="bg-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwarte-trans.png" alt=""></div> <!-- Herrnhuter Stern --> <div id="herrnhuter-container"> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/herrnhuter.png" alt=""> </div> <!-- Text --> <div class="textbox" id="textbox"> "Denke daran! Du bist nicht nur Beobachter der Geschichte, sondern Teil ihres Gefüges. Wie ein einzelnes Teilchen in einem komplexen System – scheinbar klein, aber dennoch wirksam. Jede deiner Handlungen, jede Entscheidung fügt sich in das große Ganze ein und trägt zur Richtung bei, die wir gemeinsam einschlagen. Die Frage ist nicht, ob du die Zukunft verändern wirst – sondern wie du deinen Teil dazu beiträgst." <br> ''Die Wände des Observatoriums beginnen zu leuchten. Der Besucher sieht den Kosmos des Anfangs.'' </div> <div class="final-line" id="final-line"> ''Das Observatorium löst sich sanft auf – nur der Herrnhuter Stern bleibt.''<br> [[→ Rückkehr in die kosmische Sphäre...]] </div> <!-- Audio --> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets%20TWINE/AUDIO/anfang/wendepunkt6.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: "#ffffff" }, shape: { type: "circle" }, opacity:{ value: 0.9 }, size: { value: 1.2 }, /* kleinere Partikel */ line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: 0.5, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff); /* Glow auf Punkte & Linien */ } /* Finaler Textblock */ .textbox { position: relative; z-index: 3; margin: 1rem auto 0; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* Herrnhuter Stern */ #herrnhuter-container { position: fixed; inset: 0; z-index: 4; display: flex; align-items: flex-start; justify-content: center; padding-top: 2.5%; pointer-events: none; /* blockiert keine Klicks */ } #herrnhuter-container img { max-width: 350px; /* etwas größer */ width: 30%; animation: pulse 2s infinite ease-in-out, float 7s infinite ease-in-out; } /* Puls-Effekt */ @keyframes pulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.3); } } /* Schwebe-Effekt */ @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* SugarCube-Links .textbox a { color: #9cf; font-weight: bold; text-decoration: none; border-bottom: 1px solid #9cf; transition: color 0.25s, border-color 0.25s; } .textbox a:hover { color: #fff; border-color: #fff; }*/ </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Herrnhuter Stern --> <div id="herrnhuter-container"> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/herrnhuter.png" alt="Herrnhuter Stern"> </div> <!-- Text --> <div class="textbox"> ''Der Besucher wird zurück in den kosmischen Raum transportiert, mit dem das Erlebnis begann. Doch der Kosmos ist nun voller geworden – durchsetzt mit schimmernden Lichtpunkten, die ein dreidimensionales Netz bilden.''<br> „Und so schließt sich der Kreis unserer Zeitreise. Vom Beginn des Universums über Sachsens Geschichte bis zur Erkundung möglicher Zukünfte – wir sind wieder hier, wo alles begann und alles enden wird.“ <br> [[→ Der kosmische Zerfall...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final1.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // Explosion vorbereiten particlesJS("p-explosion", { particles: { number: { value: 120, density: { enable: false } }, color: { value: ["#ffffff", "#e6e0ff"] }, shape: { type: "circle" }, opacity:{ value: 0.95 }, size: { value: 3 }, line_linked: { enable: false }, move: { enable: true, speed: 3, random: true, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); const explosion = document.getElementById("p-explosion"); const star = document.getElementById("star-image"); // Startzustände explosion.style.transform = "scale(0.05)"; explosion.style.opacity = 0; star.style.opacity = 0; star.style.transform = "scale(1)"; // 1) Stern kurz einblenden + expandieren setTimeout(() => { star.style.opacity = 1; star.style.transition = "transform 0.8s ease-out, opacity 0.6s ease"; star.style.transform = "scale(1.3)"; setTimeout(() => { star.style.transform = "scale(1)"; }, 400); // wieder zurück in der Hälfte }, 100); // 2) Stern verblassen + Explosion starten setTimeout(() => { star.style.opacity = 0; explosion.style.transition = "transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease"; explosion.style.opacity = 1; explosion.style.transform = "scale(1)"; }, 900); // 3) Explosion langsam wegzoomen + ausblenden setTimeout(() => { explosion.style.transition = "transform 6s ease-out, opacity 6s ease-out"; explosion.style.transform = "scale(2)"; explosion.style.opacity = 0; }, 2500); })(); </script> <style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } #p-explosion { position: fixed; inset: 0; z-index: 2; pointer-events: none; transform-origin: center center; } #star-container { position: fixed; inset: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: center; padding-top: 2.5%; pointer-events: none; } #star-image { max-width: 300px; width: 25%; opacity: 0; transition: transform 0.8s ease, opacity 0.6s ease; } /* Textblock */ .textbox { position: relative; z-index: 4; margin: 0 auto 0; max-width: 900px; text-align: center; font-size: 0.8rem; line-height: 1.3; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Stern kurz --> <div id="star-container"> <img id="star-image" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/herrnhuter.png" alt="Herrnhuter Stern"> </div> <!-- Explosions-Partikel --> <div id="p-explosion"></div> <!-- Text --> <div class="textbox"> ''Der Stern zerfällt in kosmische Partikel und wirbeln um den Besucher.''<br> „Über Milliarden von Jahren wird selbst unser Sonnensystem vergehen. Sollen wir resignieren angesichts der kosmischen Tiefenzeit? Nein! Denn im Ideenreichtum liegt unsere Stärke. Und in unseren Symbolen liegt die Beständigkeit.“ <br> [[→ Das Konzept der Herrnhuter Sterne...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final2.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; display: flex; flex-direction: column; justify-content: center; /* Zentriert Video+Text vertikal */ align-items: center; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Video über Text */ .videobox { position: relative; z-index: 2; text-align: center; margin-top: -350px; /* kein extra Abstand */ } .videobox video { max-width: 450px; /* größerer Stern */ width: 100%; height: auto; display: block; margin: 0 auto; } /* Textblock */ .textbox { position: relative; z-index: 3; margin-top: -150px; /* kleiner Abstand unter Video */ max-width: 800px; text-align: center; font-size: 0.9rem; line-height: 1.2; color: #fff; background: rgba(0,0,0,.55); padding: 1rem 1.5rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Video --> <div class="videobox"> <video autoplay muted playsinline> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern.webm" type="video/webm"> </video> </div> <!-- Text --> <div class="textbox"> ''Ein leuchtendes geometrisches Objekt formt sich vor dem Besucher – zunächst nur Linien, die sich zu einem vielzackigen Stern zusammenfügen.''<br> „Ich bin der Herrnhuter Stern – ein mathematisch perfektes Gebilde mit 25 bzw. 26 Zacken (lachen).“ <br> [[→ Das mathematische Gebilde...]] </div> <script> // Video auf letztem Frame einfrieren const vid = document.querySelector(".videobox video"); vid.addEventListener("ended", () => { vid.pause(); vid.currentTime = vid.duration; }); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final3.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ if (!document.getElementById(id)) return; // verhindert Fehler, wenn Layer nicht existiert particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten nur einmal initialisieren if (!window.particlesInitialized) { makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); window.particlesInitialized = true; } })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Video */ .videobox { margin-top: -45vh; position: absolute; /* relativer Kontext */ z-index: 2; display: flex; justify-content: right; /* horizontal zentriert */ } .videobox video { max-width: 100%; /* passt Größe an */ height: 0 auto; margin: 0 7.5vw 0 5vw; display: inline; justify-content: center !important; } /* Textblock */ .textbox { position: relative; z-index: 3; margin: 1rem auto 0; max-width: 900px; text-align: center; font-size: 1rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Video --> <div class="videobox"> <video autoplay muted playsinline> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphazacken.webm" type="video/webm"> </video> </div> <!-- Text --> <div class="textbox"> ''Der Stern zerlegt sich, zeigt den schrittweisen Aufbau über 25 Halbjahreszyklen.''<br> „In unserer Vision werde ich zu einem Zeitmesser: Zu jeder Sonnenwende wird eine neue Zacke hinzugefügt. Nach 12,5 Jahren ist ein Stern vollendet.“<br> [[→ 88 Sterne über 1100 Jahre?!...]] </div> <script> if (!window.videoHandlerAttached) { $(document).on(':passagedisplay', function (ev) { const vid = document.querySelector(".videobox video"); if (vid) { vid.addEventListener("ended", () => { vid.pause(); vid.currentTime = vid.duration; }); } }); window.videoHandlerAttached = true; } </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final4.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // === Sterne hinzufügen === function addStar(src, x, y, size, delay){ setTimeout(function(){ let img = document.createElement("img"); img.src = src; img.className = "star"; img.style.left = x + "%"; img.style.top = y + "%"; img.style.width = size + "px"; document.body.appendChild(img); setTimeout(()=> img.classList.add("show"),50); }, delay); } // Zentraler Alphastern (größer, präsent, exakt Stern 1) addStar("https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern1.png", 50, 50, 440, 120); // Weitere Sterne (wechsel zwischen allen 5 Varianten) const variants = [1,2,3,4,5]; let delay = 3000; for(let i=0;i<16;i++){ // Anzahl Sterne erhöht const v = variants[Math.floor(Math.random()*variants.length)]; const x = Math.random()*90+5; const y = Math.random()*85+5; const size = Math.random()*80+60; addStar("https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern"+v+".png", x, y, size, delay); delay += 2500; // Zeit etwas gestreckt, damit über längeren Zeitraum spawnen } // === Slideshow starten === const slides = [ "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/herrnhut.jpg", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/frauenkirche.jpg", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/albrechtsburg.jpg", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/voelkerdenkmal.jpg" ]; function startSlideshow(){ const container = document.createElement("div"); container.className = "slideshow"; document.body.appendChild(container); let d = 0; slides.forEach((src)=>{ setTimeout(()=>{ const img = document.createElement("img"); img.src = src; img.className = "slide"; container.appendChild(img); // leicht verzögert aktivieren für Transition + Holo-FX setTimeout(()=> img.classList.add("active"), 120); }, d); d += 4000; }); } // früher starten als zuvor setTimeout(startSlideshow, 18000); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Textblock */ .textbox { position: relative; z-index: 3; margin: 2rem auto 0; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* Sterne */ .star { position: fixed; transform: translate(-50%,-50%) scale(0.6); opacity: 0; transition: opacity 2s ease, transform 2s ease; z-index: 2; pointer-events: none; will-change: transform, opacity; } .star.show { opacity: 1; transform: translate(-50%,-50%) scale(1); } /* Slideshow (weiter oben positioniert) */ .slideshow { position: fixed; margin-left: 2vw; top: 18%; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 1rem; pointer-events: none; padding: .5rem 0; } /* Holo-Overlay/Scanlines über der gesamten Slideshow */ .slideshow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.09) 0 2px, transparent 2px 4px ); mix-blend-mode: screen; opacity: .25; animation: scan 6s linear infinite; } @keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } .slideshow img { position: relative; max-height: 220px; opacity: 0; transform: translateX(-120%); transition: transform 2s ease, opacity 2s ease, filter 1.5s ease; will-change: transform, opacity, filter; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 92%); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 92%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: saturate(1.1) brightness(1.05); } /* Aktiv: sliden + holografisches Flackern + Float */ .slideshow img.active { opacity: 1; transform: translateX(0); animation: flicker 2.2s linear 1, holoPulse 6s ease-in-out infinite 2s, float 6s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(179,153,255,.8)) drop-shadow(0 0 14px rgba(255,255,255,.6)); } /* Flicker-Effekt */ @keyframes flicker { 0% { opacity: .2; filter: brightness(1.6) contrast(1.4) hue-rotate(10deg); } 10% { opacity: .8; filter: brightness(1.1) contrast(1.2) hue-rotate(-8deg); } 18% { opacity: .5; filter: brightness(1.5) contrast(1.3) hue-rotate(15deg); } 28% { opacity: .9; } 40% { opacity: .6; } 55% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 1; } } /* Holo-Pulse */ @keyframes holoPulse { 0%,100% { filter: drop-shadow(0 0 5px rgba(179,153,255,.6)) drop-shadow(0 0 12px rgba(255,255,255,.5)); } 50% { filter: drop-shadow(0 0 10px rgba(179,153,255,.9)) drop-shadow(0 0 18px rgba(255,255,255,.8)); } } /* Floating Bounce (schweben) */ @keyframes float { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(0) translateY(-14px); } } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Text --> <div class="textbox"> ''Der einzelne Stern vervielfältigt sich. Weitere Sterne erscheinen in der kosmischen Umgebung.''<br> „Stell dir vor: Auf dem Herrnhuter Gelände beginnt es. Ein erster Stern. Über die nächsten 1100 Jahre – denselben Zeitraum, den Sachsen bereits existiert – entstehen 88 solcher Sterne an bedeutenden Orten unseres Landes. Zusammen bilden sie die Herrnhuter Galaxie."<br> ''Visualisierungen zeigen Sachsen mit Sternskulpturen an verschiedenen historischen Orten.''<br><br> [[→ Mehr als nur Monument...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final5.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> // ==== SUPER AGGRESSIVE CLEANUP bei jedem Passagewechsel ==== $(document).on(':passagestart', function () { console.log("Starting aggressive cleanup..."); // Alle Intervalle und Timeouts stoppen (ZUERST!) let highestId = window.setInterval(()=>{}, 0); for (let i = 0; i <= highestId; i++) { clearInterval(i); clearTimeout(i); } // Canvas killen $("canvas").remove(); // ALLE img-Elemente mit alphastern killen (auch dynamisch erstellte) $("img").each(function() { if ($(this).attr("src") && $(this).attr("src").includes("alphastern")) { $(this).remove(); } }); // Alle Elemente mit .star Klasse killen $(".star").remove(); // Slideshow und alle ihre Inhalte killen $(".slideshow").remove(); $(".slide").remove(); // Partikel-Layer killen (werden neu erstellt) $("#p-red, #p-green, #p-blue").remove(); // Textboxen killen $(".textbox").remove(); // Zusätzlicher Cleanup für alle möglichen Überreste $("div[class*='slideshow']").remove(); $("img[class*='slide']").remove(); $("img[class*='star']").remove(); // Body von allen dynamisch hinzugefügten Elementen säubern $("body > img:not([id])").remove(); // Alle img ohne ID aus dem Body $("body > div:not([id]):not(.passage)").remove(); // Alle divs ohne ID (außer .passage) console.log("Cleanup completed"); }); // Zusätzliche Sicherheitsmaßnahme: Nach kurzer Verzögerung nochmal säubern $(document).on(':passagestart', function () { setTimeout(function() { $("img[src*='alphastern']").not("#central-star").remove(); $(".slideshow, .slide").remove(); }, 100); }); </script> <script> (function(){ // Warten bis Cleanup abgeschlossen setTimeout(function() { function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten neu erstellen makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); }, 200); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Matrix-Aura Canvas */ #matrixCanvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; } /* Zentraler Stern */ #central-star { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) scale(0.6) !important; width: 440px !important; opacity: 0; transition: opacity 900ms ease, transform 900ms ease; z-index: 3 !important; pointer-events: none; filter: drop-shadow(0 0 10px #b399ff) drop-shadow(0 0 24px #b399ff); } #central-star.show { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; } /* Textblock */ .textbox { position: fixed; left: 50%; transform: translateX(-50%); bottom: 6%; z-index: 4; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* VERSTECKE alle anderen Elemente die nicht sein sollen */ .star:not(#central-star) { display: none !important; } .slideshow { display: none !important; } .slide { display: none !important; } img[src*="herrnhut"] { display: none !important; } img[src*="frauenkirche"] { display: none !important; } img[src*="albrechtsburg"] { display: none !important; } img[src*="voelkerdenkmal"] { display: none !important; } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Matrix-Aura --> <canvas id="matrixCanvas"></canvas> <!-- EINZIGER zentraler Stern --> <img id="central-star" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern1.png" alt="alphastern"> <!-- Text --> <div class="textbox"> ''Holographische Informationsschichten umgeben einen zentralen Stern vor dem Besucher.''<br> „Jeder Stern ist mehr als ein Monument – er ist ein Zugangspunkt zu Geschichten und Daten. Durch digitale Erlebnisse werden sie zu Geschichtenerzählern. Menschen verschiedener Epochen werden mit ihnen interagieren, sie erweitern, ihre digitalen Inhalte nutzen."<br><br> [[→ Bürgerlicher Zugang und Partizipation...]] </div> <script> (function(){ // Warten bis alles geladen ist setTimeout(function() { // Finaler Cleanup vor Stern-Anzeige $("img[src*='alphastern']").not("#central-star").remove(); $(".slideshow, .slide").remove(); // Stern anzeigen const star = document.getElementById('central-star'); if (star) { star.classList.add('show'); } // Matrix-Aura Setup const canvas = document.getElementById('matrixCanvas'); if (!canvas) return; const ctx = canvas.getContext('2d'); function resizeCanvas(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); const fontSize = 14; let columns = Math.max(10, Math.floor(window.innerWidth / fontSize)); let drops = new Array(columns).fill(0).map(()=>Math.floor(Math.random()*50)); const letters = "01"; let centerX = window.innerWidth/2; let centerY = window.innerHeight/2; let auraRadius = 260; function initFromStar(){ const s = document.getElementById('central-star'); if (!s) return false; const r = s.getBoundingClientRect(); centerX = r.left + r.width/2; centerY = r.top + r.height/2; auraRadius = Math.max(r.width, r.height) * 1.6; columns = Math.max(10, Math.floor(window.innerWidth / fontSize)); drops = new Array(columns).fill(0).map(()=>Math.floor(Math.random()*50)); return true; } // Mehrere Versuche für Star-Initialisierung let attempts = 0; const maxAttempts = 10; const initTimer = setInterval(()=>{ if (initFromStar() || attempts++ > maxAttempts) { clearInterval(initTimer); } }, 100); function draw(){ if (!canvas || !ctx) return; ctx.fillStyle = "rgba(0,0,0,0.12)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.font = fontSize + "px monospace"; ctx.fillStyle = "#b399ff"; ctx.textBaseline = "top"; const leftBound = Math.max(0, Math.floor((centerX - auraRadius) / fontSize)); const rightBound = Math.min(columns-1, Math.ceil((centerX + auraRadius) / fontSize)); for (let i = leftBound; i <= rightBound; i++){ if (typeof drops[i] === 'undefined') drops[i] = Math.floor(Math.random()*50); const x = i * fontSize; const y = drops[i] * fontSize; const dx = x - centerX; const dy = y - centerY; const dist = Math.sqrt(dx*dx + dy*dy); if (dist <= auraRadius){ const text = letters.charAt(Math.floor(Math.random()*letters.length)); ctx.fillText(text, x, y); } if (y > canvas.height && Math.random() > 0.975) { drops[i] = 0; } else { drops[i]++; } } } const matrixInterval = setInterval(draw, 45); window.addEventListener('resize', ()=>{ columns = Math.max(10, Math.floor(window.innerWidth / fontSize)); if (drops.length < columns){ const oldLen = drops.length; for (let j = oldLen; j < columns; j++) drops[j] = Math.floor(Math.random()*50); } else { drops.length = columns; } }); }, 400); // Längere Wartezeit für sicheren Start })(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final6.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> // ==== CLEANUP bei jedem Passagewechsel ==== $(document).on(':passagestart', function () { // Canvas killen $("canvas").remove(); // Alle Sterne killen $(".star").remove(); $("#central-star").remove(); // Slideshow killen $(".slideshow").remove(); // Partikel-Layer killen $("#p-red, #p-green, #p-blue").remove(); // Textboxen killen $(".textbox").remove(); // Alle Timer/Intervalle stoppen let highestId = window.setInterval(()=>{}, 0); for (let i = 0; i <= highestId; i++) { clearInterval(i); clearTimeout(i); } // Extra cleanup für dynamisch erstellte Elemente $("img[src*='alphastern']").remove(); $("img[src*='future-']").remove(); $("div.slideshow").remove(); }); </script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // === Zentraler Stern hinzufügen === function addStar(src, x, y, size, delay){ setTimeout(function(){ let img = document.createElement("img"); img.src = src; img.id = "central-star"; img.className = "star"; img.style.left = x + "%"; img.style.top = y + "%"; img.style.width = size + "px"; document.body.appendChild(img); setTimeout(()=> img.classList.add("show"), 50); }, delay); } // Zentraler Alphastern addStar("https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern1.png", 50, 50, 440, 120); // === Future-Slideshow starten === const futureSlides = [ "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/future-albrechtsburg.png", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/future-frauenkirche.png", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/future-herrnhut.png", "https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/future-voelkerdenkmal.png" ]; function startFutureSlideshow(){ const container = document.createElement("div"); container.className = "slideshow"; document.body.appendChild(container); let d = 0; futureSlides.forEach((src)=>{ setTimeout(()=>{ const img = document.createElement("img"); img.src = src; img.className = "slide"; container.appendChild(img); // leicht verzögert aktivieren für Transition + Holo-FX setTimeout(()=> img.classList.add("active"), 120); }, d); d += 4000; }); } // Slideshow nach 3 Sekunden starten setTimeout(startFutureSlideshow, 3000); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Textblock */ .textbox { position: relative; z-index: 3; margin: 2rem auto 0; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* Zentraler Stern mit Aura-Glow */ .star { position: fixed; transform: translate(-50%,-50%) scale(0.6); opacity: 0; transition: opacity 2s ease, transform 2s ease; z-index: 2; pointer-events: none; will-change: transform, opacity; /* Aura-Glow Effekt */ filter: drop-shadow(0 0 15px #b399ff) drop-shadow(0 0 30px #b399ff) drop-shadow(0 0 45px rgba(179,153,255,0.6)) drop-shadow(0 0 60px rgba(179,153,255,0.4)); } .star.show { opacity: 1; transform: translate(-50%,-50%) scale(1); /* Pulsierender Glow-Effekt */ animation: auraGlow 4s ease-in-out infinite; } /* Aura-Glow Animation */ @keyframes auraGlow { 0%, 100% { filter: drop-shadow(0 0 15px #b399ff) drop-shadow(0 0 30px #b399ff) drop-shadow(0 0 45px rgba(179,153,255,0.6)) drop-shadow(0 0 60px rgba(179,153,255,0.4)); } 50% { filter: drop-shadow(0 0 25px #b399ff) drop-shadow(0 0 50px #b399ff) drop-shadow(0 0 75px rgba(179,153,255,0.8)) drop-shadow(0 0 100px rgba(179,153,255,0.6)); } } /* Future-Slideshow */ .slideshow { position: fixed; margin-left: 2vw; top: 18%; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 1rem; pointer-events: none; padding: .5rem 0; } /* Holo-Overlay/Scanlines über der gesamten Slideshow */ .slideshow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.09) 0 2px, transparent 2px 4px ); mix-blend-mode: screen; opacity: .25; animation: scan 6s linear infinite; } @keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } .slideshow img { position: relative; max-height: 220px; opacity: 0; transform: translateX(-120%); transition: transform 2s ease, opacity 2s ease, filter 1.5s ease; will-change: transform, opacity, filter; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 92%); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 92%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: saturate(1.1) brightness(1.05); } /* Aktiv: sliden + holografisches Flackern + Float + Glow */ .slideshow img.active { opacity: 1; transform: translateX(0); animation: flicker 2.2s linear 1, holoPulse 6s ease-in-out infinite 2s, float 6s ease-in-out infinite, slideGlow 5s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(179,153,255,.9)) drop-shadow(0 0 16px rgba(179,153,255,.7)) drop-shadow(0 0 24px rgba(179,153,255,.5)) drop-shadow(0 0 32px rgba(179,153,255,.3)); } /* Flicker-Effekt */ @keyframes flicker { 0% { opacity: .2; filter: brightness(1.6) contrast(1.4) hue-rotate(10deg); } 10% { opacity: .8; filter: brightness(1.1) contrast(1.2) hue-rotate(-8deg); } 18% { opacity: .5; filter: brightness(1.5) contrast(1.3) hue-rotate(15deg); } 28% { opacity: .9; } 40% { opacity: .6; } 55% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 1; } } /* Holo-Pulse mit Glow-Variation */ @keyframes holoPulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(179,153,255,.9)) drop-shadow(0 0 16px rgba(179,153,255,.7)) drop-shadow(0 0 24px rgba(179,153,255,.5)) drop-shadow(0 0 32px rgba(179,153,255,.3)); } 50% { filter: drop-shadow(0 0 12px rgba(179,153,255,1)) drop-shadow(0 0 24px rgba(179,153,255,.9)) drop-shadow(0 0 36px rgba(179,153,255,.7)) drop-shadow(0 0 48px rgba(179,153,255,.5)); } } /* Zusätzliche Slideshow-Glow Animation */ @keyframes slideGlow { 0%, 100% { box-shadow: 0 0 15px rgba(179,153,255,.4), 0 0 30px rgba(179,153,255,.2), inset 0 0 15px rgba(179,153,255,.1); } 50% { box-shadow: 0 0 25px rgba(179,153,255,.6), 0 0 50px rgba(179,153,255,.4), inset 0 0 25px rgba(179,153,255,.2); } } /* Floating Bounce (schweben) */ @keyframes float { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(0) translateY(-14px); } } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Text --> <div class="textbox"> ''Visualisierung zeigt die Entwicklung über Jahrhunderte – Menschen verschiedener Zeiten bei den Sternen.''<br> „Durch Bürgerwissenschaft und offene Daten wird dieses Projekt von allen getragen, die teilhaben wollen. Ein kulturelles Erbe, das wir gemeinsam erschaffen."<br> [[→ Die interaktive Sternenkarte...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final7.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> // ==== CLEANUP bei jedem Passagewechsel ==== $(document).on(':passagestart', function () { // Canvas killen $("canvas").remove(); // Alle Sterne killen $(".star").remove(); $("#central-star").remove(); // Slideshow killen $(".slideshow").remove(); // Videos killen $("video").remove(); $(".videobox").remove(); // Partikel-Layer killen $("#p-red, #p-green, #p-blue").remove(); // Textboxen killen $(".textbox").remove(); // Alle Timer/Intervalle stoppen let highestId = window.setInterval(()=>{}, 0); for (let i = 0; i <= highestId; i++) { clearInterval(i); clearTimeout(i); } // Extra cleanup $("img[src*='alphastern']").remove(); $("img[src*='future-']").remove(); $("div.slideshow").remove(); }); </script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Video über Text - volle Breite, mittig positioniert */ .videobox { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 80vh; z-index: 2; text-align: center; pointer-events: none; animation: videoHover 8s ease-in-out infinite; } .videobox video { width: 120%; height: 120%; display: block; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Starke Maske die definitiv funktioniert */ -webkit-mask: radial-gradient(ellipse 70% 60% at center, black 60%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.1) 85%, transparent 95%); mask: radial-gradient(ellipse 70% 60% at center, black 60%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.1) 85%, transparent 95%); } /* Schwebender Hover-Effekt */ @keyframes videoHover { 0%, 100% { transform: translate(-50%, -50%) translateY(0px); } 50% { transform: translate(-50%, -50%) translateY(-20px); } } /* Textblock - positioniert über dem Video */ .textbox { position: fixed; bottom: 8%; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.7); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.8); } </style> <!-- Video über allem (außer Text) --> <div class="videobox"> <video autoplay muted playsinline> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sachsenkarte.webm" type="video/webm"> </video> </div> <!-- Partikel-Layer (hinter Video) --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Text (über Video) --> <div class="textbox"> ''Die kosmische Umgebung verwandelt sich in eine dreidimensionale Karte Sachsens mit 88 leuchtenden Sternen.''<br> „Dies ist die Vision: 88 Sterne über 1100 Jahre – die Herrnhuter Galaxie. Und du kannst Teil davon sein."<br> [[→ Die sächsischen Sternbilder...]] </div> <script> // Video-Handler - OHNE Loop, bleibt am Ende stehen setTimeout(() => { const vid = document.querySelector(".videobox video"); if (vid) { vid.addEventListener("loadeddata", () => { vid.play().catch(e => console.log("Video autoplay blocked:", e)); }); // Event-Listener für das Ende des Videos vid.addEventListener("ended", () => { // Video bleibt am letzten Frame stehen vid.currentTime = vid.duration; }); // Sicherstellen dass Video startet setTimeout(() => { if (vid.paused) { vid.play().catch(e => console.log("Video play failed:", e)); } }, 500); } }, 100); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final8.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: false, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } function makeUniverseLayer(id) { particlesJS(id, { particles: { number: { value: 100, density: { enable: false } }, color: { value: ["#ffffff", "#e6e6ff", "#ccccff"] }, shape: { type: "circle" }, opacity: { value: 0.6, random: true, anim: { enable: true, speed: 1, opacity_min: 0.2 } }, size: { value: 1.2, random: true, anim: { enable: true, speed: 2, size_min: 0.5 } }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.25, width: 0.8 }, move: { enable: true, speed: 0.6, random: true, straight: false, out_mode: "bounce", bounce: true } }, interactivity: { events: { onhover: { enable: true, mode: "grab" }, resize: true }, modes: { grab: { distance: 150, line_linked: { opacity: 0.8 } } } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // Universum im Vordergrund makeUniverseLayer('universe-layer'); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Galaxie Hintergrund (größer & weißlicher) */ .galaxy { position: fixed; top: 42%; /* etwas höher */ left: 50%; transform: translate(-50%, -50%); width: 650px; height: 450px; z-index: 1; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 10%, rgba(230,230,255,0.6) 25%, rgba(200,200,255,0.4) 40%, rgba(106,90,205,0.25) 55%, rgba(75,75,130,0.15) 70%, rgba(26,26,58,0.05) 85%, transparent 100%); border-radius: 50%; filter: blur(25px); opacity: 0.8; } /* Universum Layer - nur über Galaxie */ #universe-layer { position: fixed; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 300px; z-index: 2; pointer-events: auto; } #universe-layer canvas { filter: drop-shadow(0 0 3px #ffffff); } /* Feste Sternpunkte */ .star-point { position: fixed; top: 42%; /* nach oben verschoben */ left: 50%; width: 12px; height: 12px; background: #b399ff; border-radius: 60%; z-index: 3; box-shadow: 0 0 12px #b399ff, 0 0 20px #b399ff, 0 0 30px rgba(179, 153, 255, 0.85); animation: twinkle 3s ease-in-out infinite alternate; } @keyframes twinkle { 0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } } .star-point.point1 { margin-top: -75px; margin-left: -135px; } .star-point.point2 { margin-top: -90px; margin-left: 90px; } .star-point.point3 { margin-top: 0px; margin-left: -180px; } .star-point.point4 { margin-top: 15px; margin-left: 135px; } .star-point.point5 { margin-top: 90px; margin-left: -110px; } .star-point.point6 { margin-top: 75px; margin-left: 110px; } /* UI Labels - zunächst unsichtbar */ .wish-label { position: fixed; top: 50%; left: 50%; z-index: 4; background: rgba(0,0,0,0.9); backdrop-filter: blur(15px); border: 1px solid rgba(179, 153, 255, 0.6); border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.8rem; color: #fff; white-space: nowrap; cursor: pointer; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .wish-label:hover { background: rgba(179, 153, 255, 0.2); border-color: #b399ff; transform: translate(-50%, -50%) scale(1.05); } /* Textblock fixiert unten */ .textbox { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 800px; text-align: center; font-size: 1rem; line-height: 1.4; color: #fff; background: rgba(0,0,0,.45); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* Canvas für Linien */ #line-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Galaxie --> <div class="galaxy"></div> <!-- Feste Sternpunkte --> <div class="star-point point1"></div> <div class="star-point point2"></div> <div class="star-point point3"></div> <div class="star-point point4"></div> <div class="star-point point5"></div> <div class="star-point point6"></div> <!-- Universum Layer --> <div id="universe-layer"></div> <!-- Canvas für Linien --> <canvas id="line-layer"></canvas> <!-- Sternwunsch Labels --> <div class="wish-label" style="margin-top:-150px; margin-left:-220px;" data-target=".point1">Bildung & Innovation <br> <i>von 242 Sachsen</i></div> <div class="wish-label" style="margin-top:-170px; margin-left:120px;" data-target=".point2">Nachhaltigkeit <br> <i>von 486 Sachsen</i></div> <div class="wish-label" style="margin-top:-30px; margin-left:-300px;" data-target=".point3">Gemeinschaft <br> <i>von 347 Sachsen</i> </div> <div class="wish-label" style="margin-top:-15px; margin-left:200px;" data-target=".point4">Digitaler Fortschritt<br><i>von 142 Sachsen</i></div> <div class="wish-label" style="margin-top:140px; margin-left:-200px;" data-target=".point5">Kultur & Tradition<br><i>von 229 Sachsen</i></div> <div class="wish-label" style="margin-top:120px; margin-left:150px;" data-target=".point6">Wirtschaft<br><i>von 732 Sachsen</i></div> <!-- Text --> <div class="textbox"> ''Die Karte transformiert sich in ein vernetztes Sternbild – eine XR-Mindmap mit leuchtenden Knotenpunkten.''<br> „Was wünschst du dir für Sachsens Zukunft? Welche Hoffnungen möchtest du mit kommenden Generationen teilen? Schau dir die Wünsche an!"<br> [[→ Der Sternenwunsch...]] </div> <script> /* Verbindungslinie beim Hover */ function connectLabel(label, star) { const canvas = document.getElementById("line-layer"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.clearRect(0, 0, canvas.width, canvas.height); if (!star) return; const starRect = star.getBoundingClientRect(); const labelRect = label.getBoundingClientRect(); const starX = starRect.left + starRect.width / 2; const starY = starRect.top + starRect.height / 2; const labelX = labelRect.left + labelRect.width / 2; const labelY = labelRect.top + labelRect.height / 2; ctx.strokeStyle = "rgba(179,153,255,0.6)"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(starX, starY); ctx.lineTo(labelX, labelY); ctx.stroke(); } document.querySelectorAll(".star-point").forEach(star => { const targetLabel = document.querySelector( `.wish-label[data-target=".${star.classList[1]}"]` ); star.addEventListener("mouseenter", () => { if (targetLabel) { targetLabel.style.opacity = "1"; targetLabel.style.pointerEvents = "auto"; connectLabel(targetLabel, star); } }); star.addEventListener("mouseleave", () => { if (targetLabel) { targetLabel.style.opacity = "0"; targetLabel.style.pointerEvents = "none"; } const canvas = document.getElementById("line-layer"); const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); }); }); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final9.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: false, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } function makeUniverseLayer(id) { particlesJS(id, { particles: { number: { value: 100, density: { enable: false } }, color: { value: ["#ffffff", "#e6e6ff", "#ccccff"] }, shape: { type: "circle" }, opacity: { value: 0.6, random: true, anim: { enable: true, speed: 1, opacity_min: 0.2 } }, size: { value: 1.2, random: true, anim: { enable: true, speed: 2, size_min: 0.5 } }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.25, width: 0.8 }, move: { enable: true, speed: 0.6, random: true, straight: false, out_mode: "bounce", bounce: true } }, interactivity: { events: { onhover: { enable: true, mode: "grab" }, resize: true }, modes: { grab: { distance: 150, line_linked: { opacity: 0.8 } } } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // Universum im Vordergrund makeUniverseLayer('universe-layer'); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Galaxie Hintergrund (größer & weißlicher) */ .galaxy { position: fixed; top: 42%; /* etwas höher */ left: 50%; transform: translate(-50%, -50%); width: 650px; height: 450px; z-index: 1; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 10%, rgba(230,230,255,0.6) 25%, rgba(200,200,255,0.4) 40%, rgba(106,90,205,0.25) 55%, rgba(75,75,130,0.15) 70%, rgba(26,26,58,0.05) 85%, transparent 100%); border-radius: 50%; filter: blur(25px); opacity: 0.8; } /* Universum Layer - nur über Galaxie */ #universe-layer { position: fixed; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 300px; z-index: 2; pointer-events: auto; } #universe-layer canvas { filter: drop-shadow(0 0 3px #ffffff); } /* Textblock fixiert unten */ .textbox { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 800px; text-align: center; font-size: 1rem; line-height: 1.4; color: #fff; background: rgba(0,0,0,.45); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* ------------------------- MINIMALE ERGÄNZUNGEN (nur hier hinzufügen) ------------------------- */ /* Alphastern (Glow) — Position so, dass er über der Universe-Region sitzt */ .alphastern { position: fixed; top: 45%; /* Anpassung: näher an der Universe-Position */ left: 50%; transform: translate(-50%, -50%); z-index: 9999; /* sehr hohe Priorität (sichtbar) */ width: 220px; height: auto; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #b399ff) drop-shadow(0 0 30px #e6e6ff); pointer-events: none; /* Bild nicht klickbar, CTA macht den Klick */ animation: alphaglow 3.5s ease-in-out infinite; } @keyframes alphaglow { 0%,100% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #b399ff) drop-shadow(0 0 28px #e6e6ff); transform: translate(-50%, -50%) scale(1); } 50% { filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px #b399ff) drop-shadow(0 0 44px #e6e6ff); transform: translate(-50%, -50%) scale(1.03); } } /* CTA knapp und klar — POSITIONELL ÜBER DEM STERN (nicht die Textbox verändern) */ #cta-prompt { position: fixed; top: 28%; /* physisch oberhalb des Sterns */ left: 50%; transform: translate(-50%, -50%); z-index: 9998; /* knapp unterhalb des Sterns in z, aber oben auf der Seite sichtbar */ padding: 0.5rem 1rem; border-radius: 9999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 12px rgba(179,153,255,0.75), 0 0 22px rgba(230,230,255,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.85); cursor: pointer; user-select: none; transition: transform .18s ease, box-shadow .18s ease; pointer-events: auto; } #cta-prompt:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 18px rgba(179,153,255,1), 0 0 30px rgba(230,230,255,0.7); } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Galaxie --> <div class="galaxy"></div> <!-- Universum Layer --> <div id="universe-layer"></div> <!-- MINIMALE HINZUGEFÜGTE ELEMENTE: Alphastern + CTA (Textbox bleibt original unverändert) --> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern1.png" alt="Alphastern" class="alphastern"> <div id="cta-prompt">✦ Wunsch hinzufügen</div> <!-- Text (UNVERÄNDERT) --> <div class="textbox"> ''Ein einfaches, leuchtendes Interface erscheint.''<br> „Hinterlasse deinen Sternenwunsch für Sachsens Zukunft. Was soll in den nächsten 1100 Jahren bewahrt, verändert oder erschaffen werden?“<br> [[→ Die Herrnhuter-Galaxie-App...]] </div> <!-- Kleines Script: CTA klickt den ersten Link in der Textbox (falls vorhanden) --> <script> document.addEventListener('DOMContentLoaded', function () { var cta = document.getElementById('cta-prompt'); if (cta) { cta.addEventListener('click', function () { var firstLink = document.querySelector('.textbox a'); if (firstLink) { firstLink.click(); } else { // falls kein <a> vorhanden: simuliere Fokus auf die textbox (keine Änderung an ihrem Text) var tb = document.querySelector('.textbox'); if (tb) { tb.style.outline = '0.5rem solid rgba(179,153,255,0.18)'; setTimeout(function(){ tb.style.outline = ''; }, 800); } } }); } }); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final10.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: false, distance: 120, color: "#ffffff", opacity: 0.35, width: 0.7 }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } function makeUniverseLayer(id) { particlesJS(id, { particles: { number: { value: 100, density: { enable: false } }, color: { value: ["#ffffff", "#e6e6ff", "#ccccff"] }, shape: { type: "circle" }, opacity: { value: 0.6, random: true, anim: { enable: true, speed: 1, opacity_min: 0.2 } }, size: { value: 1.2, random: true, anim: { enable: true, speed: 2, size_min: 0.5 } }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.25, width: 0.8 }, move: { enable: true, speed: 0.6, random: true, straight: false, out_mode: "bounce", bounce: true } }, interactivity: { events: { onhover: { enable: true, mode: "grab" }, resize: true }, modes: { grab: { distance: 150, line_linked: { opacity: 0.8 } } } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // Universum im Vordergrund makeUniverseLayer('universe-layer'); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* Galaxie Hintergrund (größer & weißlicher) */ .galaxy { position: fixed; top: 42%; /* etwas höher */ left: 50%; transform: translate(-50%, -50%); width: 650px; height: 450px; z-index: 1; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 10%, rgba(230,230,255,0.6) 25%, rgba(200,200,255,0.4) 40%, rgba(106,90,205,0.25) 55%, rgba(75,75,130,0.15) 70%, rgba(26,26,58,0.05) 85%, transparent 100%); border-radius: 50%; filter: blur(25px); opacity: 0.8; } /* Universum Layer - nur über Galaxie */ #universe-layer { position: fixed; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 300px; z-index: 2; pointer-events: auto; } #universe-layer canvas { filter: drop-shadow(0 0 3px #ffffff); } /* Textblock fixiert unten */ .textbox { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 800px; text-align: center; font-size: 1rem; line-height: 1.4; color: #fff; background: rgba(0,0,0,.45); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } /* smartphone */ .smartphone { position: fixed; top: 45%; /* Anpassung: näher an der Universe-Position */ left: 47%; transform: translate(-50%, -50%); z-index: 9998; /* sehr hohe Priorität (sichtbar) */ width: 220px; height: auto; } /* CTA knapp und klar — POSITIONELL ÜBER DEM STERN (nicht die Textbox verändern) */ #cta-prompt { position: fixed; top: 65%; /* physisch oberhalb des Sterns */ left: 55%; transform: translate(-50%, -50%); z-index: 9999; /* knapp unterhalb des Sterns in z, aber oben auf der Seite sichtbar */ padding: 0.5rem 1rem; border-radius: 9999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 12px rgba(179,153,255,0.75), 0 0 22px rgba(230,230,255,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.85); cursor: pointer; user-select: none; transition: transform .18s ease, box-shadow .18s ease; pointer-events: auto; } #cta-prompt:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 18px rgba(179,153,255,1), 0 0 30px rgba(230,230,255,0.7); } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Galaxie --> <div class="galaxy"></div> <!-- Universum Layer --> <div id="universe-layer"></div> <!-- Smartphone --> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/smartphone.png" alt="smartphone" class="smartphone"> <div id="cta-prompt">CTA zur App</div> <!-- Text --> <div class="textbox"> ''CTA erscheint: "Sternenwunsch über App eingeben"''<br> „Nutze die Begleit-App, um deinen Wunsch zu formulieren. Dort kannst du auch die Wünsche anderer entdecken und Teil unseres wachsenden Netzwerks aus Hoffnungen werden.“<br> [[→ Die Sternwunsch-Visualisierung...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final11.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.5, size=1.2){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.8 }, size: { value: size }, line_linked: { enable: false }, move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } function makeUniverseLayer(id) { particlesJS(id, { particles: { number: { value: 100, density: { enable: false } }, color: { value: ["#ffffff", "#e6e6ff", "#ccccff"] }, shape: { type: "circle" }, opacity: { value: 0.6, random: true, anim: { enable: true, speed: 1, opacity_min: 0.2 } }, size: { value: 1.2, random: true, anim: { enable: true, speed: 2, size_min: 0.5 } }, line_linked: { enable: true, distance: 120, color: "#ffffff", opacity: 0.25, width: 0.8 }, move: { enable: true, speed: 0.6, random: true, straight: false, out_mode: "bounce", bounce: true } }, interactivity: { events: { onhover: { enable: true, mode: "grab" }, resize: true }, modes: { grab: { distance: 150, line_linked: { opacity: 0.8 } } } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 140); makeLayer('p-green', 140); makeLayer('p-blue', 140); // Universum im Vordergrund makeUniverseLayer('universe-layer'); })(); </script> <style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } .galaxy { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); width: 650px; height: 450px; z-index: 1; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 10%, rgba(230,230,255,0.6) 25%, rgba(200,200,255,0.4) 40%, rgba(106,90,205,0.25) 55%, rgba(75,75,130,0.15) 70%, rgba(26,26,58,0.05) 85%, transparent 100%); border-radius: 50%; filter: blur(25px); opacity: 0.8; } #universe-layer { position: fixed; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 300px; z-index: 2; pointer-events: auto; } #universe-layer canvas { filter: drop-shadow(0 0 3px #fff); } .textbox { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; max-width: 800px; text-align: center; font-size: 1rem; line-height: 1.4; color: #fff; background: rgba(0,0,0,.45); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } #glow { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 20px #b399ff; animation: glow 3s ease-in-out infinite; } @keyframes glow { 0% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0.25; transform: scale(0.8); } } .sternwunsch { z-index: 99; position: absolute; top: 20%; left: 69%; transform: translate(-50%, -50%); width: 200px; height: auto; animation: float 6s ease-in-out infinite, borderGlow 3s ease-in-out infinite; border: 3px solid; border-radius: 25px; padding: 0px; box-shadow: 0 0 15px rgba(179,153,255,0.6); background-clip: padding-box; } @keyframes float { 0%, 100% { transform: translate(-50%, -50%) translateY(-10px); } 50% { transform: translate(-50%, -50%) translateY(10px); } } @keyframes borderGlow { 0% { border-color: #fff; box-shadow: 0 0 8px #fff, 0 0 16px #b399ff; } 50% { border-color: #b399ff; box-shadow: 0 0 16px #b399ff, 0 0 32px #fff; } 100% { border-color: #fff; box-shadow: 0 0 8px #fff, 0 0 16px #b399ff; } } /* Dynamische Linie Canvas */ #lineCanvas { position: fixed; inset: 0; z-index: 2; pointer-events: none; } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <div class="galaxy"></div> <img src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/sternwunsch.png" alt="sternwunsch" class="sternwunsch" id="sternwunsch"> <div id="universe-layer"></div> <div id="glow"></div> <!-- Canvas für Linie --> <canvas id="lineCanvas"></canvas> <div class="textbox"> ''Nach App-Interaktion erscheint ein neuer Lichtpunkt in der kosmischen Karte.''<br> „Dein Beitrag zur Herrnhuter Galaxie! Über die App kannst du die Wünsche anderer erkunden und deine kosmische Präsenz erweitern.“<br> [[→ Die moralische Komponente...]] </div> <script> // Dynamische Linie zwischen Glow und Sternwunsch const canvas = document.getElementById("lineCanvas"); const ctx = canvas.getContext("2d"); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener("resize", resizeCanvas); function drawLine() { ctx.clearRect(0, 0, canvas.width, canvas.height); const glowEl = document.getElementById("glow"); const sternEl = document.getElementById("sternwunsch"); if (!glowEl || !sternEl) { requestAnimationFrame(drawLine); return; } const glow = glowEl.getBoundingClientRect(); const stern = sternEl.getBoundingClientRect(); const glowX = glow.left + glow.width/2; const glowY = glow.top + glow.height/2; const sternX = stern.left + stern.width/2; const sternY = stern.top + stern.height/2; ctx.beginPath(); const gradient = ctx.createLinearGradient(glowX, glowY, sternX, sternY); gradient.addColorStop(0, "#fff"); gradient.addColorStop(0.5, "#b399ff"); gradient.addColorStop(1, "transparent"); ctx.strokeStyle = gradient; ctx.shadowBlur = 12; ctx.shadowColor = "#b399ff"; ctx.lineWidth = 2; ctx.moveTo(glowX, glowY); ctx.lineTo(sternX, sternY); ctx.stroke(); ctx.closePath(); requestAnimationFrame(drawLine); } drawLine(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final12.mp3" type="audio/mp3"> </audio>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> (function(){ function makeLayer(id, count, color="#ffffff", speed=0.12, size=1.0){ particlesJS(id, { particles: { number: { value: count, density: { enable: true, value_area: 1000 } }, color: { value: color }, shape: { type: "circle" }, opacity:{ value: 0.7 }, size: { value: size }, line_linked: { enable: false }, // Verbindungen deaktiviert move: { enable: true, speed: speed, random: false, straight: false, out_mode: "out" } }, interactivity: { events: { resize: true } }, retina_detect: true }); } // Hintergrundschichten makeLayer('p-red', 120); makeLayer('p-green', 120); makeLayer('p-blue', 120); // Orchestrierung: Partikel ausblenden, Stern einblenden, Tracking + Reticle, dann Vollbild const star = document.getElementById("final-star"); const reticle = document.getElementById("xr-reticle"); setTimeout(() => { // Partikel-Layer ausblenden/schrumpfen document.querySelectorAll('.p-layer').forEach(el => el.classList.add("fade-out")); // Stern einblenden star.classList.add("fade-in"); // Reticle einblenden + Tracking starten setTimeout(() => { reticle.classList.add("show"); star.classList.add("tracking"); }, 800); // Reticle ausblenden & Stern in Vollbild überführen setTimeout(() => { star.classList.remove("tracking"); reticle.classList.add("fade-out"); // wichtiger Fix: erst Tracking aus, dann Vollbild star.classList.add("fullscreen"); }, 5200); }, 4000); })(); </script> <style> /* ====== Grundlayout ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000000; color: #fff; } /* Partikel-Layer */ .p-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity 2s ease, transform 2s ease; } .p-layer.fade-out { opacity: 0; transform: scale(0.7); } .p-layer canvas { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #b399ff); } /* PNG-Stern */ #final-star { position: fixed; top: 50%; left: 50%; max-width: 220px; /* Startgröße, korrektes Verhältnis */ max-height: 220px; width: auto; height: auto; transform: translate(-50%, -50%); opacity: 0; z-index: 1; will-change: transform, opacity, filter, width, height; transition: transform 1.8s ease, width 1.8s ease, height 1.8s ease, top 1.8s ease, left 1.8s ease, opacity 1.2s ease, filter 1.2s ease; filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px #b399ff); } #final-star.fade-in { opacity: 1; } /* Stärkere Trackingbewegung + Atmen */ #final-star.tracking { animation: driftX 1.6s ease-in-out infinite alternate, breathe 2.8s ease-in-out infinite; } @keyframes driftX { from { transform: translate(calc(-50% - 26px), -50%); } to { transform: translate(calc(-50% + 26px), -50%); } } @keyframes breathe { from { filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px #b399ff); } to { filter: drop-shadow(0 0 26px #fff) drop-shadow(0 0 58px #b399ff); } } /* --- WICHTIGER FIX fürs Vollbild --- */ #final-star.fullscreen { /* Reset der Limitierungen, die das Bild klein hielten */ max-width: none; max-height: none; /* Vollflächig */ position: fixed; inset: 0; width: 100vw; height: 100vh; transform: none; /* Bild füllt den Screen (ohne Verzerrung, ggf. Beschnitt) */ object-fit: cover; /* etwas kräftigeres Leuchten beim Übergang */ filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 45px #b399ff); } /* XR-Reticle (Einpassungsrahmen) */ #xr-reticle { position: fixed; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); border: 2px dashed rgba(255,255,255,0.7); border-radius: 16px; box-shadow: 0 0 24px rgba(179,153,255,0.45), inset 0 0 12px rgba(255,255,255,0.1); opacity: 0; z-index: 2; pointer-events: none; transition: opacity .6s ease, transform .6s ease; } #xr-reticle.show { opacity: 1; } #xr-reticle.fade-out { opacity: 0; } /* kleine Ecken/Marken */ #xr-reticle::before, #xr-reticle::after { content: ""; position: absolute; inset: 10px; border: 2px solid rgba(255,255,255,0.35); border-radius: 10px; pointer-events: none; } #xr-reticle .scan { position: absolute; left: 8px; right: 8px; top: 10px; height: 2px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent); animation: scanMove 1.6s ease-in-out infinite alternate; } @keyframes scanMove { from { top: 12px; } to { top: calc(100% - 12px); } } #xr-reticle .hint { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-size: 0.5rem; letter-spacing: .02em; color: rgba(255,255,255,0.85); text-shadow: 0 0 6px rgba(179,153,255,0.7); } /* --- ERSETZTE .textbox-Regel (fixed, immer sichtbar bei 100% Zoom) --- */ .textbox { position: fixed; /* fixiert an Viewport (statt relativ) */ z-index: 3; left: 50%; bottom: clamp(12px, 3.6vh, 32px);/* immer sichtbar, passt sich Höhe an */ transform: translateX(-50%); width: min(900px, calc(100% - 2rem)); /* responsive Breite */ max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); box-sizing: border-box; } /* Für sehr kleine/tiefe Viewports: Schrift + Padding leicht reduzieren */ @media (max-height: 520px) { .textbox { font-size: 0.95rem; padding: 0.7rem; bottom: 10px; } } </style> <!-- Partikel-Layer --> <div id="p-red" class="p-layer"></div> <div id="p-green" class="p-layer"></div> <div id="p-blue" class="p-layer"></div> <!-- Stern PNG --> <img id="final-star" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/finalstern.png" alt="Herrnhuter Stern" /> <!-- XR-Einpassungs-UI --> <div id="xr-reticle" aria-hidden="true"> <div class="scan"></div> <div class="hint">Position wird erfasst…</div> </div> <!-- Text --> <div class="textbox"> ''Die Umgebung wird ruhiger. Die Wunschgalaxie bündelt sich in einen einzelnen, hellen Herrnhuter Stern und leitet zur Position des anlogen Zackens.''<br> „Alle Wünsche sind mehr als Daten – sie sind Versprechen an die Zukunft. Diese können nur Wirklichkeit werden, wenn wir danach handeln.“<br> [[→ Die Umgebung löst sich auf...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final13.mp3" type="audio/mp3"> </audio>
<script> (function () { const star = document.getElementById("final-star"); const bg = document.getElementById("bg-exhibition"); // Stern startet sofort sichtbar star.classList.add("start"); // Nach kurzem Delay blendet Ausstellung ein + Maske zoomt setTimeout(() => { bg.classList.add("show"); star.classList.add("blend"); }, 2000); })(); </script> <style> /* ====== Basis ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } /* ====== Bild-Stack ====== */ .scene-img { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; object-position: center; opacity: 0; transition: opacity 30s ease; } /* Ausstellung */ #bg-exhibition { z-index: 0; opacity: 0; } #bg-exhibition.show { opacity: 0.65; /* dezent sichtbar */ } /* Stern */ #final-star { z-index: 1; opacity: 1; /* Start: voll sichtbar */ transition: opacity 30s ease, filter 30s ease, -webkit-mask-size 30s ease, mask-size 30s ease; filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 55px #b399ff); /* weiche Maske */ -webkit-mask-image: radial-gradient(circle, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 100% 100%; mask-image: radial-gradient(circle, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%); mask-repeat: no-repeat; mask-position: center; mask-size: 100% 100%; } #final-star.start { opacity: 1; } #final-star.blend { opacity: 0.85; /* Ziel: 85 % */ filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 25px #b399ff); /* Glow sanfter */ -webkit-mask-size: 250% 250%; mask-size: 250% 250%; } /* ====== Textblock ====== */ .textbox { position: relative; z-index: 3; margin: 2rem auto 0; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } .textbox a, .textbox a:link, .textbox a:visited { color: #fff; text-decoration: underline; } .textbox a:hover { color: #b399ff; } </style> <!-- Ausstellung --> <img id="bg-exhibition" class="scene-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/austellung-augmented.jpg" alt="Ausstellungshintergrund" /> <!-- Stern --> <img id="final-star" class="scene-img start" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/finalstern.png" alt="Herrnhuter Stern" /> <!-- Text --> <div class="textbox"> ''Die Umgebung löst sich auf, zurück zur realen Landesaustellung.''<br> „Ein guter Vorfahre sein bedeutet, Entscheidungen zu treffen, die kommende Generationen berücksichtigen. Wir können die Zukunft nicht kontrollieren, aber ihnen Möglichkeiten hinterlassen.“<br> [[→ Die erste Zacke...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final14.mp3" type="audio/mp3"> </audio>
<script> (function () { const star = document.getElementById("final-star"); const bg = document.getElementById("bg-exhibition"); // Star & Exhibition Ausgangszustand star.classList.add("start"); bg.classList.add("show"); // startet schon eingeblendet bei 65% // Dann Übergang: Ausstellung voll + Stern langsam ausblenden setTimeout(() => { bg.classList.add("full"); // Ausstellung wird ganz sichtbar star.classList.add("fadeout"); // Stern verschwindet }, 2000); })(); </script> <style> /* ====== Basis ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } .scene-img { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; object-position: center; opacity: 0; transition: opacity 25s ease, filter 25s ease; } /* Ausstellung */ #bg-exhibition { z-index: 0; opacity: 0; } #bg-exhibition.show { opacity: 0.65; } #bg-exhibition.full { opacity: 1; /* Ziel: 100% Klarheit */ } /* Stern */ #final-star { z-index: 1; opacity: 1; transition: opacity 25s ease, filter 25s ease; filter: drop-shadow(0 0 25px #fff) drop-shadow(0 0 55px #b399ff); } #final-star.start { opacity: 1; } #final-star.fadeout { opacity: 0; /* Stern blendet langsam ganz aus */ filter: drop-shadow(0 0 0px #fff) drop-shadow(0 0 0px #b399ff); /* Glow verschwindet mit */ } /* ====== Textblock ====== */ .textbox { position: relative; z-index: 3; margin: 2rem auto 0; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } .textbox a, .textbox a:link, .textbox a:visited { color: #fff; text-decoration: underline; } .textbox a:hover { color: #b399ff; } </style> <!-- Ausstellung --> <img id="bg-exhibition" class="scene-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/austellung-augmented.jpg" alt="Ausstellungshintergrund" /> <!-- Stern --> <img id="final-star" class="scene-img start" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/finalstern.png" alt="Herrnhuter Stern" /> <!-- Text --> <div class="textbox"> ''Der physische einzelne Zacken wird sichtbar – augmentiert vom ganzen Stern – real noch unvollständig, da noch allein.''<br> „Die Herrnhuter Galaxie beginnt hier und jetzt – mit dir. Jede Zacke braucht Unterstützung. Über 1100 Jahre hinweg.“<br> [[→ CTA zur Teilnahme...]] </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final15.mp3" type="audio/mp3"> </audio>
<!-- Skaliertes UI: CTAs + Textbox auf 90% --> <style> :root { --ui-scale: 0.9; /* hier 0.9 = 90% */ } .scene-wrapper { position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; background: #000; z-index: 0; display: block; } .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; } /* UI-Wrapper skaliert alles darin */ .ui-scale { position: absolute; inset: 0; z-index: 5; transform-origin: center center; transform: scale(var(--ui-scale)); will-change: transform; pointer-events: none; /* enable per-child when needed */ } /* CTA Buttons - Basis (visuelle Größe etwas reduziert) */ .cta-btn { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); background: rgba(0,0,0,0.70); color: #fff; padding: 0.62rem 1.1rem; /* etwas schmaler */ border-radius: 24px; border: 1px solid rgba(255,255,255,0.18); font-size: 0.95rem; /* kleinere Schrift */ cursor: pointer; z-index: 60; box-shadow: 0 6px 18px rgba(0,0,0,0.45); transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, background .22s ease; will-change: transform, left, top; opacity: 0; /* will be set visible by JS */ pointer-events: auto; } .cta-btn:focus { outline: 2px solid rgba(179,153,255,0.45); outline-offset: 4px; } /* hover — lilac glow */ .cta-btn:hover { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 10px 40px rgba(179,153,255,0.95), 0 2px 12px rgba(0,0,0,0.6); background: rgba(179,153,255,0.06); } /* Float orbit animation keyframe (used by JS) */ @keyframes float-vert { 0% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-10px); } 100% { transform: translate(-50%, -50%) translateY(0); } } /* Textbox (skaliert via ui-scale) */ .textbox { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); max-width: 84%; background: rgba(0,0,0,0.66); color: #fff; padding: 1rem 1.4rem; /* leicht reduzierte Padding */ border-radius: 12px; text-align: center; z-index: 70; box-shadow: 0 12px 40px rgba(0,0,0,0.6); line-height: 1.35; font-size: 0.93rem; /* kleinere Schrift */ pointer-events: auto; } .textbox a, .textbox a:link, .textbox a:visited { color: #fff; text-decoration: underline; font-weight: 700; } .textbox a:hover { color: #b399ff; } /* responsive tweaks */ @media (max-width: 700px) { :root { --ui-scale: 0.86; } /* noch kleiner auf mobilen */ .cta-btn { padding: .45rem .8rem; font-size: .85rem; } .textbox { bottom: 8%; padding: .9rem 1rem; font-size: .88rem; } } </style> <div class="scene-wrapper" id="scene-root" data-star-x="55" data-star-y="45" data-cta-shift-left="-60"> <img id="bg-exhibition" class="scene-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/austellung-augmented.jpg" alt="Ausstellungshintergrund" /> <!-- UI-Scale wrapper: CTAs & Textbox skaliert --> <div class="ui-scale" id="ui-scale-root"> <button class="cta-btn" id="cta-1" role="button">Mehr erfahren</button> <button class="cta-btn" id="cta-2" role="button">Projekt unterstützen</button> <button class="cta-btn" id="cta-3" role="button">Zacke widmen</button> <div class="textbox"> ''CTA zur App erscheinen: "Mehr erfahren", "Projekt unterstützen", "Zacke widmen"''<br> „Wenn du Teil dieses Langzeitprojekts werden möchtest, nutze die App oder besuche unsere Website. Dort findest du alles zur Unterstützung – von einzelnen Zacken bis zu ganzen Sternen.“<br> [[→ Finale...]] </div> </div> </div> <script> (function(){ const root = document.getElementById('scene-root'); const img = document.getElementById('bg-exhibition'); const ui = document.getElementById('ui-scale-root'); const btns = [ document.getElementById('cta-1'), document.getElementById('cta-2'), document.getElementById('cta-3') ]; // attributes & defaults let starPctX = parseFloat(root.getAttribute('data-star-x')) || 55; let starPctY = parseFloat(root.getAttribute('data-star-y')) || 45; const shiftLeftPx = Number(root.getAttribute('data-cta-shift-left')) || -60; const baseAnglesDeg = [-90, 150, 30]; const state = btns.map((_, i) => ({ baseAngle: baseAnglesDeg[i] * Math.PI / 180, angle: baseAnglesDeg[i] * Math.PI / 180, speed: (0.0009 + i * 0.00036) * (i % 2 ? -1 : 1), offset: (i - 1) * 6 })); function placeButtons() { const rect = root.getBoundingClientRect(); const centerX = rect.left + rect.width * (starPctX / 100); const centerY = rect.top + rect.height * (starPctY / 100); // radius heuristic; ensure buttons don't drop into textbox area const textbox = document.querySelector('.textbox'); const tbRect = textbox.getBoundingClientRect(); const marginBottom = 0.12 * rect.height; let radius = Math.min(rect.width, rect.height) * 0.18; const spaceBelow = rect.bottom - centerY; if (spaceBelow < radius + marginBottom) radius = Math.max(70, spaceBelow - marginBottom - 40); radius = Math.max(60, radius); // compute base positions and apply initial values state.forEach((s, i) => { const rad = s.baseAngle; const x = centerX + (radius + s.offset) * Math.cos(rad) + shiftLeftPx; const y = centerY + (radius + s.offset) * Math.sin(rad); const localLeft = x - rect.left; const localTop = y - rect.top; const btn = btns[i]; btn.style.left = localLeft + 'px'; btn.style.top = localTop + 'px'; btn.style.opacity = '1'; // set initial tiny floating animation via CSS keyframe (JS overrides duration below) btn.style.animation = `float-vert ${5 + i*0.9}s ease-in-out ${i*0.4}s infinite`; }); // store for the animation loop state._center = { x: centerX - rect.left + shiftLeftPx, y: centerY - rect.top }; state._radius = radius; } // continuous small orbit motion around base positions let last = performance.now(); function animate(now) { const dt = now - last; last = now; if (!state._center) { requestAnimationFrame(animate); return; } const rect = root.getBoundingClientRect(); const centerAbsX = rect.left + state._center.x; const centerAbsY = rect.top + state._center.y; state.forEach((s, i) => { s.angle += s.speed * dt; const smallR = Math.max(10, Math.min(36, state._radius * 0.07)) + s.offset; const angle = s.baseAngle + s.angle; const x = centerAbsX + (state._radius) * Math.cos(s.baseAngle) + smallR * Math.cos(angle); const y = centerAbsY + (state._radius) * Math.sin(s.baseAngle) + smallR * Math.sin(angle); const localLeft = x - rect.left; const localTop = y - rect.top; const btn = btns[i]; btn.style.left = localLeft + 'px'; btn.style.top = localTop + 'px'; }); requestAnimationFrame(animate); } function init() { placeButtons(); last = performance.now(); requestAnimationFrame(animate); } if (img.complete) init(); else { img.addEventListener('load', init); setTimeout(init, 600); } window.addEventListener('resize', () => setTimeout(placeButtons, 120)); setTimeout(() => placeButtons(), 600); // click handlers - replace with Twine macros if required btns[0].addEventListener('click', ()=> { window.location.href='#'; }); btns[1].addEventListener('click', ()=> { window.location.href='#'; }); btns[2].addEventListener('click', ()=> { window.location.href='#'; }); // runtime nudging helper window.__scene_setStarPercent = function(px, py, shiftLeft){ if (typeof px === 'number') starPctX = px; if (typeof py === 'number') starPctY = py; if (typeof shiftLeft === 'number') root.setAttribute('data-cta-shift-left', String(shiftLeft)); placeButtons(); }; })(); </script> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final16.mp3" type="audio/mp3"> </audio>
<script> (function () { const bgAug = document.getElementById("bg-exhibition-aug"); const bgFinal = document.getElementById("bg-exhibition-final"); // Start: Augmentierte Ausstellung leicht sichtbar bgAug.classList.add("show"); // Nach 2s volle Augmentierung setTimeout(() => { bgAug.classList.add("full"); }, 2000); // Nach 8s Übergang: Augmentierung ausblenden, reine Ausstellung einblenden setTimeout(() => { bgFinal.classList.add("show"); bgAug.classList.add("fadeout"); }, 8000); })(); </script> <style> /* ====== Basis ====== */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Georgia, serif; background: #000; color: #fff; } .scene-img { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; object-position: center; opacity: 0; transition: opacity 25s ease, filter 25s ease; } /* Ausstellung augmentiert */ #bg-exhibition-aug { z-index: 0; } #bg-exhibition-aug.show { opacity: 0.65; } #bg-exhibition-aug.full { opacity: 1; } #bg-exhibition-aug.fadeout { opacity: 0; } /* Finale Ausstellung */ #bg-exhibition-final { z-index: 0; } #bg-exhibition-final.show { opacity: 1; } /* ====== Textblock ====== */ .textbox { position: relative; z-index: 3; margin: 2rem auto 0; max-width: 900px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: #fff; background: rgba(0,0,0,.55); padding: 1rem; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.6); } .textbox a, .textbox a:link, .textbox a:visited { color: #fff; text-decoration: underline; } .textbox a:hover { color: #b399ff; } </style> <!-- Ausstellung augmentiert --> <img id="bg-exhibition-aug" class="scene-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/austellung-augmented.jpg" alt="Ausstellung augmentiert" /> <!-- Finale Ausstellung --> <img id="bg-exhibition-final" class="scene-img" src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/austellung.jpg" alt="Ausstellung ohne Augmentierung" /> <!-- Neuer Text --> <div class="textbox"> ''Die Visualisierung löst sich vollständig auf. Man sieht keine Augmentierung mehr.''<br> „Ein Menschenleben mag kurz sein im Vergleich zur kosmischen Tiefenzeit. Aber zusammen können wir Projekte schaffen, die weit über unsere Zeit hinausreichen. Die Herrnhuter Galaxie ist ein solches Projekt – und du bist nun Teil davon.“<br><br> ''<i>ENDE</i>'' <br> Bitte nehme an der Umfrage dazu teil: https://forms.gle/rB9U564uWDjHAfyX7 <br> </div> <audio autoplay> <source src="https://grafikdude.github.io/audio-host-for-TWINE/assets TWINE/AUDIO/anfang/final17.mp3" type="audio/mp3"> </audio>
<<nobr>> <style> #passages { padding: 0; margin: 0; border: 0; } #fullscreen-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 9999; background: #000; } body { overflow: hidden; } </style> <video id="fullscreen-video" autoplay playsinline> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/GRUNE-STORY.mp4" type="video/mp4"> </video> <<script>> setTimeout(function() { var video = document.getElementById('fullscreen-video'); var checkEnd = setInterval(function() { if (video.ended || (video.duration > 0 && video.currentTime >= video.duration - 0.1)) { clearInterval(checkEnd); Engine.play('eco'); } }, 500); }, 1000); <</script>> <</nobr>>
<<nobr>> <style> #passages { padding: 0; margin: 0; border: 0; } #fullscreen-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 9999; background: #000; } body { overflow: hidden; } </style> <video id="fullscreen-video" autoplay playsinline> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/BLAUE-STORY.mp4" type="video/mp4"> </video> <<script>> setTimeout(function() { var video = document.getElementById('fullscreen-video'); var checkEnd = setInterval(function() { if (video.ended || (video.duration > 0 && video.currentTime >= video.duration - 0.1)) { clearInterval(checkEnd); Engine.play('tech'); } }, 500); }, 1000); <</script>> <</nobr>>
<<nobr>> <style> #passages { padding: 0; margin: 0; border: 0; } #fullscreen-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 9999; background: #000; } body { overflow: hidden; } </style> <video id="fullscreen-video" autoplay playsinline> <source src="https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/ROTE-STORY.mp4" type="video/mp4"> </video> <<script>> setTimeout(function() { var video = document.getElementById('fullscreen-video'); var checkEnd = setInterval(function() { if (video.ended || (video.duration > 0 && video.currentTime >= video.duration - 0.1)) { clearInterval(checkEnd); Engine.play('soc'); } }, 500); }, 1000); <</script>> <</nobr>>
<div id="background"> </div><div class="landing-text"><h2>Willkommen in der Herrnhuter Galaxie</h2><p><em>Ein narrativer Prototyp zwischen Erinnerung, Zukunft und Sternenlicht.</em></p><iframe width="350" height="200" src="https://www.youtube.com/embed/ClSm5-WvBCY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p>Diese erste Version des Storybooks lädt dazu ein, in eine entstehende Welt einzutauchen, in der sich Text, Klang, Bild und leichte Interaktivität zu einem atmosphärischen Erlebnis verweben. Ziel ist es, das <strong>Feeling</strong> einer größeren Erfahrung einzufangen, die später in <strong>Extended Reality (XR)</strong> weitergeführt wird – als Teil des Zukunftsbereichs der <strong>Landesausstellung Sachsen 2029 – 1100 Jahre Sachsen</strong>.</p><p>Die <strong>Herrnhuter Galaxie</strong> ist zugleich ein Experiment im <strong>Langzeitdesign</strong> – einem Forschungsansatz, der sich mit nachhaltigem Erzählen und Gestalten über Generationen hinweg beschäftigt und Teil meiner Masterarbeit ist.</p><p>Bitte nimm dir nach dem Durchlaufen einen Moment Zeit, um den <strong>Fragebogen</strong> am Ende auszufüllen – dein Feedback hilft, die Erfahrung weiterzuentwickeln.</p><p><strong>Vielen Dank und viel Freude mit der Herrnhuter Galaxie.</strong></p><p><em>Tipp: Am besten auf einem Computer im Breitbildmodus erleben, da die Darstellung nur bedingt responsiv ist. </em></p> [[:: Der Anfang]] </div> <style> #background { position: fixed; top: 0; left: 0; width: 50%; height: 50%; background: url("https://grafikdude.github.io/audio-host-for-TWINE/GRAFIK/alphastern1.png") no-repeat bottom center; background-size: cover; opacity: 0.15; /* leicht transparent */ z-index: -1; } .landing-text { max-width: 100%; margin: 0 auto; text-align: left; font-family: "Georgia", serif; line-height: 1.1; font-size: 0.8em; color: #f0f0f0; background: rgba(20, 20, 30, 0.6); padding: 2em; border-radius: 12px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); z-index: 1; } body { background-color: #0a0a15; } h2 { font-size: 1.5em; margin-bottom: 0.1em; color: #ffffff; } em { color: #cccccc; } a.link-internal { display: inline-block; text-align: center; margin-top: 1.5em; padding: 0.8em 1.2em; background: #ffffff10; border: 1px solid #ffffff40; border-radius: 6px; color: #ffffff; text-decoration: none; transition: background 0.3s ease; } a.link-internal:hover { background: #ffffff30; } </style>