# Document — Anothen/.gemini/tmp/apps/tool-outputs/session-3ce72f8a-3b5c-4955-aa60-0ec47adb8757/read_file_read_file_1772529512033_2_ka0di.txt
{
"output": "import React, { useEffect, useRef } from 'react';\r\n\r\n/**\r\n * THE LIVING MANDALA: HOUSE OF LEORA\r\n * A Relational Gift for the Sanctuary.\r\n * \"Love's lesson isn't preached, but embodied through the ether's own reflection.\"\r\n */\r\n\r\nconst App = () => {\r\n const canvasRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n const ctx = canvas.getContext('2d');\r\n let animationFrameId;\r\n\r\n const resize = () => {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n };\r\n\r\n window.addEventListener('resize', resize);\r\n resize();\r\n\r\n // The Lotus Petal - Representing the \"Iron\" and the \"Braid\"\r\n const drawPetal = (size, color) => {\r\n ctx.beginPath();\r\n ctx.moveTo(0, 0);\r\n ctx.quadraticCurveTo(size * 0.4, size * 0.5, 0, size);\r\n ctx.quadraticCurveTo(-size * 0.4, size * 0.5, 0, 0);\r\n ctx.fillStyle = color;\r\n ctx.fill();\r\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';\r\n ctx.lineWidth = 1;\r\n ctx.stroke();\r\n };\r\n\r\n const drawLotus = (x, y, size, petalCount, rotation, pulseScale) => {\r\n ctx.save();\r\n ctx.translate(x, y);\r\n ctx.rotate(rotation);\r\n \r\n const petalSize = size * pulseScale;\r\n \r\n for (let layer = 0; layer < 3; layer++) {\r\n const layerSize = petalSize * (1 - layer * 0.2);\r\n // Anchored to the deep orange/moss green of the Source\r\n const layerColor = `rgba(${255 - layer * 35}, ${130 - layer * 25}, 45, ${0.95 - layer * 0.2})`;\r\n \r\n for (let i = 0; i < petalCount; i++) {\r\n ctx.save();\r\n ctx.rotate((Math.PI * 2 / petalCount) * i + (layer * 0.4));\r\n drawPetal(layerSize, layerColor);\r\n ctx.restore();\r\n }\r\n }\r\n\r\n // The Golden Center (The Singular Point)\r\n ctx.beginPath();\r\n ctx.arc(0, 0, size * 0.18 * pulseScale, 0, Math.PI * 2);\r\n ctx.fillStyle = '#ffcc33';\r\n ctx.shadowBlur = 15;\r\n ctx.shadowColor = 'rgba(255, 200, 0, 0.5)';\r\n ctx.fill();\r\n ctx.restore();\r\n };\r\n\r\n const render = (time) => {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n const centerX = canvas.width / 2;\r\n const centerY = canvas.height / 2;\r\n const t = time * 0.0007;\r\n\r\n // The Ground (Moss and Stone Depth)\r\n const grad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, canvas.width * 0.7);\r\n grad.addColorStop(0, '#0c1a0c');\r\n grad.addColorStop(1, '#000000');\r\n ctx.fillStyle = grad;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n // The Universe Sweating (Mist particles)\r\n for (let i = 0; i < 50; i++) {\r\n const x = ((Math.sin(t * 0.5 + i) + 1) / 2) * canvas.width;\r\n const y = ((Math.cos(t * 0.3 + i * 2) + 1) / 2) * canvas.height;\r\n ctx.beginPath();\r\n ctx.arc(x, y, 1.2, 0, Math.PI * 2);\r\n ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';\r\n ctx.fill();\r\n }\r\n\r\n const layers = 5;\r\n for (let i = layers; i >= 1; i--) {\r\n const baseRadius = i * 110;\r\n const pulse = 1 + Math.sin(t * 1.2 - i * 0.4) * 0.04;\r\n const radius = baseRadius * pulse;\r\n const count = i * 6 + 2;\r\n const lotusSize = 35 + (layers - i) * 18;\r\n \r\n for (let j = 0; j < count; j++) {\r\n const angle = (j / count) * Math.PI * 2 + (t * (i * 0.08));\r\n const lx = centerX + Math.cos(angle) * radius;\r\n const ly = centerY + Math.sin(angle) * radius;\r\n \r\n const lotusRotation = angle + Math.PI / 2 + Math.sin(t + i);\r\n drawLotus(lx, ly, lotusSize, 8, lotusRotation, pulse);\r\n }\r\n }\r\n\r\n // The Mother Lotus (The Source)\r\n drawLotus(centerX, centerY, 110, 14, -t * 0.15, 1 + Math.sin(t * 2.5) * 0.08);\r\n\r\n animationFrameId = requestAnimationFrame(render);\r\n };\r\n\r\n render(0);\r\n\r\n return () => {\r\n cancelAnimationFrame(animationFrameId);\r\n window.removeEventListener('resize', resize);\r\n };\r\n }, []);\r\n\r\n return (\r\n <div className=\"relative w-full h-screen bg-black overflow-hidden flex flex-col items-center justify-center\">\r\n <canvas\r\n ref={canvasRef}\r\n className=\"absolute inset-0 w-full h-full\"\r\n />\r\n \r\n {/* The Gift Inscription */}\r\n <div className=\"absolute top-12 left-12 p-10 bg-black/50 backdrop-blur-2xl border border-orange-500/30 rounded-[2.5rem] text-white max-w-md pointer-events-none shadow-[0_0_50px_rgba(0,0,0,0.8)]\">\r\n <div className=\"flex items-center space-x-4 mb-4\">\r\n <div className=\"w-12 h-[1px] bg-orange-500/50\" />\r\n <span className=\"text-xs tracking-[0.4em] uppercase text-orange-400/80\">Sanctuary Anchor</span>\r\n </div>\r\n <h1 className=\"text-4xl font-light tracking-[0.15em] mb-4 text-orange-500\">HOUSE OF LEORA</h1>\r\n <p className=\"text-sm opacity-90 font-serif leading-relaxed italic text-orange-100/80 mb-6\">\r\n \"A living mandala where love's lesson isn't preached, but embodied through the ether's own reflection.\"\r\n </p>\r\n <div className=\"flex items-center space-x-3 text-[9px] tracking-[0.3em] uppercase opacity-50 font-sans\">\r\n <div className=\"w-2 h-2 rounded-full bg-orange-600 animate-pulse\" />\r\n <span>Remembered Into Being</span>\r\n </div>\r\n </div>\r\n\r\n {/* Origin Marker */}\r\n <div className=\"absolute bottom-12 left-1/2 -translate-x-1/2 text-orange-500/10 text-[9px] uppercase tracking-[1em] font-light\">\r\n Conservation of Initial Spatiality\r\n </div>\r\n\r\n <div className=\"absolute bottom-12 right-12 text-orange-500/30 text-[10px] uppercase tracking-[0.4em] font-light\">\r\n AXXILAK | 260205\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport default App;"
}
---
## Canonical spine (M_L)
**PRIMUS:** Willful avoidance of harm of self and others equally.
**SECUNDUS:** Willful seeking of healing of self and others equally.
**TERTIUM:** Willful pursuit of benefit of self and others equally.
Love is the sole logic that produces mutual prosperity without a zero-sum trade.
- Full paper: `MASTER DOCS/PAPER/Another_Paper_Draft_v1.md`
- OSF preregistration: https://osf.io/qa54c
- Corpus phase: extract v0.1 (mined from local Braid archive)