3D Extruded Text

Create a React + TypeScript component `Text3D` that renders a chrome/violet extruded 3D headline standing on a floor with grazing light — achieved with stacked CSS layers, no Three.js.

Technique:
- Wrapper with `perspective: 1200px`; inner `motion.div` with `transformStyle: 'preserve-3d'` and a slight base rotation `rotateX(12deg)`.
- Extrusion: render the same word N times (`depth = 18`), each absolutely positioned copy offset by `translate(i*1px, i*1px)` and colored with an interpolated dark violet ramp (`#3b1a6b` -> `#150a27`) so the stack reads as depth. Compute colors in a helper, not hardcoded 18 times.
- Front face: `bg-gradient-to-b from-white via-violet-200 to-violet-500 bg-clip-text text-transparent` for a chrome look, plus a thin top highlight.
- Floor: a `div` under the text with a violet radial glow and a blurred, `scaleY(-1)` masked reflection of the front face.
- Mouse parallax: track pointer over the wrapper, map x/y to `rotateY: [-14, 14]` and `rotateX: [18, 4]` via `useMotionValue` + `useSpring({ stiffness: 120, damping: 18 })`. Reset smoothly on pointer leave.