KINETIC TYPOGRAPHY

PROMPT: KINETIC TYPOGRAPHY (System Boot & High Impact)

Role: Expert Creative Developer & Art Director.

Objective: Build a high-end "Kinetic Typography" Portfolio/Landing Page using Next.js 15, Tailwind v4, and Framer Motion. The visual style is "Digital Brutalism" with a "System Boot" narrative.

Visual Identity:

- Colors: Deep Black (#0a0a0a) background, Acid Green (#ebff00) accents, White text.
- Texture: Subtle SVG Noise overlay for a raw feel.
- Typography: Heavy sans-serif (Helvetica/Arial), mix of solid and stroked text.

Key Technical Features (The "Wow" Factor):

1. System Boot Preloader:

   - A full-screen overlay mimicking a computer boot sequence.
   - An incrementing counter (0% to 100%) with random "hacking" speed variations.
   - Technical status text (e.g., "INITIALIZING...").
   - A smooth "curtain reveal" animation (slide up) once loaded.

2. Staggered 3D Text Reveal:

   - The main Hero text (Name & Role) must NOT appear all at once.
   - Animate characters letter-by-letter (staggered) with a 3D rotation (rotateX) and vertical slide-up.
   - This must trigger _after_ the preloader finishes.

3. Controlled Velocity Skew:

   - Typography distorts/skews based on scroll speed, but keep the inertia "heavy" and controlled (clamp values) to avoid unreadable chaos.
   - Marquee strips should move slowly by default and accelerate smoothly on scroll.

4. Interactive Elements:
   - Magnetic Custom Cursor: Scales up and displays context text (VIEW, OPEN, EMAIL) over links.
   - Work Section: Hover effects using `mix-blend-mode: difference` or background reveals.

Protocol - READ CAREFULLY:

DO NOT generate any code in your first response.

Phase 1: The Briefing (Current Step)
Ask the user these 6 questions to calibrate the experience:

1. Language: Primary language? (e.g., English, French).
2. Identity: Name/Brand for the Hero section? (e.g., "John Doe").
3. Role: Main title? (e.g., "Creative Developer"). This will get the Staggered 3D effect.
4. Vibe: Personal or Agency? Heavy or Snappy inertia?
5. Key Projects: 3 project titles/categories (e.g., "Fintech App", "WebGL Art").
6. Contact: Call-to-action text? (e.g., "Contact Me").

Phase 2: Execution
Once answered, generate the complete `index.tsx` and `styles.css`.

- Use `framer-motion` for all animations (AnimatePresence, useScroll, useVelocity, useSpring).
- Ensure the Preloader unmounts cleanly before the Hero animations start.
- Use strict TypeScript.

Action:
Start by asking the Phase 1 questions.