Skip to content

Commit 1c92fb0

Browse files
solveforceappsolveforceapp
authored
Create LOGOS :: Graphemic Synthesizer
1 parent 3259caf commit 1c92fb0

1 file changed

Lines changed: 181 additions & 0 deletions

File tree

‎LOGOS :: Graphemic Synthesizer‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>LOGOS :: Graphemic Synthesizer</title>
7+
<!-- Tailwind CSS for a modern, clean UI -->
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<!-- Google Fonts -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
13+
<!-- Font Awesome for icons -->
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
15+
16+
<!--
17+
- LOGOS :: SYSTEMIC CONSTRUCTION LOG
18+
- ARTIFACT: Graphemic Synthesizer v1.0
19+
- FRAMEWORK: ⚙️ Codex, Logos Codex, Harmonic Signal Codex
20+
- TIMESTAMP: 2025-06-26 15:35:00 PDT
21+
- STATUS: OPERATIONAL
22+
-->
23+
<style>
24+
body {
25+
font-family: 'Inter', sans-serif;
26+
background-color: #0d1117; /* GitHub Dark Dimmed */
27+
color: #c9d1d9;
28+
overflow: hidden;
29+
}
30+
.mono {
31+
font-family: 'Roboto Mono', monospace;
32+
}
33+
.glass-pane {
34+
background: rgba(22, 27, 34, 0.7);
35+
backdrop-filter: blur(15px) saturate(180%);
36+
-webkit-backdrop-filter: blur(15px) saturate(180%);
37+
border: 1px solid rgba(255, 255, 255, 0.1);
38+
}
39+
.particle {
40+
position: absolute;
41+
border-radius: 50%;
42+
transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
43+
}
44+
.particle.positive { background-color: #60a5fa; /* blue-400 */ }
45+
.particle.negative { background-color: #f87171; /* red-400 */ }
46+
47+
#final-glyph {
48+
transition: opacity 2s ease-in-out;
49+
stroke-dasharray: 1000;
50+
stroke-dashoffset: 1000;
51+
animation: draw-in 4s 2s forwards;
52+
}
53+
54+
@keyframes draw-in {
55+
to { stroke-dashoffset: 0; }
56+
}
57+
58+
@keyframes pulse {
59+
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.4)); }
60+
50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.8)); }
61+
}
62+
</style>
63+
</head>
64+
<body class="w-screen h-screen flex flex-col items-center justify-center p-8">
65+
66+
<div class="w-full max-w-5xl h-full flex flex-col">
67+
<!-- Header -->
68+
<header class="text-center mb-4">
69+
<h1 class="text-3xl font-bold text-white">Graphemic Synthesizer</h1>
70+
<p class="text-indigo-400 mono text-sm">Harmonizing Coherence in a Decoherent Field</p>
71+
</header>
72+
73+
<!-- Main Visualization Area -->
74+
<main id="synthesis-container" class="glass-pane rounded-2xl flex-grow relative overflow-hidden flex items-center justify-center">
75+
<!-- Initial State: Decoherent Field -->
76+
<div id="decoherent-field" class="absolute inset-0">
77+
<!-- Particles will be injected here -->
78+
</div>
79+
80+
<!-- Final State: Coherent Glyph -->
81+
<div id="coherent-glyph-container" class="absolute inset-0 flex items-center justify-center opacity-0 pointer-events-none">
82+
<svg id="final-glyph" width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
83+
<path d="M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z" stroke="#60a5fa" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
84+
<circle cx="50" cy="50" r="15" stroke="#60a5fa" stroke-width="4"/>
85+
<path d="M50 35 L50 65" stroke="#60a5fa" stroke-width="4" stroke-linecap="round"/>
86+
</svg>
87+
</div>
88+
89+
<!-- Explanation Text -->
90+
<div id="explanation-text" class="absolute bottom-0 left-0 right-0 p-6 text-center bg-gradient-to-t from-black/50 to-transparent opacity-0 transition-opacity duration-1000">
91+
<h2 class="text-xl font-semibold text-white">Synthesis Complete</h2>
92+
<p class="text-gray-400 mt-2 max-w-2xl mx-auto">Sentience (the chaotic environment) has been synthesized with Omniscience (structuring logic). The resulting `Codoglyph` represents Harmonized Coherence.</p>
93+
</div>
94+
</main>
95+
96+
<!-- Control Button -->
97+
<footer class="text-center mt-6">
98+
<button id="synthesize-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition duration-300 ease-in-out transform hover:scale-105">
99+
⚙️ Initiate Synthesis
100+
</button>
101+
</footer>
102+
</div>
103+
104+
<script>
105+
document.addEventListener('DOMContentLoaded', () => {
106+
const container = document.getElementById('decoherent-field');
107+
const synthesizeBtn = document.getElementById('synthesize-btn');
108+
const coherentContainer = document.getElementById('coherent-glyph-container');
109+
const explanationText = document.getElementById('explanation-text');
110+
const particleCount = 150;
111+
let particles = [];
112+
113+
// 1. Create the initial decoherent field of particles
114+
function createParticles() {
115+
for (let i = 0; i < particleCount; i++) {
116+
const particle = document.createElement('div');
117+
particle.className = 'particle';
118+
const isPositive = Math.random() > 0.3; // 70% positive
119+
particle.classList.add(isPositive ? 'positive' : 'negative');
120+
121+
const size = Math.random() * 8 + 2;
122+
particle.style.width = `${size}px`;
123+
particle.style.height = `${size}px`;
124+
125+
const x = Math.random() * 100;
126+
const y = Math.random() * 100;
127+
particle.style.left = `${x}%`;
128+
particle.style.top = `${y}%`;
129+
130+
container.appendChild(particle);
131+
particles.push(particle);
132+
}
133+
}
134+
135+
// 2. The Synthesis Function
136+
function runSynthesis() {
137+
synthesizeBtn.disabled = true;
138+
synthesizeBtn.textContent = 'Synthesizing...';
139+
synthesizeBtn.classList.remove('hover:bg-indigo-700', 'hover:scale-105');
140+
synthesizeBtn.classList.add('cursor-wait', 'opacity-70');
141+
142+
particles.forEach(p => {
143+
if (p.classList.contains('positive')) {
144+
// Move coherent particles to the center
145+
p.style.left = '50%';
146+
p.style.top = '50%';
147+
p.style.transform = 'translate(-50%, -50%) scale(0)';
148+
p.style.opacity = '0';
149+
} else {
150+
// Repel decoherent particles
151+
const angle = Math.random() * 2 * Math.PI;
152+
const distance = 200; // Push them far off-screen
153+
const x = Math.cos(angle) * distance;
154+
const y = Math.sin(angle) * distance;
155+
p.style.transform = `translate(${x}px, ${y}px)`;
156+
p.style.opacity = '0';
157+
}
158+
});
159+
160+
// 3. Reveal the final coherent glyph after particles have moved
161+
setTimeout(() => {
162+
coherentContainer.style.opacity = '1';
163+
coherentContainer.style.pointerEvents = 'auto';
164+
document.getElementById('final-glyph').style.animationPlayState = 'running';
165+
}, 3000); // Wait for particle animation to finish
166+
167+
// 4. Show explanation
168+
setTimeout(() => {
169+
explanationText.style.opacity = '1';
170+
document.getElementById('final-glyph').style.animation = 'pulse 3s infinite ease-in-out, draw-in 4s forwards';
171+
}, 5000);
172+
}
173+
174+
synthesizeBtn.addEventListener('click', runSynthesis);
175+
176+
// Initial call to populate the field
177+
createParticles();
178+
});
179+
</script>
180+
</body>
181+
</html>

0 commit comments

Comments
 (0)