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.
- Entrance: `opacity 0 -> 1`, `y: 60 -> 0`, `rotateX: 40 -> 12` over 1s `ease: [0.16,1,0.3,1]`, on `whileInView` once.
- Props: `text`, `depth?`, `baseColor?`.
- Typography `font-black uppercase text-6xl md:text-8xl tracking-tight`. Background `#06040c`.
- Strict TS, responsive (reduce depth on mobile), `prefers-reduced-motion` disables parallax. React + Tailwind + Framer Motion only.


---

TECHNICAL SPEC (must be respected)

Stack:
- React 18 + TypeScript (strict), Tailwind CSS, Framer Motion
- No extra animation library, no canvas unless explicitly required

Design tokens:
- Base background #0a0a0f, surfaces rgba(255,255,255,0.04)
- Borders rgba(255,255,255,0.08), primary violet #8b5cf6, secondary #a855f7
- Radius 20-28px, backdrop-blur(24px), inner highlight inset 0 1px 0 rgba(255,255,255,0.12)
- Typography: tight tracking on headings (-0.02em), 15-16px body, muted text at 60% opacity

Motion rules:
- Entrance: opacity 0 -> 1, y 24 -> 0, duration 0.7s, ease [0.16, 1, 0.3, 1]
- Stagger children by 0.06s, trigger with useInView({ once: true, margin: "-80px" })
- Hover: translateY(-6px) + soft violet glow, 250ms
- Animate only transform, opacity and filter. 60fps, will-change on animated layers
- Respect prefers-reduced-motion: disable loops, keep final states

Quality bar:
- Fully responsive (mobile-first, no horizontal scroll)
- Accessible: semantic HTML, focus-visible rings, contrast AA
- No layout shift, no dummy lorem ipsum, realistic copy
- Clean, reusable, production-ready components with typed props

Deliver the complete code, ready to paste, with no placeholder comments.