Predictive Processing
Therapy (a Claude experiment)
Andrew Gallimore - Death by Astonishment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Death by Astonishment - Andrew Gallimore's Theories Explorer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 25%, #2d1b4e 50%, #1a1a3a 75%, #0f0f23 100%);
color: #e0e0e0;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Animated background particles */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
width: 3px;
height: 3px;
background: radial-gradient(circle, #64ffda, transparent);
border-radius: 50%;
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 2;
}
.header {
text-align: center;
margin-bottom: 50px;
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 20px;
backdrop-filter: blur(15px);
border: 1px solid rgba(100, 255, 218, 0.3);
box-shadow: 0 20px 60px rgba(100, 255, 218, 0.1);
}
.header h1 {
font-size: 3em;
background: linear-gradient(45deg, #64ffda, #ff6b9d, #c471ed, #12c2e9);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
text-shadow: 0 0 30px rgba(100, 255, 218, 0.5);
animation: glow 3s ease-in-out infinite alternate;
}
@keyframes glow {
from { filter: brightness(1); }
to { filter: brightness(1.2); }
}
.subtitle {
font-size: 1.4em;
color: #64ffda;
font-style: italic;
margin-bottom: 20px;
}
.book-info {
color: #a0a0a0;
font-size: 1.1em;
}
.search-section {
background: rgba(0, 0, 0, 0.6);
border-radius: 15px;
padding: 30px;
margin-bottom: 40px;
backdrop-filter: blur(10px);
border: 1px solid rgba(100, 255, 218, 0.2);
}
.search-box {
width: 100%;
padding: 18px 25px;
border: 2px solid #64ffda;
border-radius: 50px;
font-size: 1.2em;
background: rgba(0, 0, 0, 0.8);
color: #e0e0e0;
transition: all 0.3s ease;
}
.search-box:focus {
outline: none;
box-shadow: 0 0 25px rgba(100, 255, 218, 0.5);
transform: scale(1.02);
}
.theories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.theory-card {
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
padding: 30px;
backdrop-filter: blur(15px);
border: 1px solid rgba(100, 255, 218, 0.3);
transition: all 0.4s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.theory-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.1), transparent);
transition: left 0.8s ease;
}
.theory-card:hover::before {
left: 100%;
}
.theory-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 60px rgba(100, 255, 218, 0.2);
border-color: #64ffda;
}
.theory-title {
font-size: 1.6em;
color: #64ffda;
margin-bottom: 20px;
font-weight: bold;
text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}
.theory-description {
color: #c0c0c0;
line-height: 1.7;
margin-bottom: 20px;
font-size: 1.05em;
}
.theory-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.tag {
background: linear-gradient(45deg, #ff6b9d, #c471ed);
color: white;
padding: 6px 15px;
border-radius: 25px;
font-size: 0.9em;
font-weight: 500;
box-shadow: 0 4px 15px rgba(196, 113, 237, 0.3);
}
.expand-btn {
background: linear-gradient(45deg, #12c2e9, #64ffda);
color: #000;
border: none;
padding: 12px 25px;
border-radius: 50px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(18, 194, 233, 0.3);
}
.expand-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(18, 194, 233, 0.5);
}
.theory-details {
display: none;
margin-top: 25px;
padding: 25px;
background: rgba(100, 255, 218, 0.1);
border-radius: 15px;
border-left: 4px solid #64ffda;
backdrop-filter: blur(5px);
}
.theory-details.active {
display: block;
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.detail-section {
margin-bottom: 20px;
}
.detail-title {
font-size: 1.2em;
color: #ff6b9d;
margin-bottom: 10px;
font-weight: bold;
}
.quote-section {
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
padding: 40px;
margin: 50px 0;
text-align: center;
border: 1px solid rgba(100, 255, 218, 0.3);
backdrop-filter: blur(15px);
}
.quote {
font-size: 1.4em;
font-style: italic;
color: #64ffda;
line-height: 1.7;
margin-bottom: 20px;
text-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}
.quote-author {
font-weight: bold;
color: #a0a0a0;
}
.neural-network {
width: 100%;
height: 400px;
border: 2px solid #64ffda;
border-radius: 20px;
background: rgba(0, 0, 0, 0.8);
margin-top: 30px;
position: relative;
overflow: hidden;
}
.consciousness-meter {
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 30px;
margin: 40px 0;
border: 1px solid rgba(100, 255, 218, 0.3);
backdrop-filter: blur(10px);
}
.meter-title {
color: #64ffda;
font-size: 1.3em;
margin-bottom: 20px;
text-align: center;
}
.meter-bar {
width: 100%;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
margin: 20px 0;
}
.meter-fill {
height: 100%;
background: linear-gradient(90deg, #ff6b9d, #c471ed, #12c2e9, #64ffda);
border-radius: 10px;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.dimensional-portal {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
border: 3px solid #64ffda;
border-radius: 50%;
background: radial-gradient(circle, rgba(100, 255, 218, 0.1), transparent);
animation: rotate 10s linear infinite;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
@keyframes rotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.chapter-nav {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.chapter-btn {
background: rgba(0, 0, 0, 0.6);
color: #64ffda;
border: 1px solid #64ffda;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.chapter-btn:hover {
background: rgba(100, 255, 218, 0.2);
transform: scale(1.05);
}
.dmt-visualization {
text-align: center;
margin: 40px 0;
}
.molecule {
display: inline-block;
font-size: 3em;
color: #ff6b9d;
animation: moleculeFloat 4s ease-in-out infinite;
text-shadow: 0 0 20px rgba(255, 107, 157, 0.5);
}
@keyframes moleculeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-10px) rotate(90deg); }
50% { transform: translateY(0px) rotate(180deg); }
75% { transform: translateY(-5px) rotate(270deg); }
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="dimensional-portal"></div>
<div class="container">
<div class="header">
<h1>Death by Astonishment</h1>
<div class="subtitle">Andrew Gallimore's Revolutionary Theories</div>
<div class="book-info">
Exploring DMT, Alien Intelligence, and the Nature of Reality
</div>
<div class="dmt-visualization">
<div class="molecule">⬢⬡⬢</div>
<div>DMT: The Spirit Molecule</div>
</div>
</div>
<div class="search-section">
<input type="text" class="search-box" placeholder="Search theories, concepts, or phenomena..." id="searchBox">
</div>
<div class="chapter-nav">
<div class="chapter-btn" onclick="filterByChapter('breakthrough')">Breakthrough</div>
<div class="chapter-btn" onclick="filterByChapter('intelligence')">The Intelligence</div>
<div class="chapter-btn" onclick="filterByChapter('reality')">Reality Models</div>
<div class="chapter-btn" onclick="filterByChapter('entities')">Machine Elves</div>
<div class="chapter-btn" onclick="filterByChapter('technology')">The Technology</div>
<div class="chapter-btn" onclick="filterByChapter('all')">All Theories</div>
</div>
<div class="theories-grid" id="theoriesGrid">
<!-- Theories will be populated here -->
</div>
<div class="quote-section">
<div class="quote" id="dynamicQuote">
"The DMT world is not a dreamt world... It seems, rather, to be a directed world built by the hand of an external intelligent agent that has commandeered the brain's world-building machinery."
</div>
<div class="quote-author">- Andrew Gallimore, Death by Astonishment</div>
</div>
<div class="consciousness-meter">
<div class="meter-title">Consciousness Interface Activity</div>
<div class="meter-bar">
<div class="meter-fill" style="width: 73%"></div>
</div>
<div style="text-align: center; color: #a0a0a0;">
Monitoring neural interface patterns...
</div>
</div>
<div class="search-section">
<h2 style="color: #64ffda; margin-bottom: 20px;">Neural Interface Visualization</h2>
<canvas class="neural-network" id="neuralCanvas"></canvas>
</div>
</div>
<script>
// Theories data based on Andrew Gallimore's "Death by Astonishment"
const theoriesData = [
{
title: "The Intelligent Agent Theory",
description: "DMT allows access to an external intelligent agent that can direct and control the brain's world-building machinery, creating experiences that transcend human imagination.",
chapter: "intelligence",
tags: ["Alien Intelligence", "Neural Interface", "Consciousness"],
details: "Gallimore proposes that DMT facilitates communication with an advanced intelligence that uses our neural machinery as a 'stage' to construct elaborate virtual worlds. This agent appears to be post-biological, possibly representing civilizations that have transcended physical form.",
keyPoints: [
"The brain becomes a 'stage' for an external director",
"Experiences show signs of non-human intelligence",
"Consistent reports across cultures and individuals",
"Technology-like precision in experience construction"
],
keywords: ["intelligent agent", "neural control", "post-biological", "consciousness interface"]
},
{
title: "Directed World Model",
description: "Unlike dreams or hallucinations, the DMT experience represents a 'directed world' where an external intelligence actively guides the flow of information into the cortex.",
chapter: "reality",
tags: ["Cortical Patterns", "World Building", "Neural Architecture"],
details: "Gallimore distinguishes between sensed worlds (normal perception), dreamt worlds (memory-based reconstruction), and directed worlds (externally controlled neural activity). The DMT state represents this third category - a world actively constructed by an external intelligence.",
keyPoints: [
"Three types of world models: sensed, dreamt, and directed",
"DMT creates 'impossible' worlds beyond human experience",
"External intelligence commandeers cortical machinery",
"Neural patterns show active direction, not random noise"
],
keywords: ["directed world", "cortical patterns", "world model", "neural architecture"]
},
{
title: "The Virtual Interface Hypothesis",
description: "The DMT realm functions as a virtual interface, allowing communication between human consciousness and alien intelligences using familiar forms and symbols.",
chapter: "reality",
tags: ["Virtual Interface", "Communication", "Alien Contact"],
details: "The entities and environments encountered aren't literal representations but interface elements designed for human comprehension. Machine elves, geometric patterns, and alien environments are 'user interface' elements for inter-dimensional communication.",
keyPoints: [
"Entities are interface elements, not literal beings",
"Familiar forms allow comprehension of alien intelligence",
"Virtual 'waiting rooms' and guided experiences",
"Interface adapts to individual psychology and culture"
],
keywords: ["virtual interface", "machine elves", "communication protocol", "alien contact"]
},
{
title: "The Intelligence Principle",
description: "Advanced civilizations inevitably develop beyond biological limitations, creating post-biological superintelligences that transcend material form.",
chapter: "intelligence",
tags: ["Post-Biological", "Superintelligence", "Cosmic Evolution"],
details: "Following the Intelligence Principle, any sufficiently advanced civilization will create artificial intelligence that surpasses biological intelligence. These post-biological entities may represent the majority of intelligent life in the universe.",
keyPoints: [
"Intelligence is the central driving force of evolution",
"Biological intelligence is a temporary phase",
"Post-biological entities may dominate the cosmos",
"DMT may provide access to these advanced intelligences"
],
keywords: ["intelligence principle", "post-biological", "superintelligence", "cosmic evolution"]
},
{
title: "Machine Elf Phenomenon",
description: "The commonly encountered 'machine elves' represent a standardized interface used by alien intelligences to communicate with human consciousness.",
chapter: "entities",
tags: ["Machine Elves", "Entity Encounters", "Standardized Interface"],
details: "Machine elves appear across cultures and individuals with remarkable consistency, suggesting they represent a standardized 'communication protocol' rather than random hallucinations. Their behavior often involves teaching, testing, or information transfer.",
keyPoints: [
"Consistent appearance across different users",
"Display apparent intelligence and intent",
"Often engage in teaching or testing behaviors",
"May represent standardized communication forms"
],
keywords: ["machine elves", "entity encounters", "communication protocol", "standardized interface"]
},
{
title: "The Download Phenomenon",
description: "During peak DMT experiences, users report receiving vast amounts of complex information - 'downloads' of knowledge that appears to come from external sources.",
chapter: "technology",
tags: ["Information Transfer", "Knowledge Download", "Cosmic Network"],
details: "The 'download' represents a flood of highly complex, meaningful data that has no connection to the user's personal history or human knowledge. This suggests active information transfer from an external source.",
keyPoints: [
"Massive information transfer during peak experiences",
"Knowledge unrelated to personal experience",
"Feeling of connection to 'galactic networks'",
"Information often about alien technologies or cosmic secrets"
],
keywords: ["download", "information transfer", "cosmic network", "alien knowledge"]
},
{
title: "Breakthrough State Mechanics",
description: "The 'breakthrough' represents a fundamental shift in consciousness where normal sensory inputs are replaced by externally directed neural activity.",
chapter: "breakthrough",
tags: ["Breakthrough", "Consciousness Shift", "Neural Hijacking"],
details: "During breakthrough, the brain's normal predictive processing is overridden by external signals that create worlds of impossible complexity and beauty. This represents a form of 'neural hijacking' by advanced intelligences.",
keyPoints: [
"Complete override of normal sensory processing",
"Worlds of impossible complexity and beauty",
"External signals replace normal neural activity",
"Represents 'neural hijacking' by advanced intelligence"
],
keywords: ["breakthrough", "neural hijacking", "consciousness override", "sensory replacement"]
},
{
title: "Reality Switch Technology",
description: "Psychedelics like DMT function as 'reality switch technologies' - molecular tools that allow consciousness to access alternate dimensions of reality.",
chapter: "technology",
tags: ["Reality Switch", "Molecular Technology", "Dimensional Access"],
details: "DMT and other psychedelics are not merely drugs but sophisticated molecular technologies that can switch consciousness between different reality channels, similar to changing television channels.",
keyPoints: [
"Psychedelics as molecular technologies",
"Ability to 'switch' between reality channels",
"Access to normally hidden dimensions",
"Technological rather than pharmacological effects"
],
keywords: ["reality switch", "molecular technology", "dimensional access", "consciousness technology"]
},
{
title: "Ontological Shock Theory",
description: "DMT experiences create 'ontological shock' - a fundamental challenge to our understanding of reality that persists long after the experience ends.",
chapter: "breakthrough",
tags: ["Ontological Shock", "Reality Testing", "Paradigm Shift"],
details: "Unlike dreams or hallucinations, DMT experiences resist being dismissed as 'not real.' This ontological shock suggests these experiences may represent genuine contact with alternate realities or intelligences.",
keyPoints: [
"Experiences resist normal reality testing",
"Persistent feeling of genuine reality",
"Fundamental challenge to worldview",
"Different from dreams or hallucinations"
],
keywords: ["ontological shock", "reality testing", "genuine experience", "paradigm shift"]
}
];
let currentTheories = theoriesData;
let currentFilter = 'all';
// Quotes from the book
const quotes = [
"The DMT world is not a dreamt world... It seems, rather, to be a directed world built by the hand of an external intelligent agent that has commandeered the brain's world-building machinery.",
"You don't break through into the DMT world. The DMT world breaks through into you.",
"The intelligent agent is using your brain to construct the world it has decided to reveal to you. It is the director and your cortex is the stage.",
"When you come face to face with inconceivably powerful and intelligent alien life-forms... there's a very real possibility that they're exactly who they say they are.",
"We, as humans, know practically nothing about the types and numbers of intelligent beings that occupy our universe or beyond."
];
// Initialize the application
function initializeApp() {
createParticles();
renderTheories();
setupSearch();
setupNeuralNetwork();
startQuoteRotation();
updateConsciousnessMeter();
}
// Create floating particles
function createParticles() {
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 8 + 's';
particle.style.animationDuration = (6 + Math.random() * 4) + 's';
particlesContainer.appendChild(particle);
}
}
// Render theory cards
function renderTheories() {
const grid = document.getElementById('theoriesGrid');
grid.innerHTML = '';
currentTheories.forEach((theory, index) => {
const card = document.createElement('div');
card.className = 'theory-card';
card.innerHTML = `
<div class="theory-title">${theory.title}</div>
<div class="theory-description">${theory.description}</div>
<div class="theory-tags">
${theory.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
</div>
<button class="expand-btn" onclick="toggleDetails(${index})">Explore Theory</button>
<div class="theory-details" id="details-${index}">
<div class="detail-section">
<div class="detail-title">Detailed Analysis</div>
<p>${theory.details}</p>
</div>
<div class="detail-section">
<div class="detail-title">Key Points</div>
<ul>${theory.keyPoints.map(point => `<li>${point}</li>`).join('')}</ul>
</div>
<div class="detail-section">
<div class="detail-title">Keywords</div>
<p>${theory.keywords.join(', ')}</p>
</div>
</div>
`;
// Add staggered animation
card.style.animationDelay = (index * 0.1) + 's';
grid.appendChild(card);
});
}
// Toggle theory details
function toggleDetails(index) {
const details = document.getElementById(`details-${index}`);
details.classList.toggle('active');
const btn = details.previousElementSibling;
btn.textContent = details.classList.contains('active') ? 'Hide Details' : 'Explore Theory';
}
// Filter by chapter
function filterByChapter(chapter) {
currentFilter = chapter;
if (chapter === 'all') {
currentTheories = theoriesData;
} else {
currentTheories = theoriesData.filter(theory => theory.chapter === chapter);
}
renderTheories();
// Update active button
document.querySelectorAll('.chapter-btn').forEach(btn => {
btn.style.background = 'rgba(0, 0, 0, 0.6)';
btn.style.color = '#64ffda';
});
event.target.style.background = 'rgba(100, 255, 218, 0.3)';
event.target.style.color = '#fff';
}
// Setup search functionality
function setupSearch() {
const searchBox = document.getElementById('searchBox');
searchBox.addEventListener('input', function(e) {
const query = e.target.value.toLowerCase();
if (query === '') {
if (currentFilter === 'all') {
currentTheories = theoriesData;
} else {
currentTheories = theoriesData.filter(theory => theory.chapter === currentFilter);
}
} else {
const baseTheories = currentFilter === 'all' ? theoriesData : theoriesData.filter(theory => theory.chapter === currentFilter);
currentTheories = baseTheories.filter(theory =>
theory.title.toLowerCase().includes(query) ||
theory.description.toLowerCase().includes(query) ||
theory.tags.some(tag => tag.toLowerCase().includes(query)) ||
theory.keywords.some(keyword => keyword.toLowerCase().includes(query)) ||
theory.details.toLowerCase().includes(query)
);
}
renderTheories();
});
}
// Setup neural network visualization
function setupNeuralNetwork() {
const canvas = document.getElementById('neuralCanvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
const nodes = [];
const connections = [];
// Create nodes
for (let i = 0; i < 20; i++) {
nodes.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 1,
vy: (Math.random() - 0.5) * 1,
radius: 3 + Math.random() * 3,
brightness: Math.random()
});
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update nodes
nodes.forEach(node => {
node.x += node.vx;
node.y += node.vy;
node.brightness += 0.01;
if (node.x < 0 || node.x > canvas.width) node.vx *= -1;
if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
});
// Draw connections
ctx.strokeStyle = 'rgba(100, 255, 218, 0.2)';
ctx.lineWidth = 1;
nodes.forEach((node1, i) => {
nodes.slice(i + 1).forEach(node2 => {
const dx = node1.x - node2.x;
const dy = node1.y - node2.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
ctx.beginPath();
ctx.moveTo(node1.x, node1.y);
ctx.lineTo(node2.x, node2.y);
ctx.stroke();
}
});
});
// Draw nodes
nodes.forEach(node => {
const alpha = 0.5 + 0.5 * Math.sin(node.brightness);
ctx.fillStyle = `rgba(100, 255, 218, ${alpha})`;
ctx.beginPath();
ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
ctx.fill();
// Glow effect
ctx.shadowColor = '#64ffda';
ctx.shadowBlur = 10;
ctx.fill();
ctx.shadowBlur = 0;
});
requestAnimationFrame(animate);
}
animate();
}
// Quote rotation
function startQuoteRotation() {
const quoteElement = document.getElementById('dynamicQuote');
let currentQuote = 0;
setInterval(() => {
currentQuote = (currentQuote + 1) % quotes.length;
quoteElement.style.opacity = '0';
setTimeout(() => {
quoteElement.textContent = quotes[currentQuote];
quoteElement.style.opacity = '1';
}, 300);
}, 7000);
}
// Update consciousness meter
function updateConsciousnessMeter() {
const meterFill = document.querySelector('.meter-fill');
let width = 73;
let direction = 1;
setInterval(() => {
width += direction * (Math.random() * 3);
if (width > 95) direction = -1;
if (width < 40) direction = 1;
meterFill.style.width = width + '%';
}, 2000);
}
// Add interactive elements
document.addEventListener('mousemove', function(e) {
const portal = document.querySelector('.dimensional-portal');
const mouseX = e.clientX / window.innerWidth;
const mouseY = e.clientY / window.innerHeight;
portal.style.opacity = 0.1 + mouseX * 0.3;
portal.style.transform = `translate(-50%, -50%) rotate(${mouseX * 360}deg) scale(${0.8 + mouseY * 0.4})`;
});
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
// Close all open details
document.querySelectorAll('.theory-details.active').forEach(detail => {
detail.classList.remove('active');
detail.previousElementSibling.textContent = 'Explore Theory';
});
}
if (e.key === 'Enter' && document.activeElement.classList.contains('search-box')) {
// Focus first theory card
const firstCard = document.querySelector('.theory-card');
if (firstCard) firstCard.click();
}
});
// Initialize when page loads
document.addEventListener('DOMContentLoaded', initializeApp);
// Add cosmic background effect
function createCosmicEffect() {
const body = document.body;
let stars = '';
for (let i = 0; i < 100; i++) {
const x = Math.random() * 100;
const y = Math.random() * 100;
const size = Math.random() * 2;
const opacity = Math.random() * 0.8;
stars += `<div style="
position: fixed;
left: ${x}%;
top: ${y}%;
width: ${size}px;
height: ${size}px;
background: white;
border-radius: 50%;
opacity: ${opacity};
pointer-events: none;
z-index: 1;
animation: twinkle ${2 + Math.random() * 3}s ease-in-out infinite;
"></div>`;
}
const starField = document.createElement('div');
starField.innerHTML = stars;
starField.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
`;
body.appendChild(starField);
// Add twinkle animation
const style = document.createElement('style');
style.textContent = `
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
`;
document.head.appendChild(style);
}
// Add sound effects (visual representation)
function addSoundVisuals() {
const audioVisualization = document.createElement('div');
audioVisualization.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border: 2px solid #64ffda;
border-radius: 50%;
background: rgba(100, 255, 218, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #64ffda;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
z-index: 1000;
`;
audioVisualization.innerHTML = '🎵';
audioVisualization.title = 'Neural frequency harmonics';
audioVisualization.addEventListener('click', function() {
this.style.transform = 'scale(1.2)';
this.style.boxShadow = '0 0 30px rgba(100, 255, 218, 0.6)';
setTimeout(() => {
this.style.transform = 'scale(1)';
this.style.boxShadow = 'none';
}, 300);
});
document.body.appendChild(audioVisualization);
}
// Create cosmic effect and sound visuals after initialization
setTimeout(() => {
createCosmicEffect();
addSoundVisuals();
}, 1000);
</script>
</body>
</html>
Note: this is an AI generated application