http://localhost/xslide.kr/index.html?projectId=6b2ff9bf-3573-4a49-b048-2bedd86e3dee

1. 텍스트 모듈에서 텍스트 글자단위 범위잡아 폰트 종류, 굵기, 사이즈, 색상 조정
2. GSAP 애니메이션에 더 다양한 효과 적용

MotionPath — 요소가 곡선/자유 경로를 따라 이동
SplitText (GSAP Club 플러그인) — 단어/줄 단위 분해 후 물결처럼 등장
DrawSVG — SVG 선이 그려지는 효과 (라인, 화살표, 차트 외곽선)
Flip — 레이아웃 변형 시 부드러운 모핑 (카드가 위치를 바꾸며 흐름)
MorphSVG — 도형이 다른 도형으로 변형
ScrollTrigger 대신 순차 stagger 폭발 — 수십 개 요소가 파동처럼 등장
3D perspective + rotationX/Y/Z 조합 — 진짜 3D 공간감
CustomBounce / CustomEase — 탄성이 커스텀한 독특한 움직임
Physics2D — 중력/마찰이 있는 입자 낙하
keyframes 배열 — 한 요소가 여러 단계를 거쳐 복잡한 궤적 이동

--
무료 GSAP(CDN)으로 바로 가능한 화려한 프리셋 아이디어:

프리셋 이름    효과 설명
particle-burst    요소 주변에서 점들이 폭발처럼 튀어나왔다 사라짐
wave-in    텍스트가 바다 파도처럼 글자별로 위아래로 물결치며 등장
3d-flip-reveal    X축으로 회전하며 뒤에서 앞으로 펼쳐지는 느낌
elastic-drop    위에서 탄성 있게 떨어지며 바닥에 쿵
neon-trace    요소 테두리가 불이 켜지듯 순차적으로 그려짐
morph-scale    작게 찌그러진 상태에서 정상 비율로 펼쳐짐 (scaleX/scaleY 따로)
cinema-reveal    검은 클리핑 마스크가 양쪽에서 열리며 요소 등장
shockwave    요소가 등장할 때 주변이 파문처럼 퍼짐

3. gsap를 이용한 동적인 그라데이션 배경

GSAP의 gsap.to() 로 CSS 변수나 backgroundImage 자체를 직접 트위닝

방법 1: GSAP으로 그라데이션 색상 실시간 변이
// 객체의 색상값을 트위닝 → onUpdate에서 CSS 적용
const colorObj = { r1: 99, g1: 102, b1: 241, r2: 168, g2: 85, b2: 247 };

gsap.to(colorObj, {
  r1: 239, g1: 68, b1: 68,   // 보라→빨강
  r2: 245, g2: 158, b2: 11,  // 보라→주황
  duration: 4,
  ease: 'sine.inOut',
  yoyo: true,
  repeat: -1,
  onUpdate: () => {
    el.style.background = `
      radial-gradient(ellipse at 20% 50%, 
        rgba(${colorObj.r1|0},${colorObj.g1|0},${colorObj.b1|0},0.6), transparent 60%),
      radial-gradient(ellipse at 80% 50%, 
        rgba(${colorObj.r2|0},${colorObj.g2|0},${colorObj.b2|0},0.6), transparent 60%)
    `;
  }
});
방법 2: GSAP으로 그라데이션 위치 이동 (기존 aurora를 GSAP으로 교체)
// CSS 변수 트위닝 (GSAP 3.x 지원)
gsap.to(el, {
  '--pos-x': '80%',
  '--pos-y': '80%',
  duration: 8,
  ease: 'sine.inOut',
  yoyo: true,
  repeat: -1
});
GSAP으로 추가 가능한 새 동적 배경들
효과명    GSAP 활용 방식
Liquid Gradient    3~4개 radial-gradient 위치를 각각 다른 속도로 트위닝
Breathing Glow    scale + opacity를 ease: 'sine.inOut'으로 반복
Shifting Hue    hue-rotate filter를 0→360 무한 트위닝
Plasma Wave    sin 기반 좌표를 onUpdate에서 계산해 gradient 위치 변경
Spotlight    마우스 따라가는 radial gradient를 GSAP으로 smooth하게 이동
기존 aurora 효과를 CSS 애니메이션 대신 GSAP으로 완전히 재작성 할까요? 훨씬 더 부드럽고 컨트롤 가능해지고, 속도/색상 변경도 즉시 반영됩니다