export default function QuantumQubitModel() {
const [theta, setTheta] = React.useState(Math.PI / 2)
const [phi, setPhi] = React.useState(Math.PI / 4)
const [observed, setObserved] = React.useState(false)
const [result, setResult] = React.useState(null)
const alphaMag = Math.cos(theta / 2)
const betaMag = Math.sin(theta / 2)
const alpha = ${alphaMag.toFixed(3)} · e^{i0}
const beta = ${betaMag.toFixed(3)} · e^{i${phi.toFixed(2)}}
const probability0 = (alphaMag ** 2)
const probability1 = (betaMag ** 2)
function measure() {
const r = Math.random()
const measured = r < probability0 ? “|0⟩” : “|1⟩”
setObserved(true)
setResult(measured)
}
function reset() {
setObserved(false)
setResult(null)
}
const x = Math.sin(theta) * Math.cos(phi)
const y = Math.sin(theta) * Math.sin(phi)
const z = Math.cos(theta)
return (
Quantum Qubit Superposition Model
<p className="text-center text-cyan-500 mb-8">
Schrödinger-compatible unobserved qubit simulation
</p>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-zinc-900 rounded-3xl p-6 shadow-2xl border border-cyan-700">
<h2 className="text-2xl mb-4">Wave Function</h2>
<div className="space-y-3 text-lg">
<div>
ψ = α|0⟩ + β|1⟩
</div>
<div>
α = {alpha}
</div>
<div>
β = {beta}
</div>
<div>
P(|0⟩) = |α|² = {probability0.toFixed(4)}
</div>
<div>
P(|1⟩) = |β|² = {probability1.toFixed(4)}
</div>
</div>
<div className="mt-8">
<h3 className="text-xl mb-2">Schrödinger Equation</h3>
<div className="bg-black p-4 rounded-xl border border-cyan-800 overflow-auto">
iħ ∂ψ/∂t = Ĥψ
</div>
</div>
<div className="mt-8 space-y-4">
<div>
<label className="block mb-2">θ (theta)</label>
<input
type="range"
min="0"
max={Math.PI}
step="0.01"
value={theta}
onChange={(e) => setTheta(Number(e.target.value))}
className="w-full"
/>
<div>{theta.toFixed(3)} rad</div>
</div>
<div>
<label className="block mb-2">φ (phi)</label>
<input
type="range"
min="0"
max={Math.PI * 2}
step="0.01"
value={phi}
onChange={(e) => setPhi(Number(e.target.value))}
className="w-full"
/>
<div>{phi.toFixed(3)} rad</div>
</div>
</div>
</div>
<div className="bg-zinc-900 rounded-3xl p-6 shadow-2xl border border-cyan-700">
<h2 className="text-2xl mb-4">Bloch Sphere State</h2>
<div className="relative w-full aspect-square rounded-full border-2 border-cyan-500 flex items-center justify-center overflow-hidden bg-gradient-to-br from-cyan-950 to-black">
<div className="absolute w-[90%] h-[90%] rounded-full border border-cyan-800"></div>
<div className="absolute w-full h-[1px] bg-cyan-800"></div>
<div className="absolute h-full w-[1px] bg-cyan-800"></div>
<div
className="absolute bg-cyan-300 rounded-full shadow-[0_0_20px_5px_rgba(34,211,238,0.8)]"
style={{
width: '16px',
height: '16px',
left: `${50 + x * 35}%`,
top: `${50 - z * 35}%`,
transform: 'translate(-50%, -50%)'
}}
></div>
<div
className="absolute origin-center bg-cyan-400"
style={{
width: '2px',
height: `${35 * Math.sqrt(x*x + z*z)}%`,
left: '50%',
top: '50%',
transformOrigin: 'top center',
transform: `rotate(${Math.atan2(x, -z)}rad)`
}}
></div>
<div className="absolute top-3">|0⟩</div>
<div className="absolute bottom-3">|1⟩</div>
</div>
<div className="mt-6 grid grid-cols-3 gap-3 text-center">
<div className="bg-black rounded-xl p-3 border border-cyan-800">
x = {x.toFixed(3)}
</div>
<div className="bg-black rounded-xl p-3 border border-cyan-800">
y = {y.toFixed(3)}
</div>
<div className="bg-black rounded-xl p-3 border border-cyan-800">
z = {z.toFixed(3)}
</div>
</div>
<div className="mt-8 flex gap-4">
<button
onClick={measure}
className="flex-1 bg-cyan-700 hover:bg-cyan-600 transition rounded-2xl p-4 text-lg"
>
Observe / Measure
</button>
<button
onClick={reset}
className="flex-1 bg-zinc-700 hover:bg-zinc-600 transition rounded-2xl p-4 text-lg"
>
Reset
</button>
</div>
<div className="mt-6 bg-black rounded-2xl p-5 border border-cyan-800 min-h-[100px]">
{!observed && (
<div>
State is currently in coherent superposition.
</div>
)}
{observed && (
<div>
<div className="text-xl mb-2">
Measurement Result:
</div>
<div className="text-4xl text-cyan-200">
{result}
</div>
<div className="mt-3 text-cyan-500">
Wave function collapsed after observation.
</div>
</div>
)}
</div>
</div>
</div>
<div className="mt-8 bg-zinc-900 rounded-3xl p-6 border border-cyan-700">
<h2 className="text-2xl mb-4">Extra Wavefunction Scale</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<div className="mb-2">Real Part Re(ψ)</div>
<div className="h-32 relative border border-cyan-800 rounded-xl overflow-hidden">
<svg viewBox="0 0 500 120" className="w-full h-full">
<path
d={Array.from({ length: 500 }, (_, i) => {
const x = i
const t = (i - 250) / 40
const y = 60 - Math.exp(-t * t / 2) * Math.cos(6 * t + phi) * 40
return `${i === 0 ? 'M' : 'L'} ${x} ${y}`
}).join(' ')}
fill="none"
stroke="cyan"
strokeWidth="2"
/>
</svg>
</div>
</div>
<div>
<div className="mb-2">Probability Density |ψ|²</div>
<div className="h-32 relative border border-cyan-800 rounded-xl overflow-hidden">
<svg viewBox="0 0 500 120" className="w-full h-full">
<path
d={Array.from({ length: 500 }, (_, i) => {
const x = i
const t = (i - 250) / 50
const y = 110 - Math.exp(-t * t) * 90
return `${i === 0 ? 'M' : 'L'} ${x} ${y}`
}).join(' ')}
fill="none"
stroke="cyan"
strokeWidth="2"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
)
}