'motion' 검색 결과

Design and implement interface responses such as button feedback, loading indicators, page transitions, and swipe gestures. Use motion to communicate actions and state changes, with guidance on timing, performance, and support for people who prefer reduced animation.

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

• Adding hover and click feedback to buttons
• Showing loading placeholders and progress indicators
• Creating transitions for pages and interface components

Create explainer clips, short videos, and animated overlays with React code. Define scenes and motion by frame number, then render an MP4 that can be regenerated after changes to the content, timing, or visual design.

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

• Turn a process explanation into an animated video
• Create a short video from supplied content
• Build animated overlays for video

Create Chinese explainer videos targeting one minute, from a topic or existing script. The workflow produces narration, storyboards, Remotion animation, subtitles, and MP4 output, with staged reviews and complete scripts preserved even when videos run longer.

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

• Creating a short video explaining one technical concept
• Preparing a concept clip for classroom use
• Turning an existing Chinese script into a narrated video

Choose a technique for adding maps to Remotion videos, from satellite images with animated overlays to globe views, geographic annotations, and terrain flythroughs. Compare approaches based on the intended shot and service requirements.

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

• Animate overlays on a satellite image
• Show a globe or 3D buildings with Mapbox
• Use MapLibre without an API key

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

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

Remotionコンポジションを20項目チェックリストで品質レビューする。 「動画レビュー」「motion review」「Remotion品質チェック」等のリクエストで発動。

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

Automate motion capture and tracking workflows in Blender with Python. Use when the user wants to import BVH or FBX mocap data, retarget motion to armatures, track camera or object motion from video, solve camera motion, clean up motion capture data, or script any tracking pipeline in Blender.

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

This skill should be used when the user asks to "direct a motion graphics video", "do creative/art direction for a video", "define a motion language", "set the tone and pacing", "make the animation feel consistent", "decide what to animate (and what not to)", "turn a brief/brand into motion choices", or needs the senior creative judgment that sits above specific techniques (gsap/lottie/shader). Covers motion language, tone & energy, pacing/rhythm, motion hierarchy, restraint, and cross-shot consistency.

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

This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.

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

Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.

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

Programmatic React video best practices for Remotion. Use this skill whenever the user is writing, debugging, or rendering Remotion code — compositions, useCurrentFrame animations, interpolate, spring, Sequence timing, <Img>/<Video>/<Audio> from @remotion/media, staticFile, calculateMetadata, the Studio preview, `npx remotion render`, captions, subtitles, voiceover, audio visualization, ffmpeg, transitions, light leaks, transparent video, Lottie, 3D scenes, Mapbox flyovers. Triggers especially on HtmlInCanvas / "html in canvas" requests, CRT terminal effects, glitch effects, video shaders, WebGL video, and any request to scaffold a new programmatic React video. Owns `remotion render` and everything about Remotion code. Do NOT trigger for finished MP4 ad assembly from existing slides (that is `/video-content`) or for the inspiration-to-MP4 reference-video pipeline (that is `/cmo-video`).

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

Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.

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

React / Next.js의 버튼, 모달, 알림, 페이지 전환에 애니메이션을 추가하고, 표시와 사라짐 및 스크롤에 연동되는 움직임을 구현합니다.

• 버튼 조작에 움직임을 추가합니다
• 모달과 알림의 표시와 사라짐을 구현합니다
• Next.js App Router 페이지 전환을 구현합니다

React와 Next.js에서 드래그, 스와이프, 텍스트와 SVG 애니메이션을 구현합니다. 여러 단계의 동작과 로딩 표시를 다루며 용도에 맞는 API 선택도 안내합니다.

• 드래그로 닫는 패널과 정렬 목록 구현하기
• 단어별 텍스트 표시와 숫자 애니메이션 만들기
• SVG 선 그리기와 원형 진행 표시 구현하기

GSAP 기본 API로 웹 요소와 SVG의 이동, 회전, 페이드 효과를 구현합니다. 속도 변화와 시간차를 조절하고 화면 너비와 동작 줄이기 설정에 대응합니다.

• 웹 페이지에 이동과 페이드 효과를 넣을 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

Review parallax effects, where backgrounds and foregrounds move at different speeds. Check reduced-motion support and access to essential content, then suggest static alternatives and an optional site-wide control for disabling motion.

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

• Reviewing parallax effects on a website
• Checking support for reduced-motion preferences
• Providing static versions of animated content

Build and review HyperFrames animations using motion recipes, scene templates, and transitions. Find guidance for seven animation runtimes, including GSAP and Three.js, and inspect existing scenes for timing gaps and inconsistent motion.

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

• Combine motion recipes for text and shapes
• Build scenes with several animation phases
• Choose an animation runtime

Maintain visual snapshot tests, which compare rendered images, for Remotion’s web renderer. Update existing tests after implementation changes, or add explicitly requested tests with sample components, preview registration, and documentation updates for supported properties.

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

• Updating existing tests after renderer changes
• Adding an explicitly requested rendering test
• Registering a test fixture for preview

Prepare a Remotion workspace by checking out a requested branch or reference, installing dependencies, and building the project. In Codex, also rename the current task to the associated pull request title when one exists.

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

• Preparing a workspace for a specific branch
• Installing dependencies and building after checkout
• Naming a Codex task after its associated pull request

Add social-emotional learning—practicing emotional awareness, self-management, empathy, and collaboration—to subject lessons in OpenMAIC. It connects these goals to academic concepts through discussion, choices, feedback, retries, and reflection.

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

• Adding emotional check-ins to the start of a subject lesson
• Practicing empathy through discussion of different viewpoints
• Building feedback and retry paths into learning activities

Design and review web interfaces using Apple’s principles for fluid interaction. Shape drags, swipes, and spring motion that can change direction mid-animation, alongside translucent layers, readable typography, and accessible alternatives to movement.

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

• Design drawers that follow the user's finger
• Carry swipe momentum into animations
• Refine translucent layers and typography

Create product videos from real webpage screenshots using shot recipes and a ready-made template. Combine camera movement, cuts timed to music, and sound effects, or adapt a single shot for use in another video.

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

• Turn a website into a product video
• Adapt the Ink Press template to a product
• Create one animated shot from a recipe card

Turn a script into sequential visual frames with large text, timed playback, manual controls, and a progress bar. Frame timing and transition metadata support later rendering with Hyperframes or Remotion.

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

• Introducing an AI workflow through sequential scenes
• Turning a short explanation into an animated presentation
• Preparing frames and timing metadata for video rendering

Add animated transitions to presentation videos and interactive effects to HTML slideshows. Plan the sequence and timing of movement, apply effects such as fades or zooms, and produce an enhanced video or browser player.

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

• Adding transitions to an existing presentation video
• Animating text and page changes in an HTML slideshow
• Adjusting animation timing and direction