Meditation - Catching the Snake at its head

Alternate version same source app

<!DOCTYPE html>

<head>

<title>Cutting the Snake's Head: Visualizing the Story</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');

:root {

--space-color: #0d1a26;

--awareness-color: #a7c5e8;

--snake-color: #ff6b6b; /* Reddish for afflictive potential */

--story-color: rgba(200, 200, 255, 0.4);

}

body, html {

margin: 0; padding: 0;

height: 100%; width: 100%;

overflow: hidden;

background-color: var(--space-color);

font-family: 'Lato', sans-serif;

cursor: none;

}

#visualization-container {

position: relative;

height: 100%; width: 100%;

background: radial-gradient(circle, #2a2a4e, var(--space-color) 80%);

}

#effect-layer {

position: absolute;

width: 100%; height: 100%;

filter: url(#turbulence-filter);

}

#background-source {

width: 100%; height: 100%;

background-color: var(--space-color);

}

.title-card {

position: absolute;

top: 45%; left: 50%;

transform: translate(-50%, -50%);

text-align: center;

color: rgba(255, 255, 255, 0.7);

animation: fadeInAndOut 10s forwards ease-in-out;

z-index: 100;

}

.title-card h1 { font-size: 3rem; font-weight: 300; }

.title-card h3 { font-size: 1.5rem; font-weight: 300; color: var(--awareness-color); }

#instruction-text {

position: absolute;

bottom: 12%;

width: 80%; left: 10%;

text-align: center;

font-size: 1.8rem;

font-weight: 300;

color: rgba(255, 255, 255, 0.95);

opacity: 0;

transition: opacity 2s ease-in-out;

text-shadow: 0 0 10px rgba(0,0,0,0.8);

z-index: 100;

}

#turbulence {

animation: swirl 40s infinite linear;

transition: baseFrequency 5s ease-in-out;

}

/* --- Animation Elements --- */

#presence-point {

position: absolute;

top: 50%; left: 50%;

width: 20px; height: 20px;

background-color: var(--awareness-color);

border-radius: 50%;

transform: translate(-50%, -50%);

box-shadow: 0 0 15px var(--awareness-color);

transition: all 2s ease-in-out;

z-index: 10;

}

#snake-container {

position: absolute;

top: 0; left: 0;

width: 100%; height: 100%;

z-index: 20;

}

.flicker {

position: absolute;

width: 30px; height: 30px;

background: radial-gradient(circle, white, transparent 50%);

border-radius: 50%;

filter: blur(5px);

animation: flicker-anim 1.5s forwards;

}

.snake-head {

position: absolute;

width: 40px; height: 40px;

background: radial-gradient(circle, white, var(--snake-color));

border-radius: 50%;

box-shadow: 0 0 15px var(--snake-color);

opacity: 0;

}

.snake-head::after { /* Eyes for the head */

content: '..';

position: absolute;

top: 4px; left: 12px;

color: black;

font-weight: bold;

font-size: 1.2rem;

}

.story-segment {

position: absolute;

font-family: "Font Awesome 6 Free";

font-weight: 900;

font-size: 2.5rem;

color: var(--story-color);

text-shadow: 0 0 10px var(--story-color);

opacity: 0;

transition: opacity 1s ease-in;

}

.cut-flash {

position: absolute;

width: 4px; height: 300px; /* Make it long enough to cross the screen */

background: white;

box-shadow: 0 0 20px white, 0 0 40px white;

animation: flash-and-fade 0.4s ease-out forwards;

transform-origin: center;

}

.shatter-particle {

position: absolute;

width: 8px; height: 8px;

background-color: var(--snake-color);

border-radius: 50%;

animation: explode 1s ease-out forwards;

}

/* Keyframes */

