Ty-HA/animation

/animation — 100가지 애니메이션 스타일 즉시 사용 가능

Ty 제작 — BTHA System (bthasystem.io).

인수 읽기

허용되는 형식:

• /animation glitch → glitch 스타일, 기본 텍스트 사용.
• /animation glitch "내 텍스트" → 스타일 + 애니메이션할 텍스트 (text prop으로 전달).
• /animation glitch 16:9 또는 ... web → 형식 또는 대상을 지정합니다.
• /animation 만 입력하거나 /animation liste → 아래 카탈로그를 패밀리별로 그룹화하여 표시하고 스타일을 요청합니다.

첫 번째 단어는 슬러그(slug) 입니다. 각 슬러그는 references/<slug>.md 파일(이 스킬의 폴더 내)을 가지고 있습니다. 코드를 작성하기 전에 항상 이 파일을 읽으세요: 기술, 정확한 값, 시작용 Remotion 컴포넌트가 포함되어 있습니다.

알 수 없는 슬러그

슬러그가 존재하지 않는 경우: 조용히 추측하지 마세요. 가장 유사한 3가지 스타일(이름, 패밀리 또는 설명된 효과 기준)을 한 줄 설명과 함께 제안하고, 어떤 것을 사용할지 물어보세요. 예: « vhs » → glitch, risograph, light-leak ; « 3d text » → extruded-text, liquid-chrome, kinetic-type ; « matrix » → ascii, scramble, code-typing.

기본 스택

• 비디오 (기본값) : Remotion (React + TypeScript), 1080×1920, 30fps (TikTok, Reels, Shorts). 기본 지속 시간: 5초 (150 프레임), 별도 요청 시 변경 가능.
• 웹 : 사용자가 웹사이트용 애니메이션을 원하는 경우, 참조 파일을 HTML/CSS/JS (CSS keyframes, requestAnimationFrame, canvas 또는 SVG)로 변환하세요. '위치 = 시간 함수' 로직은 동일하게 유지됩니다.
• 기타 형식: 1080×1080 (정사각형), 1920×1080 (YouTube). 9:16 비율의 안전 영역 준수: 측면 여백 약 140px, 하단 25% (TikTok 인터페이스)에는 중요한 요소 배치 금지.

준수해야 할 Remotion 규칙:

• 모든 것은 useCurrentFrame()에 의존합니다: 프레임 간 누적 상태 없음(프레임은 순서 없이 병렬로 렌더링됨).
• 난수는 오직 remotion의 random('seed')를 통해 생성하며, Math.random()은 사용하지 마십시오.
• 미디어는 staticFile(), <Img>, <OffthreadVideo>, <Audio>를 통해 로드하여 렌더링이 로딩을 기다리도록 합니다.
• 폰트: @remotion/google-fonts/<Font>를 사용하여 렌더링을 보장합니다.

워크플로

1. 슬러그 식별 (또는 가장 유사한 3가지 스타일 제안).
2. references/<slug>.md 파일 읽기.
3. 필요 시 명확히 하기 (한 번에 하나의 질문, 알 수 없고 중요한 경우에만): 형식 (기본 9:16), 지속 시간, 텍스트, 브랜드 색상, 기존 Remotion 프로젝트 또는 새 프로젝트.
4. 구축:
   • 기존 프로젝트: src/<Style>.tsx를 추가하고 <Composition id=... durationInFrames fps={30} width={1080} height={1920} />와 함께 Root.tsx에 등록합니다.
   • 새 프로젝트: npx create-video@latest (blank 템플릿), 그 후 동일한 작업.
   • 참조 파일의 스니펫에서 시작하여 텍스트/색상에 맞게 조정하고, 참조 파일에 명시된 종속성을 설치합니다.
5. 확인: 2~3개의 주요 프레임에서 npx remotion still <id> --frame=<n> out.png를 실행하고, 이미지를 확인하고 수정합니다.
6. 렌더링: npx remotion render <id> out/<id>.mp4 (더 나은 품질을 위해 --crf=18 추가, 3D 렌더링이 검은색일 경우 --gl=angle 추가).
7. 제공: 파일 경로, 지속 시간, 참조 파일에서 추출한 2~3가지 변형을 제공합니다.

여러 스타일이 동시에 요청된 경우 (/animation glitch + synthwave): 모든 참조 파일을 읽고, 하나의 컴포넌트로 결합합니다 (예: synthwave 배경 + glitch 타이틀).

카탈로그 (100가지 스타일)

🔤 키네틱 타이포그래피 & 텍스트 효과

