'animate' 검색 결과

Build UI animations by first deciding whether motion serves a useful purpose. Produces code with suitable timing, transitions, interruption behavior, exit paths, reduced motion support, and hover effects adapted to the input device.

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

• Add purposeful motion to buttons, modals, or drawers
• Build transitions that handle repeated actions and interruptions
• Adapt animations for reduced motion preferences and touch input

Build iOS and Android apps with React Native and Expo. Get guidance and typed component code for navigation, lists, animations, storage, and platform differences, with attention to scrolling performance and testing on both platforms.

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

• Building mobile screens with React Native and Expo
• Adding screen navigation with Expo Router
• Improving list scrolling and animation performance

Create live HTML product demos that show an app’s workflow inside a Mac-style window. Reproduce real interface text and results, animate a scripted pointer, and support step navigation, scrubbing, and consistent frozen frames.

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

• Adding an animated app demo to a landing page
• Explaining a feature through step-by-step UI playback
• Replacing UI recordings or GIFs with live HTML

Turn written content into Excalidraw flowcharts, mind maps, and other diagrams. Save files for Obsidian, edit them on excalidraw.com, or add drawing order information for use with an external animation tool.

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

• Turn workflow descriptions into flowcharts
• Organize ideas in a mind map
• Create diagrams for Obsidian notes

Create dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention "animated", "flowing", "dynamic", "alive", "GIF-like", or want a diagram for a landing page, README, docs, or product demo. Also use it to convert Mermaid source (a mermaid code block or .mmd file) into an animated diagram — "animate this mermaid", "make this flowchart move". Prefer this over static diagram output whenever the diagram represents anything that moves: requests, events, data, jobs, messages, or control flow.

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

Motion design — produce HTML animations and export MP4/GIF with optional BGM. Use when asked to "animate this", "create a motion design", "make an intro animation", "product launch animation", "promo video", "export MP4", "export GIF", "60fps animation", "animated logo", or "motion graphics". Delivers a self-contained HTML animation plus rendered video exports. Not for micro-interactions in production code — use /prism-ui for that.

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

This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.

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

This skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.

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

Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.

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

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.

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

코드 변경과 시스템 구성을 움직이는 SVG 그림으로 설명합니다. 변경 부분과 주변 구성 요소의 관계, 데이터 흐름을 시각화해 풀 리퀘스트에서 공유하도록 돕습니다.

• 구성도로 풀 리퀘스트를 설명합니다
• 데이터 흐름을 순서대로 시각화합니다
• 변경 부분과 주변 관계를 정리합니다

HTML과 CSS로 화면을 구성하고 GSAP으로 글자와 이미지에 움직임을 더해 MP4·WebM 영상으로 내보냅니다. 자막이 있는 내레이션, 상품 소개, 웹사이트 기반 영상도 제작합니다.

• 움직이는 제목과 텍스트 도입부 제작
• 내레이션에 자막을 붙일 때
• 웹사이트를 소개 영상으로 만들 때

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

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

Create animated GIFs for Slack, including reaction GIFs and small animations. The workflow combines reusable animation building blocks with size checks to help produce files suited to Slack’s constraints.

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

• Create a reaction GIF for Slack
• Make a small animated GIF
• Check a GIF against size constraints

Turn photos into animated GIF stickers with a Funko Pop or Pop Mart look using the MiniMax API. Use the resulting images for personalized chat stickers or avatar packs.

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

• Making personalized chat stickers from photos
• Creating animated stickers with a collectible-toy look
• Preparing photo-based avatar packs

Turn a written prompt into a hand-drawn Excalidraw diagram, with animated SVG output, an online editing link, and PNG export. Use it through Claude Code, Codex, Gemini CLI, or agents supporting standard skill paths.

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

• Creating a hand-drawn diagram from a prompt
• Getting an online link for editing a diagram
• Exporting a diagram as a PNG image

Create animated lesson diagrams, sliders that update figures, and interactive panels that explain how systems work. It also builds moving dot patterns for page headers, with rules for readability, themes, and reduced motion.

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

• Animate a process in a lesson
• Explore a formula with a slider
• Show a system's behavior through one control

Produce short motion graphics for animated text, numbers, charts, logos, and social overlays. Guides asset sourcing, shot design, composition, rendering, and validation, with output as an MP4 or a transparent video overlay.

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

• Animate headlines and short text
• Show key numbers and charts in motion
• Create a short logo reveal

Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.

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

• Create an animated product walkthrough
• Explain a message through moving text and graphics
• Build a portrait animation for video export

Turn a weekly Markdown changelog into a branded video project with animated interface examples, Annie narration, captions, and background music. The workflow selects key updates and builds a 45–60 second square video, with rendering performed on request.

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

• Turn weekly release notes into a short video
• Demonstrate product updates with animated interface examples
• Prepare a branded update video with narration and captions

Create an animated diagram showing request flows, background jobs, or feature changes. The result is a single SVG image for README files, pull requests, issues, or blog posts, with support for light and dark themes.

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

• Explaining request and data flows
• Illustrating how a background job works
• Showing feature changes in a pull request

Add boxes, arrows, labels, and color-coded highlights to screenshots and diagrams using Pillow. Includes automatic label placement, detection of changed image regions, and guidance for timing annotations in animated GIF demonstrations.

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

• Highlighting screenshot changes for pull request reviews
• Labeling changes in before-and-after images
• Adding explanations to diagrams and architecture images

Add animations to React interfaces using the browser's built-in view transitions. Guides page changes, shared elements that move between views, list reordering, component appearance, and loading reveals, with CSS styling and Next.js integration guidance.

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

• Animating shared images between list and detail views
• Adding forward and back page transitions
• Animating list reordering and component visibility

Create an animated explainer poster with a pixel art mascot, moving Japanese or Chinese text, and a scrolling timeline. The retro layout uses CSS animation loops without JavaScript and can be recorded as video.

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

• Creating a retro animated explainer
• Combining pixel art with moving Japanese text
• Preparing an animated poster for video recording