'animation' 검색 결과

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Blender 캐릭터와 애니메이션을 뼈대, 좌표, 접지 데이터와 이미지로 검사합니다. 발 미끄러짐, 방향 불일치, 비틀림의 원인과 수정 사항을 정리합니다.

• 걷는 동안 발 미끄러짐과 바닥 관통을 확인합니다
• 캐릭터가 향하는 방향과 이동 방향을 비교합니다
• 다른 뼈대로 동작을 옮긴 뒤 자세를 검사합니다

수학 개념과 수식 유도, 알고리즘 실행 과정을 애니메이션 영상으로 만듭니다. 구성 계획부터 렌더링과 영상 결합까지 안내하며 도형으로 이해를 돕는 설명을 제작합니다.

• 수학 개념을 도형으로 설명할 때
• 수식 유도를 순서대로 보여 줄 때
• 알고리즘 실행 과정을 시각화할 때

예술적 애니메이션과 해설 영상의 구도, 스토리보드, 화면 속 움직임을 설계합니다. 서른다섯 가지 스타일, 아홉 가지 해설 패턴과 Canvas 코드로 구현을 돕습니다.

• 해설 영상의 스토리보드를 만듭니다
• 애니메이션의 화풍을 선택합니다
• Canvas로 재현할 움직임을 만듭니다

기존 화면이나 합의된 UI 안에 목적과 사용 빈도에 맞는 애니메이션을 구현합니다. 반복 조작으로 인한 중단과 동작 줄이기 설정도 처리합니다.

• 모달과 드로어의 열기·닫기 애니메이션
• 버튼과 토글 조작에 대한 피드백
• 반복 조작으로 중단되는 애니메이션 조정

픽셀 아트 캐릭터, 큰 연도, 움직이는 글자와 연표를 조합해 역사나 상식을 소개하는 애니메이션 HTML 장면을 만듭니다. 화면 녹화에 적합합니다.

• 역사 해설에 쓸 장면 만들기
• 픽셀 아트로 상식 전달하기
• 화면 녹화용 복고풍 움직임 만들기

HTML로 영상의 구성과 움직임을 만들고, 음성에 맞춘 자막과 읽기 음성, 음악에 반응하는 효과를 조합합니다. 제목과 장면 전환을 다루며 글자 넘침과 가독성을 점검합니다.

• 짧은 제품 소개 영상을 제작합니다
• 음성에 맞춘 자막을 추가합니다
• 내레이션과 움직이는 글자를 조합합니다

Slack에서 사용할 애니메이션 GIF를 만듭니다. 기본 동작 요소를 조합하고 크기 제한을 검증하면서 반응용 GIF나 작은 애니메이션을 제작할 수 있습니다.

• Slack 대화용 반응 GIF 제작
• 작은 애니메이션 GIF 제작
• GIF 제작 중 크기 제한 확인

GSAP 플러그인으로 글자와 SVG 애니메이션, 드래그, 스크롤, 레이아웃 전환을 구현합니다. 용도에 맞는 기능 선택부터 등록, 설정, 정리까지 다룹니다.

• 제목을 한 글자나 한 줄씩 표시
• SVG 선 그리기와 도형 변형 추가
• 관성이 있는 드래그 구현

GSAP 애니메이션의 수치 변환, 범위 제한, 무작위 변화 코드를 작성하고 검토합니다. 스크롤에 따른 변화, 일정 간격 맞춤, 여러 요소 처리를 지원합니다.

• 스크롤 진행도를 이동이나 회전으로 변환
• 애니메이션 값을 지정 범위로 제한
• 위치나 색상에 무작위 변화 추가

영화 같은 애니메이션, MiniMax API의 AI 생성 미디어와 생성 예술을 활용해 히어로 페이지와 작품 소개 사이트를 만드는 스킬을 안내합니다.

• 영화 같은 움직임의 히어로 페이지를 만듭니다
• 작품 소개 사이트를 제작합니다
• AI 생성 미디어를 웹에서 활용합니다