• kinetic-type — Kinetic Type (Headline): 음성에 동기화된 강력한 텍스트, 불규칙한 줌, 단어별 표현
• split-flap — Split-Flap Display: 역 안내판: 글자가 회전하다가 고정됨
• glitch — Glitch & VHS 레트로: 왜곡, 스캔 라인, 아날로그 노이즈, 색수차
• hud — HUD & 터미널 SF: 미래형 고정폭 인터페이스, 빠른 카운터, 조준선
• ascii — ASCII 아트 애니메이션: 실시간으로 변하는 문자로 구성된 이미지
• scramble — Scramble / 텍스트 리빌: 실제 단어 전에 해독하는 듯한 무작위 문자
• stacking — Kinetic Stacking: 격렬한 속도로 쌓이는 단어들
• typewriter — Typewriter: 타자기, 글자 하나씩, 깜빡이는 커서
• karaoke — Karaoke Captions: TikTok 자막, 발음된 단어가 강조됨
• handwriting — Handwriting / 서명: 손으로 쓰는 듯한 텍스트 (SVG 경로)
• text-path — Text on Path: 곡선, 원, 나선을 따라 움직이는 텍스트
• variable-font — Variable Font Morph: 두꺼워지고, 늘어나고, 숨쉬는 글자
• highlighter — Highlighter Sweep: 단어 아래에 그려지는 형광펜 또는 밑줄
• rotating-words — Rotating Words: 고정된 문장 안에서 반복적으로 바뀌는 단어
• mask-reveal — Mask Reveal: 형태나 이미지를 통해 드러나는 텍스트

🎨 유기적, 유동적 & 추상적 움직임

• liquid-morph — Liquid Morphing: 서로 변형되는 형태
• particles — Particles System: 바람과 중력에 영향을 받는 수천 개의 점
• neon — Neon Glow / Cyberpunk: 후광과 잔상을 가진 발광 선
• topographic — Wave & Topographic: 반복되는 등고선 또는 수학적 파동
• aurora — Aurora & Mesh Gradient: 오로라처럼 움직이는 부드러운 그라데이션
• metaballs — Blobs & Metaballs: 점성 있게 합쳐지는 둥근 형태
• bioluminescence — Bioluminescence: 심해와 같은 부드러운 빛의 맥동
• flow-field — Flow Field (Perlin Noise): 흐름 장을 따라가는 수천 개의 선
• ink-water — Fluid / Ink in Water: 물 속에 퍼져 나가는 잉크
• fractal-zoom — Fractal Zoom: 프랙탈 속으로 무한 줌
• voronoi — Voronoi Cells: 분열하고 움직이는 유기적 세포
• reaction-diffusion — Reaction-Diffusion: 얼룩말 피부나 산호 같은 살아있는 패턴
• smoke-fire — Smoke & Fire Shader: 실시간으로 생성되는 연기 또는 불꽃
• grain-gradient — Grain & Noise Gradient: 현대 포스터 같은 거친 그라데이션

🧊 3D 스타일, 양각 & 재질

• clay-3d — Clay 3D (찰흙): 물리력과 튕김이 있는 플레이도우 객체
• glassmorphism — Glassmorphism: 배경을 흐리게 하는 젖빛 유리 패널
• wireframe — Isometric & Wireframe 3D: 등각 투영 또는 와이어프레임 구조
• neumorphism — Neumorphism: 그림자로 배경에 녹아든 형태
• low-poly — Low Poly: 빛을 받는 면이 있는 3D
• skeuomorphism — Skeuomorphism: 실제 버튼, 스위치, 가죽 또는 금속 질감
• liquid-chrome — Abstract Chrome / Liquid Metal: 반사되는 수은 또는 액체 금속
• product-spin — 3D Product Spin: 자체 축으로 회전하는 3D 객체 (팩샷)
• extruded-text — 3D Extruded Text: 빛과 그림자가 있는 입체 텍스트
• card-flip — Card Flip 3D: 원근감 있게 뒤집히는 카드
• cube-transition — Cube / Box Transition: 큐브 회전을 통한 전환
• globe — 3D Globe: 빛나는 점이 있는 회전하는 지구본
• galaxy — Galaxy Particles 3D: 깊이 있는 입자 은하
• holo-foil — Holographic Foil: 홀로그램 카드 같은 무지개 빛 반사
• voxel — Voxel Art: 마인크래프트 같은 작은 큐브 3D

📐 예술적, 그래픽 & 역사적 미학

