인터랙티브 바이브 코딩 가이드북

애니메이티드 리스트 (Animated Text List With Cursor)

마우스 커서에 반응하는 인터랙티브 텍스트 리스트입니다. hover 시 컬러 변화와 애니메이션, 마우스 이동에 따른 skew 효과, 커스텀 커서 이미지를 구현합니다.

01TOKYO

02LASVEGAS

03LONDON

컨트롤 패널

List Items

리스트 설정

Code

Name

Image

Code

Name

Image

Code

Name

Image

Font Size

텍스트 크기

Font Weight

글꼴 두께

Text Color

메인 텍스트 색상

Code Color

코드 텍스트 색상

Gap

항목 간 간격

Image Size

커서 이미지 크기

Border Radius

이미지 둥글기

인터렉션 아이디어

언제:사용자가 리스트 항목에 마우스를 올렸을 때

무엇을:텍스트와 커서를

어떻게:컬러 변화, skew 애니메이션, 커스텀 이미지 커서로 표현하여 인터랙티브한 사용자 경험 제공

바이브 프롬프트

AnimatedTextListWithCursor 컴포넌트를 만들어주세요. 이 컴포넌트는 마우스 커서에 반응하는 인터랙티브 텍스트 리스트를 보여줍니다. cities prop으로 코드, 이름, 이미지가 포함된 리스트 배열을, fontSize와 fontWeight prop으로 텍스트 스타일을, textColor와 codeColor prop으로 텍스트 색상을 설정할 수 있게 해주세요. gap prop으로 항목 간 간격을, imageSize와 borderRadius prop으로 커서 이미지 크기와 둥글기를 조정할 수 있게 해주세요. hover 시 텍스트 색상 변화와 이동 애니메이션, skew 효과를 적용하고, 마우스 위치에 따라 해당 항목의 이미지가 커서로 나타나도록 구현해주세요. framer-motion을 활용하여 부드러운 애니메이션을 구현해주세요.