import React, { useState } from "react"; const ScaleFactorWidget: React.FC = () => { const [k, setK] = useState(2); const unit = 24; // Base size in px const size = k * unit; return (
setK(parseInt(e.target.value))} className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600" />
1x 2x 3x 4x
{/* 1D: Length */}

1D: Length

Multiplier

k = {k}

{/* 2D: Area */}

2D: Area

{/* Base */}
{/* Scaled */}

Multiplier

k² = {k * k}

{/* 3D: Volume */}

3D: Volume

{/* Faces */} {[ // Front { trans: `translateZ(${size / 2}px)`, color: "bg-rose-500" }, // Back { trans: `rotateY(180deg) translateZ(${size / 2}px)`, color: "bg-rose-600", }, // Right { trans: `rotateY(90deg) translateZ(${size / 2}px)`, color: "bg-rose-600", }, // Left { trans: `rotateY(-90deg) translateZ(${size / 2}px)`, color: "bg-rose-500", }, // Top { trans: `rotateX(90deg) translateZ(${size / 2}px)`, color: "bg-rose-400", }, // Bottom { trans: `rotateX(-90deg) translateZ(${size / 2}px)`, color: "bg-rose-700", }, ].map((face, i) => (
))}

Multiplier

k³ = {k * k * k}

); }; export default ScaleFactorWidget;