• swiss — Swiss Design: 비대칭 그리드, 큰 산세리프, 기하학적 전환
• risograph — Risograph & Halftone: 거친 레트로 인쇄, 오프셋 레이어, 12fps
• paper-cutout — Paper Cut-out: 그림자가 있는 오려낸 종이, 스톱모션
• neobrutalism — Neobrutalism: 두꺼운 검은 윤곽선, 강한 그림자, 선명한 색상
• bauhaus — Bauhaus: 원, 사각형, 삼각형, 기본 색상
• memphis — Memphis Style: 지그재그, 종이꽃가루, 체크무늬, 80년대 파스텔
• synthwave — Synthwave / Vaporwave: 석양을 향한 끝없는 네온 그리드
• pixel-art — Pixel Art / 8-Bit: 앤티앨리어싱 없는 레트로 게이밍
• comic — Comic Book / Cel Shading: 만화, 검은 윤곽선, 팝아트 스크린톤
• blueprint — Blueprint: 파란 배경에 그려지는 건축 도면
• frutiger-aero — Frutiger Aero: 거품, 청록색 유리, 2000년대
• corporate-memphis — Corporate Memphis: 팔다리가 늘어난 플랫 캐릭터
• psychedelic — Psychedelic Retro: 70년대, 물결, 채도 높은 색상
• line-boil — Line Boil: 만화처럼 떨리는 윤곽선
• y2k — Y2K / Chrome Bubble: 2000년대, 크롬, 별, 거품
• manga-speed-lines — Manga Speed Lines: 속도선과 만화 의성어
• watercolor — Watercolor: 퍼져 나가는 수채화 물감
• chalkboard — Chalkboard / Sketch: 그려지는 분필 또는 연필 그림
• art-deco — Art Deco: 20년대 기하학적 황금색 선
• duotone — Duotone: 두 가지 대비되는 색상의 이미지

📊 대시보드, 데이터 & UI 인터페이스

• data-story — Data Storytelling: 올라가는 막대, 그려지는 곡선
• bento — Bento Grid: 움직이는 비대칭 사각형 격자
• odometer — Count-up / Odometer: 값까지 올라가는 카운터
• micro-interactions — Micro-interactions UI: 변형되는 버튼, 아이콘, 리플
• marquee — Infinite Scroll / Marquee: 무한히 스크롤되는 배너
• parallax — Parallax Scrolling: 다른 속도로 움직이는 레이어
• skeleton — Skeleton Loading: 콘텐츠 전에 맥동하는 형태
• bar-race — Bar Chart Race: 시간에 따라 순위가 바뀌는 막대 차트
• progress-rings — Progress Rings: Apple Watch 스타일로 채워지는 링
• map-route — Map Route Tracing: 지도 위에 그려지는 경로 (러닝!)
• timeline — Timeline: 진행되는 타임라인
• chat — Chat / iMessage Simulation: 나타나는 대화 말풍선
• notifications — Notification Stack: 떨어지고 쌓이는 알림
• phone-scroll — Phone Mockup Scroll: 전화기 안에서 스크롤되는 앱 화면
• code-typing — Code Typing / IDE: 편집기에서 작성되는 코드
• cursor-demo — Cursor Demo: 인터페이스에서 클릭하고 탐색하는 커서
• before-after — Before / After Slider: 슬라이더로 비교하는 전후

🎬 전환 & 카메라 움직임

• whip-pan — Whip Pan: 모션 블러가 있는 초고속 패닝
• zoom-punch — Zoom Punch: 강한 순간에 갑작스러운 줌
• camera-shake — Camera Shake: 충격 떨림
• shape-wipe — Shape Wipe: 화면을 가로지르는 형태 전환
• iris — Iris / Circle Reveal: 원형 열림 또는 닫힘
• ink-transition — Ink / Paint Transition: 화면을 뒤덮는 잉크 얼룩
• light-leak — Light Leak & Lens Flare: 필름 같은 빛 샘
• ken-burns — Ken Burns: 사진 위의 느린 줌
• split-screen — Split Screen: 열리는 분할 화면
• speed-ramp — Speed Ramp: 느린 후 가속
• page-curl — Page Curl: 넘어가는 페이지
• match-cut — Match Cut / Morph Cut: 두 형태 간의 완벽한 연결

🧸 캐릭터 & 재미 효과

• lip-sync — Lip-Sync Avatar: 입이 음성을 따라가는 아바타
• puppet-rig — Puppet Rig: 관절 캐릭터 (팔, 머리, 깜빡임)
• confetti — Confetti / Emoji Rain: 종이꽃가루 또는 이모지 비
• sticker-pop — Sticker Pop: 튀어나오며 튕기는 스티커
• squash-stretch — Squash & Stretch: 만화 같은 탄성 객체
• morph-icons — Morphing Icons: 다른 아이콘으로 변형되는 아이콘
• fireworks — Firework / Burst: 축제 불꽃놀이 입자 폭발