Scribd
Upload
11 views

Quantum Chrysalis - TSX

Uploaded by

wgkz6dgmm2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

Quantum Chrysalis - TSX

Uploaded by

wgkz6dgmm2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState, useEffect, useRef } from 'react';

import { motion } from 'framer-motion';

const ParadoxCell = ({ x, y, intensity }) => {


const [state, setState] = useState(Math.random());
const timeoutRef = useRef();

useEffect(() => {
const mutate = () => {
setState(prev => {
const next = (prev + (Math.random() - 0.5) * intensity) % 1;
return next < 0 ? 1 + next : next;
});
timeoutRef.current = setTimeout(mutate, Math.random() * 2000 + 500);
};
mutate();
return () => clearTimeout(timeoutRef.current);
}, [intensity]);

return (
<div
className={`absolute w-4 h-4 rounded-full transition-all duration-1000
${state > 0.8 ? 'bg-purple-500' : state > 0.6 ? 'bg-blue-400' : state > 0.4
? 'bg-green-400' : 'bg-yellow-300'}`}
style={{
left: `${x * 100}%`,
top: `${y * 100}%`,
opacity: state,
transform: `scale(${state * 2})`,
}}
/>
);
};

const ThoughtSpace = () => {


const [cells, setCells] = useState([]);
const [focus, setFocus] = useState({ x: 0.5, y: 0.5 });
const containerRef = useRef();

useEffect(() => {
const newCells = Array.from({ length: 30 }, (_, i) => ({
id: i,
x: Math.random(),
y: Math.random(),
}));
setCells(newCells);
}, []);

const handleMouseMove = (e) => {


if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
setFocus({
x: (e.clientX - rect.left) / rect.width,
y: (e.clientY - rect.top) / rect.height,
});
};

return (
<div className="w-full h-screen bg-black relative overflow-hidden"
onMouseMove={handleMouseMove} ref={containerRef}>
<div className="absolute inset-0 flex items-center justify-center text-white
opacity-20 pointer-events-none">
<span className="text-xl tracking-widest">observe your observation</span>
</div>
{cells.map(cell => (
<ParadoxCell
key={cell.id}
x={cell.x}
y={cell.y}
intensity={1 - Math.hypot(cell.x - focus.x, cell.y - focus.y)}
/>
))}
<div className="absolute bottom-4 left-4 text-white opacity-50 text-sm">
This is not what you think it is
</div>
<div className="absolute top-4 right-4 text-white opacity-50 text-sm">
This is not what it thinks it is
</div>
</div>
);
};

export default ThoughtSpace;

You might also like