Creation Details
Prompt: “<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MUGEN — Scénario Manga</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Shippori+Mincho:wght@400;600;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--ink: #0a0a0f;
--paper: #f5f0e8;
--blood: #c0392b;
--gold: #d4a843;
--ash: #8a8a9a;
--void: #12121a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--ink);
color: var(--paper);
font-family: 'Shippori Mincho', serif;
overflow-x: hidden;
cursor: crosshair;
}
/* --- HERO --- */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 60px 20px;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 50% 40%, rgba(192,57,43,0.12) 0%, transparent 70%),
repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(245,240,232,0.02) 60px, rgba(245,240,232,0.02) 61px),
repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(245,240,232,0.02) 60px, rgba(245,240,232,0.02) 61px);
pointer-events: none;
}
.kanji-bg {
position: absolute;
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(120px, 25vw, 320px);
color: rgba(245,240,232,0.03);
letter-spacing: -10px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
pointer-events: none;
animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% { opacity: 0.03; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.06; transform: translate(-50%, -50%) scale(1.02); }
}
.label {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 6px;
color: var(--blood);
text-transform: uppercase;
margin-bottom: 24px;
animation: fadeUp 1s ease both;
}
.title {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(52px, 12vw, 140px);
font-weight: 900;
line-height: 0.9;
text-align: center;
letter-spacing: -2px;
animation: fadeUp 1s ease 0.2s both;
position: relative;
}
.title .stroke {
-webkit-text-stroke: 2px var(--paper);
color: transparent;
}
.title .solid {
color: var(--paper);
}
.subtitle {
font-family: 'Space Mono', monospace;
font-size: clamp(10px, 1.5vw, 13px);
letter-spacing: 4px;
color: var(--ash);
margin-top: 20px;
text-align: center;
animation: fadeUp 1s ease 0.4s both;
}
.divider {
width: 1px;
height: 80px;
background: linear-gradient(to bottom, transparent, var(--blood), transparent);
margin: 40px auto;
animation: fadeUp 1s ease 0.6s both;
}
.tagline {
font-size: clamp(15px, 2.5vw, 20px);
color: var(--paper);
text-align: center;
max-width: 600px;
line-height: 1.8;
font-weight: 600;
animation: fadeUp 1s ease 0.8s both;
}
.tagline em {
color: var(--gold);
font-style: normal;
}
.scroll-hint {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: 4px;
color: var(--ash);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- SECTIONS --- */
section {
max-width: 900px;
margin: 0 auto;
padding: 80px 30px;
border-bottom: 1px solid rgba(245,240,232,0.08);
}
.section-number {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 6px;
color: var(--blood);
margin-bottom: 16px;
display: block;
}
h2 {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(22px, 4vw, 40px);
font-weight: 700;
margin-bottom: 40px;
line-height: 1.2;
}
h3 {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(14px, 2.5vw, 20px);
color: var(--gold);
margin-bottom: 16px;
margin-top: 40px;
}
p {
font-size: clamp(14px, 1.8vw, 17px);
line-height: 1.9;
color: rgba(245,240,232,0.85);
margin-bottom: 20px;
}
strong { color: var(--paper); font-weight: 800; }
em { color: var(--gold); font-style: normal; }
/* --- PREMISE BOX --- */
.premise-box {
border: 1px solid rgba(192,57,43,0.4);
padding: 32px;
position: relative;
margin: 40px 0;
background: rgba(192,57,43,0.05);
}
.premise-box::before {
content: '「';
position: absolute;
top: -20px;
left: 20px;
font-family: 'Cinzel Decorative', cursive;
font-size: 40px;
color: var(--blood);
background: var(--ink);
padding: 0 8px;
}
.premise-box::after {
content: '」';
position: absolute;
bottom: -20px;
right: 20px;
font-family: 'Cinzel Decorative', cursive;
font-size: 40px;
color: var(--blood);
background: var(--ink);
padding: 0 8px;
}
/* --- CHARACTERS --- */
.char-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2px;
margin: 40px 0;
}
.char-card {
background: rgba(245,240,232,0.03);
padding: 28px;
border-top: 3px solid var(--blood);
transition: background 0.3s;
position: relative;
overflow: hidden;
}
.char-card::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 60px; height: 60px;
background: radial-gradient(circle, rgba(192,57,43,0.15), transparent);
pointer-events: none;
}
.char-card:hover {
background: rgba(245,240,232,0.06);
}
.char-name {
font-family: 'Cinzel Decorative', cursive;
font-size: 16px;
color: var(--paper);
margin-bottom: 4px;
}
.char-role {
font-family: 'Space Mono', monospace;
font-size: 10px;
letter-spacing: 4px;
color: var(--blood);
margin-bottom: 16px;
}
.char-desc {
font-size: 13px;
line-height: 1.7;
color: var(--ash);
}
/* --- ARCS --- */
.arc {
display: flex;
gap: 24px;
margin: 30px 0;
padding: 24px 0;
border-bottom: 1px solid rgba(245,240,232,0.06);
}
.arc-num {
font-family: 'Cinzel Decorative', cursive;
font-size: 48px;
font-weight: 900;
color: rgba(245,240,232,0.08);
line-height: 1;
min-width: 60px;
flex-shrink: 0;
}
.arc-content h4 {
font-family: 'Cinzel Decorative', cursive;
font-size: 15px;
color: var(--gold);
margin-bottom: 10px;
}
.arc-content p {
font-size: 14px;
color: var(--ash);
margin: 0;
}
/* --- THEMES --- */
.themes-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 30px 0;
}
.theme-tag {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 3px;
padding: 8px 16px;
border: 1px solid rgba(212,168,67,0.4);
color: var(--gold);
text-transform: uppercase;
}
/* --- WHY TOP 3 --- */
.reason-list {
counter-reset: reasons;
list-style: none;
margin: 30px 0;
}
.reason-list li {
counter-increment: reasons;
display: flex;
gap: 20px;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(245,240,232,0.06);
}
.reason-list li::before {
content: counter(reasons, decimal-leading-zero);
font-family: 'Space Mono', monospace;
font-size: 11px;
color: var(--blood);
min-width: 30px;
padding-top: 2px;
}
.reason-text strong {
display: block;
font-family: 'Cinzel Decorative', cursive;
font-size: 14px;
margin-bottom: 8px;
}
.reason-text p {
font-size: 14px;
color: var(--ash);
margin: 0;
}
/* --- FINAL --- */
.final {
text-align: center;
padding: 100px 30px;
position: relative;
}
.final::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(192,57,43,0.08) 0%, transparent 70%);
pointer-events: none;
}
.final-quote {
font-family: 'Shippori Mincho', serif;
font-size: clamp(18px, 3vw, 28px);
font-weight: 800;
line-height: 1.6;
max-width: 700px;
margin: 0 auto 40px;
color: var(--paper);
}
.final-sign {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 6px;
color: var(--blood);
}
/* SCROLL REVEAL */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- HERO -->
<div class="hero">
<div class="kanji-bg">MUGEN</div>
<span class="label">Scénario Original — Manga Shōnen / Seinen</span>
<h1 class="title">
<span class="stroke">MU</span><span class="solid">GEN</span>
</h1>
<p class="subtitle">無限 — L'Infini qui Dévore · 2025</p>
<div class="divider"></div>
<p class="tagline">
Dans un monde où <em>mourir est interdit</em>,<br>
un seul homme cherche encore à trouver un sens à sa vie.
</p>
<span class="scroll-hint">↓ DÉROULER ↓</span>
</div>
<!-- UNIVERS -->
<section class="reveal">
<span class="section-number">01 — UNIVERS</span>
<h2>Le Monde Sans Fin</h2>
<div class="premise-box">
<p style="margin:0; font-size: clamp(15px, 2vw, 18px); font-weight:600;">Il y a 300 ans, l'humanité a vaincu la mort. Pas par la science. Par un <em>Pacte</em> conclu avec une entité inconnue appelée <strong>le Vide</strong>. En échange de l'immortalité universelle, chaque être humain cède, à sa naissance, une fraction de son âme — appelée son <em>Éclat</em>.</p>
</div>
<p>Les humains ne meurent plus. Ils se blessent, souffrent, se régénèrent. Une guerre ne tue plus personne — elle inflige juste une douleur éternelle. Les prisons n'existent plus : on punit en effaçant les souvenirs. La vieillesse s'arrête à 30 ans. La surpopulation est gérée par un gouvernement mondial appelé <strong>l'Arche</strong>.</p>
<p>En apparence, c'est un paradis. En réalité, c'est <em>l'enfer le plus sophistiqué jamais construit</em>. Sans la mort comme horizon, sans la finitude pour donner du prix aux choses, les humains ont perdu quelque chose d'essentiel : le sens de l'urgence. De l'amour. De la lutte.</p>
<p>Personne ne se bat vraiment pour rien. Personne ne risque rien. Personne ne <strong>vit</strong> vraiment.</p>
</section>
<!-- SYNOPSIS -->
<section class="reveal">
<span class="section-number">02 — SYNOPSIS</span>
<h2>L'Homme qui Voulait Mourir</h2>
<p><strong>Kaï Sora</strong>, 28 ans (apparents), est un anomalie : il est le seul humain sur Terre dont l'Éclat a été restitué. Il peut donc <em>mourir</em>. Le Vide lui a rendu sa mortalité — sans explication.</p>
<p>Depuis, il est une légende urbaine, un mythe vivant. L'Arche veut le capturer pour comprendre comment tuer à nouveau. Les cultes religieux le vénèrent comme un dieu. Les rebelles le veulent comme symbole. Et le Vide... l'observe.</p>
<p>Mais Kaï, lui, ne veut qu'une chose : <em>comprendre pourquoi le Vide l'a choisi</em>. Sa quête le mène à travers un monde fracturé — des mégalopoles éternelles où vivent des milliards de gens qui ont oublié de rêver, des zones sauvages où vivent des <strong>Exilés</strong> ayant mutilé leurs propres corps pour <em>ressentir</em>, et enfin vers la frontière même du Pacte originel.</p>
<p>Au fil de son voyage, Kaï réalise une vérité terrifiante : <strong>le Vide ne lui a pas rendu sa mort. Il l'a transformé en outil pour la redistribuer.</strong></p>
</section>
<!-- PERSONNAGES -->
<section class="reveal">
<span class="section-number">03 — PERSONNAGES</span>
<h2>La Distribution</h2>
<div class="char-grid">
<div class="char-card">
<div class="char-name">Kaï Sora</div>
<div class="char-role">Protagoniste — Le Mortel</div>
<div class="char-desc">Calme, acéré, profondément fatigué d'un monde qui ne finit jamais. Son humour noir cache une mélancolie philosophique. Il ne cherche pas à être un héros — il cherche à comprendre. Sa mortalité le rend paradoxalement plus vivant que tous ceux qui l'entourent.</div>
</div>
<div class="char-card">
<div class="char-name">Yui Eraste</div>
<div class="char-role">Antagoniste — Directrice de l'Arche</div>
<div class="char-desc">500 ans d'âge réel, apparence de 30 ans. Elle a construit l'Arche en croyant protéger l'humanité. Elle commence à comprendre qu'elle l'a emprisonnée. Ni villain, ni alliée — elle est la question que Kaï n'arrive pas à résoudre.</div>
</div>
<div class="char-card">
<div class="char-name">Rein</div>
<div class="char-role">Compagnon — L'Exilé</div>
<div class="char-desc">Ancien soldat qui s'est arraché les bras pour les remplacer par des prothèses qui ne guérissent pas. Il vit avec la douleur pour se sentir humain. Guide de Kaï dans les zones sauvages. Loyal jusqu'à l'absurde. Comic relief tragique.</div>
</div>
<div class="char-card">
<div class="char-name">Le Vide</div>
<div class="char-role">Mystère — L'Entité du Pacte</div>
<div class="char-desc">Ne parle jamais directement. Communique via des coïncidences, des rêves, des morts qui ne devraient pas être possibles. Sa nature reste ambiguë jusqu'au dernier arc : est-il un dieu, une conscience collective refoulée, ou simplement la mort elle-même qui refuse de disparaître ?</div>
</div>
<div class="char-card">
<div class="char-name">Noa Satori</div>
<div class="char-role">Alliée — La Chercheuse</div>
<div class="char-desc">Scientifique de l'Arche qui a découvert que les Éclats collectés par le Vide forment quelque chose. Elle trahit tout pour rejoindre Kaï. Rationaliste dans un monde de mystère. Son arc : apprendre que certaines vérités ne se prouvent pas, elles se vivent.</div>
</div>
<div class="char-card">
<div class="char-name">Ash</div>
<div class="char-role">Antagoniste secondaire — Le Fanatique</div>
<div class="char-desc">Chef d'un culte qui vénère Kaï comme "le Messie de la Fin". Il croit sincèrement que l'immortalité est une malédiction et que Kaï doit "libérer" l'humanité en la tuant. Effrayant précisément parce qu'il n'a pas entièrement tort.</div>
</div>
</div>
</section>
<!-- ARCS -->
<section class="reveal">
<span class="section-number">04 — STRUCTURE NARRATIVE</span>
<h2>Les Cinq Arcs</h2>
<div class="arc">
<div class="arc-num">01</div>
<div class="arc-content">
<h4>L'Éveil du Mortel</h4>
<p>Kaï découvre sa mortalité lors d'un "accident" — sa première vraie blessure qui ne guérit pas. L'Arche lance sa traque. Il fuit vers les zones sauvages et rencontre Rein. Ton : thriller urbain sombre avec moments d'humour absurde.</p>
</div>
</div>
<div class="arc">
<div class="arc-num">02</div>
<div class="arc-content">
<h4>Les Terres des Exilés</h4>
<p>Immersion dans des communautés qui ont choisi la douleur pour rester humains. Kaï confronte la question : est-ce la mort qui donne sens à la vie, ou la souffrance ? First meeting avec Noa. Flashbacks sur les 300 premières années post-Pacte.</p>
</div>
</div>
<div class="arc">
<div class="arc-num">03</div>
<div class="arc-content">
<h4>Le Culte de la Fin</h4>
<p>Ash kidnappe Kaï pour en faire son Messie. Kaï doit déjouer le culte de l'intérieur sans devenir le symbole qu'Ash veut créer. Arc psychologique intense. Confrontation philosophique entre deux visions de la libération.</p>
</div>
</div>
<div class="arc">
<div class="arc-num">04</div>
<div class="arc-content">
<h4>Le Procès de l'Arche</h4>
<p>Kaï se livre à Yui. Procès mondial retransmis. Il révèle ce que le Vide collecte avec les Éclats. Yui réalise que l'Arche est complice d'une chose qu'elle ne comprend pas. Le monde commence à choisir son camp.</p>
</div>
</div>
<div class="arc">
<div class="arc-num">05</div>
<div class="arc-content">
<h4>La Frontière du Pacte</h4>
<p>Kaï rejoint le lieu originel du Pacte. Il comprend ce qu'est vraiment le Vide. La révélation remet en question tout — y compris si "rendre la mort" à l'humanité est une libération ou une nouvelle forme de violence. La fin reste délibérément ouverte.</p>
</div>
</div>
</section>
<!-- THÈMES -->
<section class="reveal">
<span class="section-number">05 — ADN THÉMATIQUE</span>
<h2>Ce que MUGEN dit du Monde</h2>
<p>MUGEN n'est pas un manga sur l'immortalité. C'est un manga sur <em>ce que les humains font de leur temps</em> — et sur le fait que sans limite, sans urgence, la liberté devient une prison invisible.</p>
<p>Chaque arc explore une réponse différente à la même question : <strong>"Comment vivre quand on ne peut pas mourir ?"</strong> La réponse de l'Arche est le contrôle. Celle des Exilés est la douleur. Celle du culte est l'apocalypse. Celle de Kaï... est l'enquête.</p>
<div class="themes-list">
<span class="theme-tag">Finitude & Sens</span>
<span class="theme-tag">Liberté vs Sécurité</span>
<span class="theme-tag">Identité sans Mémoire</span>
<span class="theme-tag">Le Deuil comme Amour</span>
<span class="theme-tag">Pouvoir & Consentement</span>
<span class="theme-tag">Le Corps comme Résistance</span>
<span class="theme-tag">Transcendance</span>
<span class="theme-tag">L'Absurde</span>
</div>
<h3>Influence & Positionnement</h3>
<p>MUGEN fonctionne à l'intersection de <strong>Berserk</strong> (profondeur philosophique, violence signifiante), <strong>Death Note</strong> (tension psychologique, antagonistes crédibles), <strong>Vinland Saga</strong> (évolution radicale du protagoniste, arc de rédemption) et <strong>Nier: Automata</strong> (questions existentielles via le prisme de l'action).</p>
<p>Mais MUGEN est <em>plus contemporain</em> dans ses questions : il parle de notre rapport à la mort à l'ère de la médecine transhumaniste, de l'addiction aux réseaux (vivre éternellement sans jamais vraiment vivre), et du consentement collectif.</p>
</section>
<!-- POURQUOI TOP 3 -->
<section class="reveal">
<span class="section-number">06 — ANALYSE STRATÉGIQUE</span>
<h2>Pourquoi MUGEN peut entrer dans le Top 3 Mondial</h2>
<ul class="reason-list">
<li>
<div class="reason-text">
<strong>Une prémisse immédiatement saisissable</strong>
<p>« Et si l'immortalité était le pire cadeau jamais fait à l'humanité ? » — Une phrase suffit pour accrocher n'importe quel lecteur du monde. Universellement compréhensible, culturellement neutre, philosophiquement riche.</p>
</div>
</li>
<li>
<div class="reason-text">
<strong>Un protagoniste à contre-courant</strong>
<p>Kaï n'est pas un héros surpuissant. Il est vulnérable dans un monde invulnérable. Cette inversion crée une tension narrative permanente et une identification immédiate — il ressemble à ce que nous sommes tous : mortels dans un monde qui nie la mort.</p>
</div>
</li>
<li>
<div class="reason-text">
<strong>Des antagonistes sans manichéisme</strong>
<p>Yui, Ash et le Vide ont tous raison sur quelque chose. Cette complexité morale est la marque des œuvres qui durent — de Berserk à Game of Thrones. Le lecteur ne sait jamais complètement qui soutenir.</p>
</div>
</li>
<li>
<div class="reason-text">
<strong>Un rythme pensé pour l'ère du manga digital</stron”
Art Style: American Superhero
Color Mode: Full Color
Panels: 2
Created: