3df875bd-3de5-46d4-bbca-c040fd6f398b/.claude/rules/transformation.md

paths

paths
src/components/**/*.tsx src/hooks/**/*.ts

v2 to v4 Transformation

Quick Reference

v2	v4
GSAP + ScrollTrigger	motion/react with whileInView
Character-level text hooks	TextAnimation component (word-level)
buttons: ButtonConfig[]	primaryButton / secondaryButton objects
10+ className props	Single className prop
CardStack/TextBox wrappers	Direct composition
Complex media props	Discriminated union: { imageSrc } | { videoSrc }

Animation Variants

v2	v4
entrance-slide	slide-up
reveal-blur	fade-blur
background-highlight	fade

Allowed Hooks

Only 2 custom hooks exist in v4:

• useCarouselControls - Embla carousel state
• useButtonClick - Navigation handling

All other animation hooks are replaced by TextAnimation, Button animate, or inline motion.

Standard Motion Animation

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-15%" }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>

Props Pattern

type SectionProps = {
  tag: string;
  title: string;
  description: string;
  primaryButton: { text: string; href: string };
  secondaryButton: { text: string; href: string };
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });

Checklist

1. Replace GSAP with motion/react
2. Replace animation hooks with TextAnimation or Button animate
3. Use discriminated unions for media props
4. Use primaryButton/secondaryButton instead of buttons array
5. Remove all className props except single className
6. Replace CardStack with GridOrCarousel
7. Replace TextBox with direct TextAnimation + Button composition
8. Add aria-label to sections
9. Use w-content-width for containers