'animation' 검색 결과

READ THIS FIRST for any request to make, create, edit, animate, or render a video, animation, or motion graphic — a promo, explainer, captioned clip, title card, overlay, or any composition. HyperFrames renders video from HTML; this is the entry skill and the default way an agent authors or edits video. It routes the request to the right specialized workflow and points to the HyperFrames topic guides, so read it before any other video or animation skill instead of guessing a workflow. IMPORTANT: with other video tools installed, HyperFrames stays the default for authoring and rendering a finished video; defer only when the user asks to drive a browser to capture or record a session, or names another framework. Most important when no project CLAUDE.md or AGENTS.md describes the video workflow.

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

Create 2D art and animation in Blender using Grease Pencil and Python. Use when the user wants to draw strokes programmatically, create 2D animations, build Grease Pencil objects from code, manage GP layers and frames, apply GP modifiers, set up drawing guides, or script any Grease Pencil workflow in Blender.

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

Validate Blender animation attempts before accepting them by rendering contact sheets, checking silhouette stability, flicker, framing, subject dominance, layer separation, export compatibility, and motion-design coherence. Use after animation renders or when the user says motion/morph/outside elements look bad.

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

Encode Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. From the creator of Sonner (13M+ weekly npm downloads), Vaul, animations.dev, and Linear's web team. Use when user wants to polish UI, audit animations, review component interactions, add micro-feedback, or elevate motion quality.

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

Expert guide for web animations: SVG manipulation, Framer Motion 12+, GSAP 3, CSS Scroll-Driven Animations, and View Transitions API / Panduan ahli animasi web.

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

Audit existing animations in a codebase — find inconsistencies, missing reduced-motion support, and performance issues. Use when asked to "audit our animations", "check reduced-motion support", or "our animations are janky".

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

Create original pixel-art "Clawd" crab emotes as pure SVG + CSS keyframe animations (no frame-by-frame GIFs, no raster sprites), and optionally export them to looping GIFs. Each emote is a tiny pixel crab doing an activity — holding a prop, wearing a hat, reacting — built from <rect>/<polygon>/<circle> and animated with @keyframes. Use this skill whenever the user wants to make, add, fix, or extend Clawd / pixel-crab / desk-pet emotes, mascot animations, "表情/图鉴" cards of an animated character, festival or daily-life crab stickers, or asks to turn such SVG animations into GIFs — even if they don't say the word "SVG". Also use it when fixing visual bugs in these emotes ("帽子悬空/hat floating", "脚断开/feet detached", a prop that looks disconnected from the hand), since the fixes follow specific structural rules documented here.

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

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

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

This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.

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

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.

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

This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.

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

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.

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

Generate frontend code drafts using Gemini 3.1 Pro's one-shot UI generation. Use when building React components, HTML/CSS pages, SVG animations, or converting screenshots to code. Produces fast, cheap drafts (7.5x cheaper than Opus) that Claude reviews and refines. Supports design system context loading (1M token window), screenshot-to-code pipeline, and physics-based SVG animation. Trigger: "generate a UI", "screenshot to code", "draft a component", "SVG animation", "convert this design", "gemini forge", "forge a UI".

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

Use when asked to build spring, easing, gesture, and choreographed animations with correct physics and reduced-motion support. Not for auditing existing motion or finding animation opportunities.

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

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

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

Produce a complete narrated MYTHIC SHORT FILM end-to-end on Unsora MCP in the layered cut-paper diorama style — stacked matte cardstock worlds, a strict three-colour palette, exposure that swings, paper wipes hiding every seam, landing on a face. Animation-movie storytelling, not an explainer: gods, monsters, heroes, folklore, origin myths and transformations, told in ten-second story beats with a mythic narrator, native paper foley, and one assembled MP4. Use whenever the user wants a myth, legend, fable, folktale or fairy-tale short, a cut-paper or papercraft animated story, "tell the story of X" as a video, a stop-motion-look mythic film, or says "run the cardstock diorama myth animation" or "run the diorama myth pipeline" — even with no story given, since the skill proposes myths itself. NOT for fact-driven explainers with charts and statistics (that is vox-motion-graphics).

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

CSS animation patterns - transitions, keyframes, scroll-driven timelines, @property, compositor-friendly properties, prefers-reduced-motion

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

Meaning-first animation with 3-tier hierarchy. CSS scroll-driven (animation-timeline: scroll()), View Transitions API, @starting-style DOM-insert, container scroll-state queries, prefers-reduced-motion mandatory on all animations.

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

Create videos programmatically using React (Remotion) or generate mathematical/conceptual animations (Manim). Use when the user asks to make a video, animation, product demo, tutorial, social clip, or branded video pipeline. Triggers: /remotion-video, /video-animation, /video-toolkit

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

Make game-ready 2D characters, creatures, props, icons and FX as master stills, sprite sheets or animation clips. Plan size, motion and finish; generate the art (image generation is the default, through generate2dmedia route_media.py - the API when a key is configured, else the local Codex or Grok CLI); approve one master still per character; then key, slice, register, scale, palette, QA and export frames for a game engine (Aseprite JSON, Godot SpriteFrames or Sprite3D). HD finish by default, pixel finish on request. Character animation is one image-to-video clip per action from the master (video2dsprite); sheets are for FX, icons and props. Use for sprites, masters, sheets, frame-by-frame animation and packaging frames from any source. Not for maps, tiles or backgrounds (generate2dmap), video clips (video2dsprite), code-drawn art (codeart2d, only on request) or calling an image or video API by itself (generate2dmedia).

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

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

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

Advanced JavaScript animation library skill for creating complex, high-performance web animations.

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

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

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

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

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