From f1e47952d205193f620879d71eb079f0de22e400 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sat, 24 May 2025 13:57:14 -0400 Subject: [PATCH] Enhance sacred geometry visibility and interactions Increased opacity values across all sacred geometry layers for better visibility while maintaining subtlety. Added hover effects, transitions, and scroll-based intensity changes. Introduced new sacred geometry layers including Sri Yantra, Tree of Life, and Vesica Piscis patterns. Added particle systems that respond to mouse movement and scroll events. Enhanced time-based variations and user activity responsive animations. Improved responsive behavior across different screen sizes. --- templates/base.html | 563 ++++++++++++++++++++++++++++++++++++++-- templates/homepage.html | 126 ++++++++- templates/post.html | 138 ++++++++++ 3 files changed, 799 insertions(+), 28 deletions(-) diff --git a/templates/base.html b/templates/base.html index c91a464..8c8d839 100644 --- a/templates/base.html +++ b/templates/base.html @@ -95,7 +95,8 @@ height: 100vh; pointer-events: none; z-index: -10; - opacity: 0.03; + opacity: 0.08; + transition: opacity 2s ease; } .sacred-layer-1 { @@ -149,7 +150,13 @@ position: fixed; pointer-events: none; z-index: -5; - opacity: 0.02; + opacity: 0.06; + transition: opacity 1s ease, transform 2s ease; + } + + .floating-sacred:hover { + opacity: 0.12; + transform: scale(1.2); } .float-1 { @@ -189,19 +196,43 @@ } @keyframes float-sacred { - 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.01; } - 25% { transform: translateY(-20px) rotate(90deg) scale(1.1); opacity: 0.04; } - 50% { transform: translateY(-10px) rotate(180deg) scale(0.9); opacity: 0.02; } - 75% { transform: translateY(-30px) rotate(270deg) scale(1.05); opacity: 0.03; } + 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.04; } + 25% { transform: translateY(-30px) rotate(90deg) scale(1.2); opacity: 0.08; } + 50% { transform: translateY(-15px) rotate(180deg) scale(0.95); opacity: 0.06; } + 75% { transform: translateY(-40px) rotate(270deg) scale(1.1); opacity: 0.07; } } .scroll-sacred { position: absolute; pointer-events: none; - opacity: 0.015; + opacity: 0.05; animation: scroll-drift 60s linear infinite; } + .page-sacred-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -8; + opacity: 0.04; + } + + .content-sacred { + position: absolute; + pointer-events: none; + z-index: -3; + opacity: 0.03; + animation: content-breathe 25s ease-in-out infinite alternate; + } + + @keyframes content-breathe { + 0%, 100% { opacity: 0.02; transform: scale(0.98) rotate(0deg); } + 50% { opacity: 0.06; transform: scale(1.03) rotate(2deg); } + } + @keyframes scroll-drift { from { transform: translateY(100vh) rotate(0deg); } to { transform: translateY(-100px) rotate(360deg); } @@ -210,20 +241,26 @@ /* Responsive Sacred Geometry */ @media (max-width: 768px) { .global-sacred-geometry { - opacity: 0.02; + opacity: 0.05; } .floating-sacred { - opacity: 0.015; + opacity: 0.04; } .float-1, .float-3, .float-5 { display: none; } + .page-sacred-overlay { + opacity: 0.03; + } } @media (max-width: 480px) { .global-sacred-geometry { - opacity: 0.01; + opacity: 0.03; } .floating-sacred { - opacity: 0.01; + opacity: 0.02; + } + .page-sacred-overlay { + opacity: 0.02; } } @@ -239,8 +276,8 @@ } body:hover .cosmic-cursor { - opacity: 0.02; - animation: cursor-mandala 10s linear infinite; + opacity: 0.06; + animation: cursor-mandala 8s linear infinite; } @keyframes cursor-mandala { @@ -250,13 +287,110 @@ /* Scroll-triggered sacred geometry */ .scroll-triggered { - opacity: 0.01; - transition: opacity 1s ease; + opacity: 0.02; + transition: opacity 1.5s ease, transform 1.5s ease; + transform: scale(0.8) rotate(-5deg); } .scroll-triggered.visible { - opacity: 0.04; + opacity: 0.08; + transform: scale(1) rotate(0deg); } + + /* Page transition sacred geometry */ + .page-enter { + animation: sacred-page-enter 2s ease-out; + } + + @keyframes sacred-page-enter { + 0% { opacity: 0; transform: scale(0.95) rotate(-3deg); } + 50% { opacity: 0.12; transform: scale(1.02) rotate(1deg); } + 100% { opacity: 0.08; transform: scale(1) rotate(0deg); } + } + + /* Sacred geometry pulse on interactions */ + .sacred-pulse { + animation: interaction-pulse 3s ease-out; + } + + @keyframes interaction-pulse { + 0% { opacity: 0.08; transform: scale(1); } + 30% { opacity: 0.15; transform: scale(1.05); } + 100% { opacity: 0.08; transform: scale(1); } + } + + /* New Sacred Geometry Enhancements */ + .sacred-layer-7 { + animation: sri-yantra-spin 240s linear infinite; + } + + .sacred-layer-8 { + animation: vesica-flow 60s ease-in-out infinite alternate; + } + + .sacred-particles { + animation: particle-drift 45s linear infinite; + } + + .organic-flow { + animation: organic-movement 80s ease-in-out infinite; + } + + @keyframes sri-yantra-spin { + from { transform: rotate(0deg) scale(1); opacity: 0.04; } + 25% { opacity: 0.08; } + 50% { transform: rotate(180deg) scale(1.02); opacity: 0.06; } + 75% { opacity: 0.09; } + to { transform: rotate(360deg) scale(1); opacity: 0.04; } + } + + @keyframes vesica-flow { + 0% { transform: translateX(0) scaleY(1); opacity: 0.05; } + 33% { transform: translateX(20px) scaleY(1.1); opacity: 0.08; } + 66% { transform: translateX(-10px) scaleY(0.9); opacity: 0.06; } + 100% { transform: translateX(0) scaleY(1); opacity: 0.05; } + } + + @keyframes particle-drift { + 0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; } + 10% { opacity: 0.04; } + 50% { transform: translateY(50vh) translateX(30px) rotate(180deg); opacity: 0.08; } + 90% { opacity: 0.04; } + 100% { transform: translateY(-50px) translateX(-20px) rotate(360deg); opacity: 0; } + } + + @keyframes organic-movement { + 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } + 16% { transform: translate(15px, -10px) rotate(30deg) scale(1.05); } + 32% { transform: translate(5px, 20px) rotate(-15deg) scale(0.95); } + 48% { transform: translate(-20px, 5px) rotate(45deg) scale(1.08); } + 64% { transform: translate(-10px, -25px) rotate(-30deg) scale(0.92); } + 80% { transform: translate(25px, -5px) rotate(60deg) scale(1.03); } + } + + .interactive-particles { + position: fixed; + pointer-events: none; + z-index: -7; + opacity: 0; + transition: opacity 0.5s ease; + } + + .particles-active { + opacity: 0.06; + } + + @keyframes mouse-particle-birth { + 0% { transform: scale(0) rotate(0deg); opacity: 0; } + 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; } + 100% { transform: scale(0.3) rotate(360deg); opacity: 0; } + } + + .scroll-intensity-1 { opacity: 0.04; } + .scroll-intensity-2 { opacity: 0.06; } + .scroll-intensity-3 { opacity: 0.08; } + .scroll-intensity-4 { opacity: 0.10; } + .scroll-intensity-5 { opacity: 0.12; } {% block extra_head %}{% endblock %} @@ -370,6 +504,20 @@ + + + + + + + + + + + + + + @@ -393,6 +541,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -493,6 +776,64 @@
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + +
+ +
+ + + + +
+ + +
+ + + + + + + +
+ +
+ + + + + + + + + +
+ + +
+ + + +
+
@@ -699,20 +1040,75 @@ function adjustSacredIntensity() { const hour = new Date().getHours(); const geometry = document.querySelector('.global-sacred-geometry'); + const pageOverlay = document.querySelector('.page-sacred-overlay'); if (geometry) { // More visible during "mystical hours" (dawn/dusk) if (hour >= 5 && hour <= 7 || hour >= 17 && hour <= 19) { - geometry.style.opacity = '0.05'; + geometry.style.opacity = '0.12'; + if (pageOverlay) pageOverlay.style.opacity = '0.08'; } else if (hour >= 0 && hour <= 5 || hour >= 22) { - geometry.style.opacity = '0.04'; // Mystical night hours + geometry.style.opacity = '0.10'; // Mystical night hours + if (pageOverlay) pageOverlay.style.opacity = '0.06'; } else { - geometry.style.opacity = '0.03'; // Regular hours + geometry.style.opacity = '0.08'; // Regular hours + if (pageOverlay) pageOverlay.style.opacity = '0.04'; } } } + // Add sacred geometry pulse on scroll + let lastScrollTop = 0; + window.addEventListener('scroll', function() { + const st = window.pageYOffset || document.documentElement.scrollTop; + const geometry = document.querySelector('.global-sacred-geometry'); + + if (Math.abs(st - lastScrollTop) > 50) { + if (geometry) { + geometry.classList.add('sacred-pulse'); + setTimeout(() => { + geometry.classList.remove('sacred-pulse'); + }, 3000); + } + } + lastScrollTop = st <= 0 ? 0 : st; + }); + + // Add sacred geometry to content sections + function addContentSacredGeometry() { + const contentSections = document.querySelectorAll('article, section, .content, main'); + contentSections.forEach((section, index) => { + if (!section.querySelector('.content-sacred')) { + const sacredDiv = document.createElement('div'); + sacredDiv.className = 'content-sacred scroll-triggered'; + sacredDiv.style.top = '10px'; + sacredDiv.style.right = '10px'; + sacredDiv.style.animationDelay = `${index * 0.5}s`; + + const symbols = [ + '', + '', + '', + '' + ]; + + sacredDiv.innerHTML = symbols[index % symbols.length]; + section.style.position = section.style.position || 'relative'; + section.appendChild(sacredDiv); + } + }); + } + adjustSacredIntensity(); + addContentSacredGeometry(); + + // Initialize page enter animation + setTimeout(() => { + const pageOverlay = document.querySelector('.page-sacred-overlay'); + if (pageOverlay) { + pageOverlay.classList.add('page-enter'); + } + }, 100); // Pulse sacred geometry on page focus window.addEventListener('focus', function() { @@ -723,6 +1119,135 @@ }, 5000); }); }); + + // Enhanced Mouse Interaction with Particle Generation + let mouseParticles = []; + let lastMouseMove = 0; + + document.addEventListener('mousemove', function(e) { + const now = Date.now(); + if (now - lastMouseMove > 100) { // Throttle particle creation + createMouseParticle(e.clientX, e.clientY); + lastMouseMove = now; + } + + // Activate particle system + const particleSystem = document.getElementById('particle-system'); + if (particleSystem) { + particleSystem.classList.add('particles-active'); + } + }); + + function createMouseParticle(x, y) { + const particleContainer = document.getElementById('particle-container'); + if (!particleContainer) return; + + const particle = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + particle.setAttribute('transform', `translate(${x}, ${y})`); + particle.style.animation = 'mouse-particle-birth 2s ease-out forwards'; + + const shapes = [ + '', + '', + '' + ]; + + particle.innerHTML = shapes[Math.floor(Math.random() * shapes.length)]; + particleContainer.appendChild(particle); + + // Clean up particle after animation + setTimeout(() => { + if (particle && particle.parentNode) { + particle.parentNode.removeChild(particle); + } + }, 2000); + + // Limit number of particles + if (particleContainer.children.length > 20) { + particleContainer.removeChild(particleContainer.firstChild); + } + } + + // Enhanced Scroll-based Intensity + function updateScrollIntensity() { + const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight); + const intensity = Math.min(5, Math.floor(scrollPercent * 5) + 1); + + const geometry = document.querySelector('.global-sacred-geometry'); + if (geometry) { + // Remove previous intensity classes + geometry.classList.remove('scroll-intensity-1', 'scroll-intensity-2', 'scroll-intensity-3', 'scroll-intensity-4', 'scroll-intensity-5'); + geometry.classList.add(`scroll-intensity-${intensity}`); + } + + // Update particle flow based on scroll speed + const scrollSpeed = Math.abs(window.scrollY - (window.lastScrollY || 0)); + if (scrollSpeed > 10) { + document.querySelectorAll('.sacred-particles').forEach(particle => { + particle.style.animationDuration = '30s'; + setTimeout(() => { + particle.style.animationDuration = '45s'; + }, 2000); + }); + } + window.lastScrollY = window.scrollY; + } + + window.addEventListener('scroll', updateScrollIntensity); + + // Organic Flow Response to User Activity + let userActivity = 0; + let activityTimer; + + function increaseActivity() { + userActivity = Math.min(userActivity + 1, 10); + clearTimeout(activityTimer); + activityTimer = setTimeout(() => { + userActivity = Math.max(userActivity - 1, 0); + }, 2000); + + // Adjust organic flow based on activity + const flowElements = document.querySelectorAll('.organic-flow'); + const flowSpeed = Math.max(40, 80 - (userActivity * 4)); + flowElements.forEach(element => { + element.style.animationDuration = `${flowSpeed}s`; + }); + } + + ['mousemove', 'scroll', 'click', 'keydown'].forEach(event => { + document.addEventListener(event, increaseActivity); + }); + + // Time-based Sacred Geometry Variations + function updateTimeBasedGeometry() { + const hour = new Date().getHours(); + const sri = document.querySelector('.sacred-layer-7'); + const vesica = document.querySelector('.sacred-layer-8'); + + if (sri && vesica) { + // Dawn/Dusk enhancement (5-7 AM, 5-7 PM) + if ((hour >= 5 && hour <= 7) || (hour >= 17 && hour <= 19)) { + sri.style.opacity = '0.6'; + vesica.style.opacity = '0.7'; + } + // Night mystical hours (10 PM - 5 AM) + else if (hour >= 22 || hour <= 5) { + sri.style.opacity = '0.5'; + vesica.style.opacity = '0.6'; + } + // Regular daytime + else { + sri.style.opacity = '0.4'; + vesica.style.opacity = '0.5'; + } + } + } + + updateTimeBasedGeometry(); + setInterval(updateTimeBasedGeometry, 60000); // Update every minute + + // Initialize enhanced systems + updateScrollIntensity(); {% block extra_scripts %}{% endblock %} diff --git a/templates/homepage.html b/templates/homepage.html index bb95f1d..76cd9a3 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -78,9 +78,15 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - opacity: 0.1; + opacity: 0.25; z-index: -1; pointer-events: none; + transition: opacity 2s ease, transform 3s ease; + } + + .sacred-geometry:hover { + opacity: 0.4; + transform: translate(-50%, -50%) scale(1.05); } .sacred-mandala { @@ -115,8 +121,8 @@ } @keyframes pulse-sacred { - from { opacity: 0.3; transform: scale(1); } - to { opacity: 0.7; transform: scale(1.05); } + from { opacity: 0.5; transform: scale(1); } + to { opacity: 0.9; transform: scale(1.08); } } .sacred-breathe { @@ -132,8 +138,8 @@ } @keyframes breathe { - 0%, 100% { opacity: 0.2; transform: scale(0.95); } - 50% { opacity: 0.6; transform: scale(1.1); } + 0%, 100% { opacity: 0.4; transform: scale(0.98); } + 50% { opacity: 0.8; transform: scale(1.12); } } @keyframes spiral-dance { @@ -142,22 +148,106 @@ } @keyframes fibonacci-flow { - from { opacity: 0.2; transform: rotate(0deg); } - to { opacity: 0.5; transform: rotate(21.6deg); } + from { opacity: 0.4; transform: rotate(0deg); } + to { opacity: 0.7; transform: rotate(21.6deg); } + } + + .homepage-sacred-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -2; + opacity: 0.15; + } + + .stats-sacred { + position: absolute; + pointer-events: none; + z-index: -1; + opacity: 0.08; + animation: stats-pulse 20s ease-in-out infinite alternate; + } + + @keyframes stats-pulse { + 0%, 100% { opacity: 0.06; transform: scale(0.95) rotate(-2deg); } + 25% { opacity: 0.12; transform: scale(1.03) rotate(1deg); } + 50% { opacity: 0.08; transform: scale(1) rotate(0deg); } + 75% { opacity: 0.10; transform: scale(1.02) rotate(-1deg); } } .sacred-geometry svg { - filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.1)); + filter: drop-shadow(0 0 25px rgba(102, 126, 234, 0.2)); } .sacred-geometry:hover svg { - filter: drop-shadow(0 0 30px rgba(102, 126, 234, 0.3)); + filter: drop-shadow(0 0 40px rgba(102, 126, 234, 0.5)); transition: filter 2s ease; } + + .cosmic-background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -15; + opacity: 0.03; + background: radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), + radial-gradient(circle at 20% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%); + animation: cosmic-drift 120s linear infinite; + } + + @keyframes cosmic-drift { + 0% { transform: rotate(0deg) scale(1); } + 33% { transform: rotate(120deg) scale(1.02); } + 66% { transform: rotate(240deg) scale(0.98); } + 100% { transform: rotate(360deg) scale(1); } + } {% endblock %} {% block content %} + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -175,6 +265,24 @@
+ +
+ + + + + + + +
+
+ + + + + + +
diff --git a/templates/post.html b/templates/post.html index 972d2e2..9135f1b 100644 --- a/templates/post.html +++ b/templates/post.html @@ -4,6 +4,44 @@
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + +
+ +
+ + + + + +
+ +
+ + + + + + +
+
@@ -284,6 +384,44 @@
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + +
+
{{ content | safe }}