@keyframes fadeInAndOut { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

@keyframes swirl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes flicker-anim {

0% { transform: scale(0); opacity: 0; }

50% { transform: scale(1); opacity: 0.7; }

100% { transform: scale(0.8); opacity: 0; }

}

@keyframes flash-and-fade {

from { transform: rotate(var(--angle)) scale(1, 1.5); opacity: 1; }

to { transform: rotate(var(--angle)) scale(1, 0.5); opacity: 0; }

}

@keyframes explode {

from { transform: translate(0,0); opacity: 1; }

to { transform: translate(var(--tx), var(--ty)); opacity: 0; }

}

</style>

</head>

<body>

</div>

</div>

<h1>Cutting the Snake's Head</h1>

<h3>Visualizing the Story of a Thought</h3>

</div>

</div>

</filter>

</svg>

document.addEventListener('DOMContentLoaded', () => {

const instructionText = document.getElementById('instruction-text');

const animationElements = document.getElementById('animation-elements');

const turbulence = document.getElementById('turbulence');

const presencePoint = document.getElementById('presence-point');

const snakeContainer = document.getElementById('snake-container');

const cycleDuration = 30000; // 30 seconds total cycle

const titleCardDuration = 8000;

function showText(text, duration, delay) {

setTimeout(() => {

instructionText.textContent = text;

instructionText.style.opacity = '1';

setTimeout(() => {

instructionText.style.opacity = '0';

}, duration);

}, delay);

}

function runUncheckedThought() {

snakeContainer.innerHTML = '';

turbulence.setAttribute('baseFrequency', '0.015');

showText("A subtle flicker of energy appears...", 3000, 0);

// Stage 1: Flicker

const flicker = document.createElement('div');

flicker.className = 'flicker';

flicker.style.top = '50%';

flicker.style.left = '10%';

snakeContainer.appendChild(flicker);

// Stage 2: Head Emerges

const head = document.createElement('div');

head.className = 'snake-head';

head.style.top = 'calc(50% - 20px)';

head.style.left = '10%';

head.style.transition = 'opacity 1s, left 8s linear';

snakeContainer.appendChild(head);

setTimeout(() => {

head.style.opacity = '1';

showText("The head emerges... a nascent thought forms.", 3000, 0);

head.style.left = '80%'; // Start moving across screen

}, 2000);

// Stage 3 & 4: Body and Story

setTimeout(() => {

showText("Left unchecked, it weaves a story...", 8000, 0);

const icons = ['\f007', '\f017', '\f071', '\f182', '\f0c2']; // user, clock, warning, car, cloud

for (let i = 0; i < 5; i++) {

setTimeout(() => {

const segment = document.createElement('div');

segment.className = 'story-segment';

segment.innerHTML = `<i class="fas">${icons[i]}</i>`;

// Position segments along a sine wave for a serpentine look

segment.style.top = `calc(50% + ${Math.sin(i * 1.5) * 40}px - 1rem)`;

segment.style.left = `${15 + i * 14}%`;

snakeContainer.appendChild(segment);

setTimeout(() => segment.style.opacity = '1', 50);

}, i * 1200);

}

}, 4000);

}

function runIntervention() {

snakeContainer.innerHTML = '';

turbulence.setAttribute('baseFrequency', '0.015');

showText("Again, a flicker appears...", 2000, 0);

const flicker = document.createElement('div');

flicker.className = 'flicker';

flicker.style.top = '50%';

flicker.style.left = '10%';

snakeContainer.appendChild(flicker);

const head = document.createElement('div');

head.className = 'snake-head';

head.style.top = 'calc(50% - 20px)';

head.style.left = '10%';

head.style.transition = 'opacity 1s';

snakeContainer.appendChild(head);

setTimeout(() => {

head.style.opacity = '1';

showText("The head emerges. This is the moment to intervene.", 4000, 0);

}, 2000);

// The CUT

setTimeout(() => {

if (!head.parentElement) return; // Stop if head already removed

showText("With swift recognition, the arising is 'cut at the head'.", 5000, 0);

const headRect = head.getBoundingClientRect();

const flash = document.createElement('div');

flash.className = 'cut-flash';

flash.style.left = `${headRect.left + headRect.width / 2 - 2}px`;

flash.style.top = `${headRect.top + headRect.height / 2 - 150}px`; // Center the flash

flash.style.setProperty('--angle', '90deg'); // Horizontal cut

animationElements.appendChild(flash);

setTimeout(() => flash.remove(), 400);

head.remove();

// Shatter effect

for(let i=0; i<30; i++) {

const p = document.createElement('div');

p.className = 'shatter-particle';

p.style.left = `${headRect.left + headRect.width / 2}px`;

p.style.top = `${headRect.top + headRect.height / 2}px`;

const travelAngle = Math.random() * 360;

const travelDist = 80 + Math.random() * 100;

p.style.setProperty('--tx', `${Math.cos(travelAngle * Math.PI/180) * travelDist}px`);

p.style.setProperty('--ty', `${Math.sin(travelAngle * Math.PI/180) * travelDist}px`);

animationElements.appendChild(p);

setTimeout(() => p.remove(), 1000);

}

setTimeout(() => {

showText("The story never forms. The mind returns to stillness.", 4000, 0);

turbulence.setAttribute('baseFrequency', '0.002');

}, 1500);

}, 6000);

}

function runCycle() {

runUncheckedThought();

setTimeout(runIntervention, 15000);

}

setTimeout(() => {

runCycle();

setInterval(runCycle, cycleDuration);

}, titleCardDuration);

});

</script>

</body>

</html>

Note: this is an AI generated application

Track NameArtist Name

00:00 / 01:04

Customise/Remix with Claude

Predictive Processing
Therapy (a Claude experiment)