Raven7/mouse1

1 2DEMO_LIST = [3 4 {5   "card": {6     "index": 17   },8   "title": "3D 분자 시뮬레이터",9   "description": "Three.js로 3D 분자 구조를 시각화하세요. 회전, 줌, 원자 정보 표시 기능과 애니메이션 효과를 구현하세요."10 },11  {12    "card": {13      "index": 2,14    },15    "title": "다이나믹 차트 대쉬보드",16    "description": "Create an interactive dashboard with Chart.js showing different types of charts (line, bar, pie) with smooth animations. Include buttons to switch between different data views.",17  },18 19 {20   "card": {21     "index": 4,22   },23   "title": "음악 비주얼라이저",24   "description": "Web Audio API와 Canvas를 사용하여 오디오 비주얼라이저를 제작해 보세요. 음악 주파수 데이터에 반응하는 동적인 막대들이 부드러운 애니메이션으로 움직이도록 구현해야 합니다. 또한 재생/일시 정지 컨트롤과 색상 테마 선택 기능도 포함하세요."25 },26 {27   "card": {28     "index": 5,29   },30   "title": "Interactive Timeline",31   "description": "Create a vertical timeline with animated entry points. When clicking on timeline items, show detailed information with smooth transitions. Include filtering options and scroll animations."32 },33 {34   "card": {35     "index": 6,36   },37   "title": "카드 기억 게임",38   "description": "Create a classic memory matching card game with flip animations. Include a scoring system, timer, and difficulty levels. Add satisfying match/mismatch animations and sound effects using Web Audio API."39 },40 41 {42   "card": {43     "index": 744   },45   "title": "인터랙티브 컬러 팔레트",46   "description": "마우스 움직임에 따라 동적으로 변하는 컬러 팔레트를 만드세요. 색상 선택, 저장, 조합 기능과 함께 부드러운 그라데이션 효과를 구현하세요."47 },48 {49   "card": {50     "index": 851   },52   "title": "날씨 위젯 애니메이션",53   "description": "현재 날씨 상태를 보여주는 애니메이션 위젯을 만드세요. 비, 눈, 구름, 번개 등의 날씨 효과를 Canvas로 구현하고 부드러운 전환 효과를 추가하세요."54 },55 {56   "card": {57     "index": 958   },59   "title": "파티클 텍스트 이펙트",60   "description": "텍스트가 파티클로 변환되는 효과를 구현하세요. 마우스 호버시 글자가 흩어졌다가 다시 모이는 애니메이션을 Canvas로 만드세요."61 },62 {63   "card": {64     "index": 1065   },66   "title": "3D 책장 갤러리",67   "description": "CSS 3D 변환을 사용하여 회전하는 책장 형태의 갤러리를 만드세요. 각 책을 클릭하면 상세 정보가 나타나도록 구현하세요."68 },69 {70   "card": {71     "index": 1172   },73   "title": "리듬 게임",74   "description": "Web Audio API를 활용한 간단한 리듬 게임을 만드세요. 떨어지는 노트와 타이밍 판정, 점수 시스템을 구현하세요."75 },76 {77   "card": {78     "index": 1279   },80   "title": "SVG 패스 애니메이션",81   "description": "SVG 패스를 따라 움직이는 애니메이션을 구현하세요. 다양한 도형이 그려지는 과정을 보여주고 인터랙티브한 컨트롤을 추가하세요."82 },83 {84   "card": {85     "index": 1386   },87   "title": "드로잉 보드",88   "description": "Canvas를 사용한 그리기 도구를 만드세요. 브러시 크기, 색상 변경, 지우개 기능과 그리기 기록 저장 기능을 구현하세요."89 },90 {91   "card": {92     "index": 1493   },94   "title": "퍼즐 슬라이드 게임",95   "description": "숫자나 이미지를 사용한 슬라이드 퍼즐 게임을 만드세요. 이동 애니메이션과 완성 확인 기능을 추가하세요."96 },97 {98   "card": {99     "index": 15100   },101   "title": "파티클 커서 효과",102   "description": "마우스 커서를 따라다니는 파티클 효과를 만드세요. 다양한 파티클 패턴과 색상 변화를 구현하세요."103 },104 {105   "card": {106     "index": 16107   },108   "title": "인터랙티브 달력",109   "description": "드래그 앤 드롭으로 일정을 관리할 수 있는 달력을 만드세요. 애니메이션 효과와 일정 필터링 기능을 추가하세요."110 },111 112 {113   "card": {114     "index": 18115   },116   "title": "타자 게임",117   "description": "떨어지는 단어를 타이핑하여 점수를 얻는 게임을 만드세요. 난이도 조절과 효과음을 추가하세요."118 },119 {120   "card": {121     "index": 19122   },123   "title": "데이터 시각화 애니메이션",124   "description": "D3.js를 사용하여 데이터 변화를 애니메이션으로 보여주는 차트를 만드세요. 다양한 전환 효과를 추가하세요."125 },126 127 {128   "card": {129     "index": 21130   },131   "title": "물리 시뮬레이션",132   "description": "Canvas를 사용하여 간단한 물리 시뮬레이션을 구현하세요. 중력, 충돌, 탄성 효과를 적용한 공 튀기기 시뮬레이션을 만드세요."133 },134 {135   "card": {136     "index": 22137   },138   "title": "사운드 믹서",139   "description": "Web Audio API를 사용하여 여러 음원을 믹싱할 수 있는 인터페이스를 만드세요. 볼륨, 패닝, 이펙트 조절 기능을 구현하세요."140 },141 {142   "card": {143     "index": 23144   },145   "title": "3D 카드 갤러리",146   "description": "Three.js를 사용하여 3D 공간에서 회전하는 카드 갤러리를 만드세요. 마우스 인터랙션과 애니메이션을 추가하세요."147 },148 {149   "card": {150     "index": 24151   },152   "title": "인터랙티브 맵",153   "description": "SVG를 사용하여 인터랙티브한 지도를 만드세요. 지역 선택, 데이터 시각화, 줌 기능을 구현하세요."154 },155 {156   "card": {157     "index": 25158   },159   "title": "벽돌깨기 게임",160   "description": "벽돌깨기 게임"161 },    162 {163   "card": {164     "index": 26165   },166   "title": "포토 에디터",167   "description": "Canvas를 사용하여 기본적인 이미지 편집 도구를 만드세요. 필터 적용, 자르기, 회전 기능을 구현하세요."168 },169 170 171 {172   "card": {173     "index": 30174   },175   "title": "인터랙티브 마인드맵",176   "description": "D3.js를 사용하여 동적 마인드맵을 만드세요. 노드 추가/삭제, 드래그 앤 드롭, 확장/축소 애니메이션을 구현하세요."177 },178 {179   "card": {180     "index": 31181   },182   "title": "3D 지형 생성기",183   "description": "Three.js로 프로시저럴 지형을 생성하세요. 고도, 텍스처, 물 효과를 실시간으로 조정할 수 있게 만드세요."184 },185 186 187 188 {189   "card": {190     "index": 35191   },192   "title": "3D 텍스트 애니메이터",193   "description": "Three.js로 3D 텍스트 애니메이션을 만드세요. 다양한 변환 효과와 물리 기반 입자 효과를 구현하세요."194 },195 196 197 198 {199   "card": {200     "index": 39201   },202   "title": "패턴 디자이너",203   "description": "SVG로 반복 패턴을 디자인하는 도구를 만드세요. 대칭 옵션, 색상 스키마 관리, 실시간 프리뷰를 구현하세요."204 },205 206 {207   "card": {208     "index": 41209   },210   "title": "실시간 필터 카메라",211   "description": "WebRTC와 Canvas를 사용하여 실시간 비디오 필터 앱을 만드세요. 다양한 이미지 처리 효과를 구현하세요."212 },213 214 {215   "card": {216     "index": 47217   },218   "title": "Interactive Stars",219   "description": "Interactive Stars: Watch stars and constellations appear in the night sky as you move your mouse."220 },221 {222   "card": {223     "index": 46224   },225   "title": "실시간 데이터 플로우",226   "description": "D3.js로 실시간 데이터 흐름을 시각화하세요. 노드 기반 데이터 처리와 애니메이션 효과를 구현하세요."227 }228]