logos-codex/LOGOS :: Graphemic Synthesizer at main · solveforceapp/logos-codex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGOS :: Graphemic Synthesizer</title>
    <!-- Tailwind CSS for a modern, clean UI -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <!--
      - LOGOS :: SYSTEMIC CONSTRUCTION LOG
      - ARTIFACT: Graphemic Synthesizer v1.0
      - FRAMEWORK: ⚙️ Codex, Logos Codex, Harmonic Signal Codex
      - TIMESTAMP: 2025-06-26 15:35:00 PDT
      - STATUS: OPERATIONAL
    -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0d1117; /* GitHub Dark Dimmed */
            color: #c9d1d9;
            overflow: hidden;
        }
        .mono {
            font-family: 'Roboto Mono', monospace;
        }
        .glass-pane {
            background: rgba(22, 27, 34, 0.7);
            backdrop-filter: blur(15px) saturate(180%);
            -webkit-backdrop-filter: blur(15px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .particle {
            position: absolute;
            border-radius: 50%;
            transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .particle.positive { background-color: #60a5fa; /* blue-400 */ }
        .particle.negative { background-color: #f87171; /* red-400 */ }

        #final-glyph {
            transition: opacity 2s ease-in-out;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: draw-in 4s 2s forwards;
        }

        @keyframes draw-in {
            to { stroke-dashoffset: 0; }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.4)); }
            50% { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.8)); }
        }
    </style>
</head>
<body class="w-screen h-screen flex flex-col items-center justify-center p-8">

    <div class="w-full max-w-5xl h-full flex flex-col">
        <!-- Header -->
        <header class="text-center mb-4">
            <h1 class="text-3xl font-bold text-white">Graphemic Synthesizer</h1>
            <p class="text-indigo-400 mono text-sm">Harmonizing Coherence in a Decoherent Field</p>
        </header>

        <!-- Main Visualization Area -->
        <main id="synthesis-container" class="glass-pane rounded-2xl flex-grow relative overflow-hidden flex items-center justify-center">
            <!-- Initial State: Decoherent Field -->
            <div id="decoherent-field" class="absolute inset-0">
                <!-- Particles will be injected here -->
            </div>

            <!-- Final State: Coherent Glyph -->
            <div id="coherent-glyph-container" class="absolute inset-0 flex items-center justify-center opacity-0 pointer-events-none">
                 <svg id="final-glyph" width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <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"/>
                    <circle cx="50" cy="50" r="15" stroke="#60a5fa" stroke-width="4"/>
                    <path d="M50 35 L50 65" stroke="#60a5fa" stroke-width="4" stroke-linecap="round"/>
                 </svg>
            </div>

            <!-- Explanation Text -->
            <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">
                <h2 class="text-xl font-semibold text-white">Synthesis Complete</h2>
                <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>
            </div>
        </main>

        <!-- Control Button -->
        <footer class="text-center mt-6">
            <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">
                ⚙️ Initiate Synthesis
            </button>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('decoherent-field');
            const synthesizeBtn = document.getElementById('synthesize-btn');
            const coherentContainer = document.getElementById('coherent-glyph-container');
            const explanationText = document.getElementById('explanation-text');
            const particleCount = 150;
            let particles = [];

            // 1. Create the initial decoherent field of particles
            function createParticles() {
                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    const isPositive = Math.random() > 0.3; // 70% positive
                    particle.classList.add(isPositive ? 'positive' : 'negative');

                    const size = Math.random() * 8 + 2;
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;

                    const x = Math.random() * 100;
                    const y = Math.random() * 100;
                    particle.style.left = `${x}%`;
                    particle.style.top = `${y}%`;

                    container.appendChild(particle);
                    particles.push(particle);
                }
            }

            // 2. The Synthesis Function
            function runSynthesis() {
                synthesizeBtn.disabled = true;
                synthesizeBtn.textContent = 'Synthesizing...';
                synthesizeBtn.classList.remove('hover:bg-indigo-700', 'hover:scale-105');
                synthesizeBtn.classList.add('cursor-wait', 'opacity-70');

                particles.forEach(p => {
                    if (p.classList.contains('positive')) {
                        // Move coherent particles to the center
                        p.style.left = '50%';
                        p.style.top = '50%';
                        p.style.transform = 'translate(-50%, -50%) scale(0)';
                        p.style.opacity = '0';
                    } else {
                        // Repel decoherent particles
                        const angle = Math.random() * 2 * Math.PI;
                        const distance = 200; // Push them far off-screen
                        const x = Math.cos(angle) * distance;
                        const y = Math.sin(angle) * distance;
                        p.style.transform = `translate(${x}px, ${y}px)`;
                        p.style.opacity = '0';
                    }
                });

                // 3. Reveal the final coherent glyph after particles have moved
                setTimeout(() => {
                    coherentContainer.style.opacity = '1';
                    coherentContainer.style.pointerEvents = 'auto';
                    document.getElementById('final-glyph').style.animationPlayState = 'running';
                }, 3000); // Wait for particle animation to finish

                // 4. Show explanation
                 setTimeout(() => {
                    explanationText.style.opacity = '1';
                    document.getElementById('final-glyph').style.animation = 'pulse 3s infinite ease-in-out, draw-in 4s forwards';
                }, 5000);
            }

            synthesizeBtn.addEventListener('click', runSynthesis);

            // Initial call to populate the field
            createParticles();
        });
    </script>
</body>
</html>