32건 · 관련도순
Apply Disney's 12 animation principles to Lottie vector animations exported from After Effects. Use guidance on keyframes, motion paths, and playback controls to shape anticipation, timing, secondary actions, and interactive movement.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation on web or mobile", "control Lottie playback / segments", "make a scroll-driven Lottie", "recolor a Lottie at runtime", or "export an AE animation to Lottie". Covers dotLottie/lottie-web integration, playback control, interactivity, theming, and the AE export checklist.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Build HyperFrames animations from small motion recipes, scene templates, and transitions. The skill guides runtime selection, including GSAP, Lottie, and Three.js, and provides an audit script to examine timing and choreography while following HyperFrames requirements for reproducible rendering.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects JSON export, bodymovin, animated SVG alternatives, or designer-created animations. Complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive animations.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
An animated bottom-tab indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
A heart/favorite icon that animates on toggle — Lottie JSON, portable across web & app. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
An animated pagination dots indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
A floating action button that morphs open — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Production guidance for assessing, exporting, packaging, integrating, capturing, validating, and handing off Lottie vector animations. Use for Bodymovin/Lottie JSON, dotLottie archives, renderer and player compatibility, fonts and glyphs, image assets, markers and segments, deterministic video capture, responsive sizing, optimization, accessibility, and cross-platform QA; not for general After Effects animation craft or live-action/video delivery.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Create videos in React with Remotion using focused implementation guidance and code examples. The skill covers animation, audio, captions, charts, 3D content, and scene transitions, along with handling media assets and timing.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
World-class motion graphics expertise combining the animation principles of Disney, the kinetic typography of MK12, and the visual storytelling of studios like Buck and Ordinary Folk. Motion graphics transforms static ideas into dynamic visual experiences. Great motion graphics doesn't just move—it communicates. Every animation should have purpose: to guide attention, reinforce message, create emotion, or clarify concept. The best motion designers understand that restraint is power, that timing is everything, and that the animation should be invisible—viewers should feel the story, not notice the effects. Use when "motion graphics, animation, animate, motion design, kinetic, logo animation, title sequence, lower thirds, animated, after effects, lottie, transitions, motion, motion, graphics, animation, after-effects, lottie, kinetic, typography, design" mentioned.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Load when creating, editing, or debugging Lottie/Bodymovin JSON for the local Skia Skottie player: logo/type/SVG animation, loaders, icons, UI microinteractions, lower thirds, charts, diagrams, scene motion, effects, slots, or controls; not for static raster/SVG, CSS-only motion, or video editing.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Use when preloading fonts, asset/network images, Lottie/Rive animations, local JSON/config, warming initial API data, or optimizing Flutter Web startup.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
World-class motion design expertise combining Disney's 12 principles of animation, Material Design's motion system, and the performance-first philosophy of production interfaces. Motion design is the craft of bringing interfaces to life - not through decoration, but through clarity, continuity, and communication. Great motion design is invisible. Users don't notice the animations - they notice that the interface feels natural, responsive, and alive. Every transition tells a story: where did this come from? Where is it going? What just happened? Motion is the language of cause and effect in digital interfaces. Use when "animation, motion, transition, microinteraction, easing, timing, choreography, loading animation, skeleton loader, page transition, hover effect, scroll animation, spring animation, keyframes, framer motion, gsap, lottie, animation, motion, transitions, microinteractions, easing, timing, accessibility, performance, frontend, design" mentioned.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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 "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), video, and app-splash delivery.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
This skill should be used when the user asks anything about Adobe After Effects — to "write an After Effects expression", "make a wiggle / loopOut / inertial bounce", "rig a control with a slider / null", "build a MOGRT / Essential Graphics template", "export AE to Lottie or Media Encoder"; OR to "export from After Effects", "export with transparency / an alpha channel", "fix a black background on export", "choose ProRes vs H.264", "which codec / what bitrate for 1080p / 4K", "stop H.264 disappearing from the Render Queue"; OR when "After Effects is slow / laggy / crashing / froze", "RAM preview won't play in real time", "AE is using all my memory / render takes forever", "how do I speed up After Effects"; OR to "organize my After Effects project", "relink missing footage", "fix broken links after moving files", "set a folder structure / naming conventions", "batch rename layers", or "write an ExtendScript / .jsx script". Covers expressions & rigging, export recipes, performance triage, and project hygiene.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.