Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…
<style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .accueil-container p { font-size: 1em; margin-bottom: 20px; } .italic-text { font-style: italic; font-size: 1em; color: white; margin-bottom: 20px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> You chose to enter the vase. I warned you not to get closer. Nothing will happen to you—you won’t have time to see. Only the vase’s walls will bear witness to your fate. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('E1')">I don't want to die.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('E2')">What is the purpose of this game?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('E3')">Alright.</a> </div> <div class="accueil-container"> <h1 class="title">The Final Vessel</h1> <p> This is an interactive narrative experience.<br> To begin, simply touch the top of the left ceramic vase in front of you. </p> <!-- Lien invisible modifié vers 'intro' --> <span id="invisible-start" style="display:none;">[[Intro|intro]]</span> </div> <<script>> document.body.classList.add("home-bg"); // Fonction pour simuler un clic sur le lien vers 'intro' function triggerStart() { const link = document.querySelector("#invisible-start a"); if (link) link.click(); } <</script>> <style> body { background-image: url('multi.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: #ece5ff; } /* Texte principal */ .accueil-container p, .accueil-container div { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: #ece5ff; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> What have you done? <br> The vase was the source— </div> <p> A faint, mournful sound echoes in the void as the shards scatter around you. They pulse with an eerie, fading light, like dying embers. </p> <div class="italic-text"> You must have truly lost everything to break the vase. </div> <p> The air around you grows heavy. Cracks forming under your feet like spiderwebs. Whispers rise from the void, disjointed and incomprehensible, accusing, mourning, questioning. </p> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('PutBack')">Put the pieces back together.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('WalkAway')">Walk away.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Continue')">...</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <!-- Tu peux ajouter un texte ici si besoin --> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q6')">Talk: "What are you?"</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q6')">Talk: "What are you?"</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q6')">Talk: "What are you?"</a> </div> <style> body { background-image: url('multi3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .accueil-container p { font-size: 1em; margin-bottom: 20px; } .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 20px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> You stand motionless among the shards, unable to decide, unable to act. The void watches, silent and patient. </p> <div class="italic-text"> Indecision is a choice of its own, and the story waits for no one. </div> <p> The shards dissolve into the darkness, the vase and its meaning lost forever. The void tightens around you, leaving you with nothing but the weight of what might have been. </p> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } .italic-text { font-style: italic; font-size: 1em; color: white; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> I could give you the whole spiel about transformation, returning to the earth, and the grand cycle of life — but it probably won’t help. Still, take a moment. Find your own way to accept it, if you can. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait.2')">Yes, you are probably right.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('I am sure there is a way out of here...')">I am sure there is a way out of here...</a> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } .italic-text { font-style: italic; font-size: 1em; color: white; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> This isn’t really a game. Your choices don’t affect what happens to you. It’s just a story. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait1')">Wait, that is not true.</a> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } .italic-text { font-style: italic; font-size: 1em; color: white; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> This isn’t really a game. Your choices don’t affect what happens to you. It’s just a story. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait.2')">Oh...</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; /* centré, vu qu’il y a un seul choix */ padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text">So do you want to get closer now?</div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4')">Yes.</a> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: white; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> You refuse to accept your fate. You push against the void, struggling to find a way out. But the more you resist, the stranger the space becomes. The walls of the vase fade away. Light appears again... </p> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">...</a> </div> <style> body { background-image: url('multi3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 40px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: flex-start; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> “Then start by noticing. Let yourself be moved. The swaying of a tree, the ripple of water, the warmth of sunlight—these are not just things; they are part of a vast, dynamic web that includes you. Let your emotions guide you toward the connections you’ve always had but forgotten to feel.” </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">End</a> </div> <style> body { background-image: url('multi3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: white; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> You fade into the void, your existence becoming one with the nothingness. The story ends—not with resolution, but with erasure.<style> body { background-image: url('Enter.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p>You decided to enter the vase.</p> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('enter1')">...</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('enter1')">...</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('enter1')">...</a> </div> <style> body { background-image: url('multi.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 40px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> “Baptiste Morizot wrote of how some see humanity as the sole actor in a world that is passive and inert, ruined by our greed and foolishness. But that’s a profound misunderstanding of life. The living world is no crumbling cathedral; it’s a blazing fire—waning, yes, but with an extraordinary capacity for renewal and creation.”<br><br> When you stop seeing life as something to save, and instead as a force that constantly reshapes and rebuilds the world’s habitability, you realize you’re not alone in imagining a better future. You have an ally of literally cosmic proportions. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Next1')">Next</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">End</a> </div> <style> body { background-image: url('multi2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 40px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; max-width: 30%; text-align: center; } </style> <div class="accueil-container"> <div class="italic-text"> “Baptiste Morizot also wrote of the ecological crisis not as a problem of resources, but of sensitivity—a crisis in how we feel toward the living world. Our emotions and our actions are intertwined. Without sensitivity to life, how can we act to protect it?”<br><br> “Michel Blazy once said there’s no such thing as matter that isn’t alive. Everything changes state, moving and evolving, though we often fail to notice. If we lived longer than mountains, if we could feel their slow, ancient rhythms, would we see them as living too?” </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('I want to feel more connected to the living world.')">I want to feel more connected to the living world.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('What does this sensitivity change?')">What does this sensitivity change?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">End</a> </div> <style> body { background-image: url('multi3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: white; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> The vase crumbles again, the shards slipping through your fingers. The void consumes them, leaving you alone in the emptiness. There is no path forward—only stillness.<style> body { background-image: url('multi.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .accueil-container p { font-size: 1em; margin-bottom: 20px; } .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 20px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> You kneel among the shards, your hands trembling as you try to reassemble the fragments. The edges are sharp, cutting into your fingers, but you persist. Piece by piece, the vase begins to take shape. Yet no matter how hard you try, the cracks remain visible, glowing faintly like scars of light. </p> <div class="italic-text"> "You cannot undo what has been done. The vessel may hold again, but it will never be the same. Are you prepared to carry its weight?" </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Yes1')">Yes</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('No1')">No</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } .italic-text { font-style: italic; font-size: 1em; color: white; margin-bottom: 20px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> In this endless stillness, the vase stands like a silent sentinel. </p> <div class="italic-text"> You should probably go back to what you were doing, nothing special about this place. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q3')">But I have nothing to do here.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q3*2')">And what about the vase?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q3*1')">What is the purpose of this game?</a> </div> <style> body { margin: 0; padding: 0; background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; color: white; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; color: white; margin-bottom: 20px; } .italic-text { font-style: italic; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> If you get closer, you might break the vase. Aren't you just a little bit curious about it? </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4')">I’ll be careful.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4')">So what?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4*3')">Maybe I should stay away.</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur principal du texte */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; color: white; margin-bottom: 20px; } .italic-text { font-style: italic; } /* Conteneur des choix alignés bas gauche/centre/droite */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> This vase is older than you, you know. It’s witnessed a lot of things. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q5')">I’m just looking for answers.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q5')">Is it ceramic?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q5')">I’m not interested.</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; color: white; margin-bottom: 20px; } .italic-text { font-style: italic; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> This vase is older than you, you know. It’s witnessed a lot of things. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q5')">I’m just looking for answers.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q5')">Is it ceramic?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q5')">I’m not interested.</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; color: white; margin-bottom: 20px; } .italic-text { font-style: italic; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; /* espace entre les choix */ padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; cursor: pointer; } </style> <div class="accueil-container"> <div class="italic-text"> Great! Let's go back to our vase story. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q2')">Continue.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q2')">Continue.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q2')">Continue.</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; margin-bottom: 20px; color: white; } .italic-text { font-style: italic; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> If that is your choice then... </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4*1')">Go back to the story.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">It is my choice, goodbye.</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; color: white; margin-bottom: 20px; } .italic-text { font-style: italic; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; /* espace entre les choix */ padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; cursor: pointer; } </style> <div class="accueil-container"> <div class="italic-text"> ... </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait')">...</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait')">...</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait')">...</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p, .accueil-container div:not(.italic-text) { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; /* espace entre les choix */ padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; cursor: pointer; } </style> <div class="accueil-container"> <div class="italic-text"> I know you’re trying to find a sense of familiarity. Are you tired of wandering here? You must be exhausted. </div> <div> It stays silent for what feels like a few minutes, but in reality you have no track of time or repaire.<br> The space is nothing, you don't feel your body in the space.<br> Only your heart pounding in your chest brings you back to lucidity from losing yourself to the void.<br> There is only one thing in your view — how not to be attracted to it? </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Closer')">Get closer to the vase.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Closer')">Get closer to the vase.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Closer')">Get closer to the vase.</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique, aligné à droite */ .italic-text { font-style: italic; font-size: 1em; text-align: right; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; /* espace entre les choix */ padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> A bottomless pit. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q7')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q7')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q7')">Continue</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } /* Pour aligner à droite et style boîte avec animation */ .align-right { text-align: right; margin-top: 20px; } .box { display: inline-block; padding: 10px 15px; border: 2px solid white; border-radius: 8px; cursor: pointer; } /* Animation tremblement */ @keyframes shudder { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } .shudder { animation: shudder 0.5s infinite; } </style> <div class="accueil-container"> <p></p> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Look inside the vase.')">Look inside</a> <div class="align-right"> <a class="box shudder" href="javascript:void(0)" onclick="SugarCube.Engine.play('Break')">Break the vase</a> </div> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: white; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> A vase sits on a vast, empty space.<br> All around, silence holds sway and the air is perfectly still. </p> <div class="italic-text"> It’s just a vase, why are you interested? </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q2')">What is it?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q2')">Yes, it’s just a vase.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q2')">Where am I?</a> </div> <<run UIBar.destroy()>> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 40px; /* espace entre les choix */ padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; cursor: pointer; } </style> <div class="accueil-container"> <div class="italic-text"> ... </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*2')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*2')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*2')">Continue</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> Still want to wait? </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*3')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*3')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*3')">Continue</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> ... </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Wait*4')">Leave</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Get back.')">Continue</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Get back.')">Continue</a> </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p></p> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: white; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> I suggest you relax. Maybe meditate? </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Yes.')">Looks like I don't have a choice...</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('I am sure there is a way out of here...')">Please no.</a> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; color: white; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: white; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> I suggest you relax. Maybe meditate? </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Yes.')">Yes.</a> </div> <style> body { background-image: url('multi2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> You turn your back on the broken shards, the echoes of the vase’s destruction still ringing in your ears. Each step feels heavier, as though the void itself resists your departure. </p> <div class="italic-text"> To walk away is to abandon what could have been. </div> <p> The darkness around you deepens, the faint light of the shards fading entirely. You walk endlessly, the emptiness swallowing every sound, every thought, every sense of self. </p> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Keep walking.')">Keep walking.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Break')">Turn back.</a> </div> <style> body { background-image: url('multi3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .italic-text { font-style: italic; font-size: 1em; color: #ece5ff; margin-bottom: 40px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: flex-start; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> “Everything. When you see the living world as more than background—when you feel its movements and rhythms—you begin to understand your role within it. It’s not about control or saving; it’s about belonging. From that belonging, action becomes inevitable.” </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">End</a> </div> <style> body { margin: 0; padding: 0; background-image: url('loin.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; font-family: sans-serif; color: white; height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; display: flex; justify-content: space-between; align-items: flex-start; padding: 30px 40px 10px 40px; box-sizing: border-box; gap: 30px; overflow: hidden; } .text-container { flex: 1; max-width: 55%; font-size: 0.85em; line-height: 1.4em; overflow-y: auto; } .italic-text { font-style: italic; color: #ece5ff; } .image-container { max-width: 40%; flex-shrink: 0; } .image-container img { width: 100%; height: auto; display: block; } .choices-container { display: flex; justify-content: space-between; padding: 10px 40px 20px 40px; box-sizing: border-box; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1em; } /* Optional: responsive adjustment */ @media (max-width: 768px) { .main-content { flex-direction: column; align-items: center; padding: 20px; } .text-container, .image-container { max-width: 100%; } .choices-container { flex-direction: column; align-items: center; gap: 10px; } } </style> <body> <div class="main-content"> <div class="text-container"> <div class="italic-text"> I would like to show you some of my favorite work.<br><br> Have you ever played <em>Everything</em> by David OReilly?<br><br> In that game, you can become anything—trees, stars, continents—and feel their rhythms, their movements. It forces you to wonder: what does it truly mean to live? What if life exists on scales we can barely comprehend?<br><br> When I embodied a continent in that game, I saw how it breathed, how it shifted imperceptibly over millennia. We humans, so fleeting, cannot fathom such time. It made me realize we are only threads in a tapestry far vaster than ourselves. Perhaps you’ve already seen glimpses of this tapestry, haven’t you? </div> </div> <div class="image-container"> <img src="https://th.bing.com/th/id/R.96fec17577ed3aac4b4cdae93792645a?rik=1UiNlUU2yo0Rvg&riu=http%3a%2f%2fwww.cartoonbrew.com%2fwp-content%2fuploads%2f2017%2f04%2fEverything_10-c-David-OReilly-2017.jpg&ehk=EYrpNcyNGeQ%2fBnlBL4I5E4%2fWfZfWPEFFKErgA7Ek6w8%3d&risl=&pid=ImgRaw&r=0" alt="Everything by David OReilly"> </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Next')">Next</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Accueil')">End</a> </div> </body> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } .accueil-container p { font-size: 1em; margin-bottom: 20px; } .italic-text { font-style: italic; font-size: 1em; color: white; margin-bottom: 20px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <p> The vase seals itself in your hands, warm and heavy. You feel its burden, the echo of its lost water, yet it remains with you— a reminder of what was broken and rebuilt. The void lightens, and you begin to walk forward, though the path remains uncertain. </p> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Look inside the vase.')">Enter the vase?</a> </div> <style> body { background-image: url('Inside.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } /* Conteneur général */ .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; color: white; } /* Texte principal */ .accueil-container p { font-size: 1em; margin-bottom: 20px; } /* Texte en italique */ .italic-text { font-style: italic; font-size: 1em; margin-bottom: 20px; } /* Zone des choix */ .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> Your body is now food. You will be consumed; it is simply the destiny of those who choose to take a closer look. Accept your fate, for resistance is futile. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Acc1')">What is going to happen now?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Acc1')">Did you trick me?</a> </div> <style> body { background-image: url('Intro3Dimage.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .intro-container { position: absolute; top: 40px; left: 40px; max-width: 600px; font-size: 1em; line-height: 1.6; text-align: left; color: white; margin-bottom: 40px; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container .link-internal { font-weight: bold; color: white; text-decoration: none; font-size: 1.2em; } </style> <div class="intro-container"> Welcome to this interactive experience, <strong>The Final Vessel</strong>. This short story will be guided by the choices you make, simply by touching the ceramic vases in front of you. A very light touch is enough to select one of the three choices displayed on screen. You can stop the experience at any time — the game will return to the beginning after 1 minute of inactivity. </div> <div class="choices-container"> [[Start|Start]] [[Start|Start]] [[Start|Start]] </div> <style> body { background-image: url('VaseSeulPart1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; } .accueil-container { position: absolute; top: 50px; left: 50px; max-width: 600px; text-align: left; } .accueil-container p, .italic-text { font-size: 1em; color: white; margin-bottom: 20px; } .italic-text { font-style: italic; } .choices-container { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 40px; } .choices-container a { font-weight: bold; color: white; text-decoration: none; font-size: 1.1em; } </style> <div class="accueil-container"> <div class="italic-text"> Yes! Let's get closer and see together what the vase holds in its ceramic walls. </div> </div> <div class="choices-container"> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4*3')">Didn't you say I should go away?</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4')">Okay, that seems like the right path for this game.</a> <a href="javascript:void(0)" onclick="SugarCube.Engine.play('Q4')">Maybe you could tell me a bit more about what is going on here first.</a> </div>