Before and After Text

Recreate the "Before and After Text" animated component from Motionshelf (https://motionshelf-pi.vercel.app) in my current project, adapted to my brand. Answer me in the language I write to you in. Work in this order:

1. Tools: These instructions were written for Claude Code, which uses "skills" (folders with a SKILL.md that teach it a technique). First find out how you load skills, rules or instructions, and get the same knowledge: (a) if your agent is supported by the skills installer, ask me and run `npx skills add https://github.com/greensock/gsap-skills --agent <your-agent>` (for example codex, opencode, antigravity); (b) otherwise copy the skill folders from https://github.com/greensock/gsap-skills into your skills or rules directory (in Cursor: Settings → Rules → Remote Rule (GitHub) → greensock/gsap-skills); (c) if you cannot load skills at all, open the SKILL.md files in https://github.com/greensock/gsap-skills and read them as instructions before coding. Tell me which path you used.

2. Project: Look at my project: framework (Next.js, Vite, plain HTML…), TypeScript or JavaScript, Tailwind or plain CSS. Build it as one component that fits this stack. In React use gsap and @gsap/react; in plain HTML use GSAP from npm or a CDN.

3. Ask me before coding: Ask me these in a single message, showing the example values as defaults:
   - the heading
   - each row: the old way and the new way
   - the accent color of the new way
   - the language of the texts

4. The animation
   What it looks like: A small heading and three rows. Each row shows an old way of doing something; it gets crossed out and the new way appears in its place, with a colored dot.
   Step by step:
   - The heading fades in (0.5 s) and the old texts slide in from the left with a slight blur, one after another (stagger 0.12 s).
   - From 1.2 s, row by row every 0.9 s: a strike line grows across the old text (scaleX, 0.45 s), the old text leaves upward with blur, and the new text rises in (0.7 s, expo.out).
   - Everything holds 1.8 s and the loop restarts.
   Rules:
   - Use one GSAP timeline that loops forever with a short pause between runs (repeat: -1). If the step by step gives the pause, use that value; otherwise repeatDelay about 1.4 s.
   - Set every starting state with set() at the start of the timeline, never with from(): on the second loop from() starts from the wrong place.
   - Elements that appear later and would push the layout (new chat bubbles, new rows) stay display:none until their turn; elements that already have their place in the layout (a subtitle, a button) start hidden with autoAlpha 0, so nothing jumps.
   - If there is a cursor or pointer, it aims at the measured center of its target (getBoundingClientRect), never at fixed pixel coordinates; if the component is scaled, divide by the scale.
   - Blur only in the middle of a movement and always end at blur(0).
   - With prefers-reduced-motion, jump to the final frame and stop (tl.progress(1).pause()).
   - In React, use useGSAP from @gsap/react with a scope ref, so the timeline is cleaned up on unmount.
   - All example content stays generic (no real brands, logos or people).
   - Old and new texts share the same spot in each row (stacked), so nothing jumps when they swap.

5. Check: Run it and watch the first and the third loop (they must look the same). Check it at 390 px wide with no sideways scroll, with reduced motion turned on, and with a clean console. Tell me what you checked.

6. Video (optional): If I also want this as an MP4 (ads, stories, WhatsApp status), install the HyperFrames skills with `npx skills add heygen-com/hyperframes` (choose your agent) and render the same animation in 9:16, 1:1 or 16:9. Rendering needs FFmpeg installed, or render with --docker (downloads about 3.3 GB the first time). Ask me before installing.

Shortcut: If I only want the ready-made component instead, it installs with `npx shadcn@latest add https://motionshelf-pi.vercel.app/r/before-after-text.json`.