Find costly DOM operations, the code that reads or changes page elements, and review scrolling handlers or frequent React updates. Reorganize work to reduce repeated layout calculations and verify the changes in the browser.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating stuttering animations
• Grouping DOM reads before DOM writes
• Reviewing scroll and touch event listeners

Implement web animations with GSAP plugins, including animated layout changes, draggable elements, text effects, and SVG drawing or shape transitions. The skill explains plugin registration, configuration, cleanup, and development tools for inspecting animation timelines.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animating grid or list layout changes
• Adding draggable cards with momentum
• Revealing headings one character at a time

Routes video requests to the appropriate HyperFrames workflow based on the source material and intended result. It guides agents toward specialized steps for product promos, explainers, captions, motion graphics, music videos, and HTML-based video compositions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Choose a workflow for a product launch video
• Turn an article or notes into an explainer video
• Add captions or graphic overlays to a talking-head video

Plan the visual and narrative direction of HyperFrames videos, including colors, fonts, composition, narration, and scene rhythm. The skill helps apply existing design specifications, choose a style, and check whether the finished work follows that direction.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Match a video's appearance to existing design specifications
• Choose colors and fonts to suit a mood
• Plan scene rhythm and narration pacing

Build reusable data packages for local 2D character animation. Define separate body parts, rotation points, layer order, movement limits, and views so a shared renderer can animate each character using its own rig data.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Prepare a 2D character for local animation
• Define joint rotation points and movement limits
• Organize mouths, eyes, and props as separate parts

Implement animation in React with Framer Motion examples based on Disney's 12 animation principles. Add squash and stretch, preparatory movements, smooth acceleration, overlapping motion, and hover or tap responses with defined timing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding hover and tap responses to buttons
• Animating jumps with preparation and curved paths
• Revealing list items one after another

Create mathematical animations in ManimGL using Python, with guidance for equations, graphs, 3D scenes, and camera movement. Includes interactive development workflows, examples, and templates for testing changes and rendering scenes to video.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animate equations and mathematical derivations
• Visualize functions and graphs
• Build 3D scenes with camera movement

Bring Figma logos, brand colors, and components into HyperFrames as local assets and editable HTML. Reconstruct animation from storyboard states, with additional motion import options when a compatible connector or native export is available.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Import a Figma logo as a video asset
• Apply brand colors across imported components
• Turn a Figma frame into editable HTML

Guide the visual and storytelling choices for HyperFrames videos, including colors, fonts, composition, narration, and pacing. Use existing brand specifications or choose a visual style to give scenes a consistent look and rhythm.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Matching a video to existing brand guidelines
• Choosing colors and fonts for a video
• Planning the pacing of a multi-scene video

Maintain Remotion’s expert listings, portraits, and generated cards, then regenerate the homepage animation with transparency. The workflow covers separate Chrome and Safari video formats and checks that matching assets stay consistent across both homepage consumers.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add or edit an expert listing
• Update portraits and regenerate expert cards
• Regenerate transparent homepage animations

Create video scenes in Remotion using React, with guidance on frame-based animation, media placement, and timing. It also points to references for effects, transitions, fonts, and other features, plus ways to preview the results in Studio.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animating titles and subtitles
• Combining video, audio, and images
• Adjusting layer timing and trimming

Create editable PowerPoint decks, reconstruct slides from images, improve existing presentations, and fill templates. The workflow also covers reusable design workspaces and adding narration or animation, including narrated videos authored from presentations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create an editable presentation
• Reconstruct slides from images
• Improve an existing deck's appearance

Build videos in React with Remotion using task-specific rules and code examples. The skill covers animation timing, captions, audio, scene transitions, and media assets, helping guide implementation across common video creation tasks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add word-highlighted captions to videos
• Create text animations and scene transitions
• Trim audio and adjust volume or playback speed