본문으로 건너뛰기
cccskills

'motion' 검색 결과

2.3천건 · 관련도순

gsap-core

무료

Create and review GSAP code that animates webpage elements and SVG graphics. Covers movement, fades, easing that controls speed changes, staggered effects, playback controls, and adaptations for screen size and reduced-motion preferences.

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

  • Adding entrance animations to webpage elements
  • Animating multiple items with staggered starts
  • Adjusting motion for desktop and mobile screens
greensock/gsap-skills1.7만2026년 7월 30일 업데이트

Build and review interface components with guidance on animation timing, press feedback, drag behavior, and accessibility. Decide when motion helps, choose concrete settings, and explain proposed code changes in a before-and-after comparison.

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

  • Refine button and menu interactions
  • Choose animation timing and easing
  • Improve drag behavior and interruptions
spree/spree1.6만2026년 10월 20일 업데이트

Review UI animation code for purposeful motion, responsive timing, correct origins, performance, and accessibility. Get a table of specific changes with reasons, followed by an approval or blocking decision ranked by impact.

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

  • Review dropdown and tooltip animations
  • Identify unnecessary motion in frequent actions
  • Check animation performance risks
spree/spree1.6만2026년 10월 20일 업데이트

Choose a sales approach based on product price, complexity, and buyer needs. This skill helps plan self-service trials, human sales involvement, and experiences that let prospects recognize value before purchasing.

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

  • Choosing between product-led and sales-led growth
  • Improving conversion from free users to paying customers
  • Reducing the time until users first experience value
tech-leads-club/agent-skills7.1천2026년 10월 17일 업데이트

Build chapter-based pages that move sideways as visitors scroll vertically. Deriving each scene from scroll position keeps reverse scrolling, jumps, and reloads consistent, with guidance for transitions, chapter links, keyboard controls, and reduced motion.

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

  • Building a horizontal product tour
  • Creating a chapter-based scrolling story
  • Fixing scene mismatches after jumps or reloads
MengTo/Skills6.9천2026년 10월 18일 업데이트

Build falling leaves or petals with visible front-and-back tumbling and sideways motion tied to rotation. Covers 2D canvas and 3D implementations, depth layers, particle density, rendering costs, and reduced-motion support.

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

  • Add autumn leaves to a web page
  • Animate drifting cherry blossom petals
  • Create layered foliage in a 3D scene
MengTo/Skills6.9천2026년 10월 18일 업데이트

Design and build marketing sites, portfolios, and landing pages with original imagery, coordinated typography, and GSAP animations. The workflow also covers accessible interactions, media sourcing, performance limits, and static alternatives when motion or graphics are unavailable.

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

  • Build a landing page with coordinated imagery and motion
  • Create a portfolio with a distinctive visual direction
  • Design accessible scroll animations
MengTo/Skills6.9천2026년 10월 18일 업데이트

Create animated bar charts for weekly metrics or KPIs using real data. Bars grow from zero while their numbers count up in sync, with layouts that adapt to widescreen, vertical, and square video formats.

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

  • Presenting weekly metrics in a video
  • Animating KPI comparisons
  • Adding a data segment to an existing video
nexu-io/html-video4.7천2026년 6월 22일 업데이트

onetake

무료

Make short product / skill motion videos (10–30 s, narrated feature demos up to ~60 s) the way high-end launch clips are made — kinetic type, real UI as the material, a hand that causes every reaction, beats that carry into each other instead of replacing each other, hard cuts only where they mean something — without HyperFrames or Remotion. A single HTML composition where every value is a pure function of time, built from a library of measured moves (springs, entrances, carries, contact, camera), rendered frame by frame with real shutter motion blur (1080p30 drafts, 4K60 final), with synthesised sound effects that share one room and an oracle that fails a slideshow before a human has to watch it. Use for 做个动效短片 / 产品宣传片 / 介绍视频 / 发布视频 / 15 秒 launch video / 给 skill 或 app 做个视频 / promo / teaser, for turning real pages or screen recordings into a cut, for product feature demos (产品功能演示 / 功能展示动效) where the UI is rebuilt in HTML from screenshots instead of screen-recorded (不录屏 / 复刻界面 / 截图还原 UI), for narrated cuts with voice-over and subtitles (配音 / 字幕 / 换配音) and for the same film in other languages (日语版 / 多语言 / 本地化), for adding motion vocabulary (动效库 / 转场 / 衔接), and for auditing why a motion video reads as a slideshow (像 PPT / 没节奏 / 一个一个展示 / 转场生硬).

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

feitangyuan/onetake2.8천2026년 10월 13일 업데이트

Use whenever the agent needs to add, create, hand-author, patch, or place Motion Graphic JSX assets in a OpenChatCut project. This is the direct-authoring path: use create_motion_graphic_from_code / edit_asset / edit_item, not motion-graphic-gen or submit_motion_graphic. Covers project/timeline intake, project visual language, editable properties, asset binding, inline JSX authoring, existing asset updates, timeline placement, and verification.

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

0xsline/OpenChatCut2.5천2026년 10월 20일 업데이트

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep).

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

nolangz/pixel2motion2.5천2026년 8월 21일 업데이트

Design and build a 10-30 second motion-design showreel or brand reel in the style of Nate's Opus 5.5 "CLAUDE / MOTION REEL": one brand motif transformed through labeled craft chapters, a persistent HUD, cuts locked to a 120-130 BPM grid, a sub-second flurry, and a held logo lockup that answers the opening. Use when asked for a showreel, sizzle reel, brand reel, motion reel, "a reel like the Opus one", "show off motion design for <brand>", a 15-second brand film cut to music, or to study why a reference reel works and rebuild that energy for another brand.

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

nateherkai/herk-edit-kit1.9천2026년 10월 14일 업데이트

Design and build a 10-30 second motion-design showreel or brand reel in the style of Nate's Opus 5.5 "CLAUDE / MOTION REEL": one brand motif transformed through labeled craft chapters, a persistent HUD, cuts locked to a 120-130 BPM grid, a sub-second flurry, and a held logo lockup that answers the opening. Use when asked for a showreel, sizzle reel, brand reel, motion reel, "a reel like the Opus one", "show off motion design for <brand>", a 15-second brand film cut to music, or to study why a reference reel works and rebuild that energy for another brand.

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

nateherkai/hyperframes-student-kit1.5천2026년 10월 13일 업데이트

制作屏摄风格的鱼眼畸变效果与聚焦动画:桶形鱼眼畸变 + 细扫描线/摩尔纹干涉 + 四周暗角, 可对任意图片/视频做「推镜聚焦到某处 + 黄色标注块滑入」的 Remotion 视频输出。 核心是 clone https://github.com/vibe-motion/fisheye-motion 项目并按需改参数渲染。 触发词:鱼眼、fisheye、屏摄、摩尔纹、moire、扫描线、CRT、暗角、vignette、 聚焦推镜、高亮标注动画、screen-photo effect。

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

vibe-motion/skills1.4천2026년 10월 6일 업데이트

在 Remotion 项目中创建带动画的金融 K 线图(蜡烛图)。涵盖数据获取(Yahoo Finance)、 插件架构(config / timeline / Scene / plugin)、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词:K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。

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

vibe-motion/skills1.4천2026년 10월 6일 업데이트

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep).

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

vibe-motion/skills1.4천2026년 10월 6일 업데이트

Assemble a stop-motion hand-swatch-cycle product-demo ad from a config — a sequence of still PLATES (one hand swiping a single-barrel product across a test surface, the barrel + swatch changing per plate while the hand, background, crop, and lighting stay locked) is PNG→mp4 loop-encoded at each plate's own stop-motion hold (fast motion frames 150–250ms, per-shade ~380ms, hero beats 1100–1800ms), concat-demuxed with HARD cuts into a silent master, closed on a Playwright HTML-rendered branded end card (serif tagline + sans subtitle + real logo SVG over a hero BG, never AI-rendered text), and muxed with a pre-sourced music track playing under the end card with a fade tail (no VO). This is the FREE deterministic assembly stage (loop-encode + concat-demux + end-card render + music mux); the master-anchor plate, shade plates, and end-card BG come from create-image-gpt-image-fal and the track from create-music-elevenlabs. Use for the stopmotion-hand-swatch-cycle format.

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

gooseworks-ai/goose-skills1.3천2026년 10월 20일 업데이트

Plan manipulator motion and generate trajectories in MATLAB. Use when the task involves moving a robot arm between configurations or poses — whether the user says "trajectory," "motion," "path," "move from A to B," or "plan." This skill applies regardless of whether the user explicitly mentions collisions or obstacles; if geometry exists in the workspace, collision safety is implicit. Triggers on: manipulatorRRT, manipulatorCHOMP, dlCHOMP, contopptraj, trapveltraj, collision-free path, motion planner, RRT, CHOMP, TOPPRA, path shortening, obstacle avoidance for manipulators, time-optimal trajectory, velocity limits, acceleration limits, occupancyMap3D, meshtsdf, collision objects as environment, trajectory between waypoints, joint interpolation, move between poses, constant velocity, trapezoidal profile, feed rate. Also triggers when a user has IK solutions or waypoints and needs to connect them — whether for time-optimal motion, constant-speed welding/cutting, or any other trajectory parameterization.

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

matlab/matlab-agentic-toolkit1.2천2026년 10월 14일 업데이트

Generate motion design advertisement video prompts for software and tech companies using Seedance 2.0 on Higgsfield. Use whenever the user wants to create a software product ad, SaaS promo, app launch video, tech demo, UI showcase, startup video, or motion graphics for a tech company. Triggers on: software ad, SaaS video, product launch, app promo, tech commercial, UI animation, motion design ad, startup video, product demo video, feature showcase, or any software/tech promotional video request. Use even for "make a video for my app" or "promo for our platform.

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

beshuaxian/higgsfield-seedance2-jineng9782026년 4월 10일 업데이트

Turn a talking-head video and its transcript into motion-graphic B-roll timed to the speaker's words, in a continuous one-shape style (one element that morphs and never cuts, driven by a cursor, spring motion). Use when someone gives a video (and ideally a transcript) and asks for motion graphics, B-roll, animated cutaways or overlays.

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

Barty-Bart/motion-graphics7592026년 10월 13일 업데이트

cinetic

무료

Direct, build and render premium cinematic motion design from code — launch films, product and feature videos, looping feature animations for landing pages and social, logo stings and reveals, UI walkthroughs, app demos, kinetic type, teasers, trailers, intros and promo clips. Use this whenever the user wants any video, animation, motion graphic or animated demo made with Remotion, HyperFrames, HTML/GSAP or React, or asks to storyboard, time, score, render, polish or critique one — even if they only say "make a video about X", "animate this feature" or "we need a launch clip". It supplies concept and copy discipline, type and colour taste that defers to a supplied brand, a beat-locked timeline that drives both picture and a code-made soundtrack, choreography and transition craft, real product UI in motion, film-grade finishing (true motion blur, no banding, BT.709, sync-checked mux) and a measured self-critique loop on contact sheets and renders.

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

Leonxlnx/cinetic7152026년 10월 18일 업데이트

Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila perlu), dengan hasil yang bergerak seperti video sungguhan — bukan slide presentasi. Gunakan skill ini setiap kali user meminta "video promo", "opener", "intro animasi", "motion graphic", "bumper", "kinetic typography", "animasi teks sinematik", "explainer", "video penjelasan" (jurnalisme visual, kartun edukasi, kolase), atau menunjukkan referensi video promosi/explainer dan ingin dibuatkan versi web-nya — bahkan bila mereka tidak menyebut kata "motion graphic" secara eksplisit. Juga gunakan bila user mengeluh hasil animasi web "seperti PPT/presentasi" dan ingin lebih sinematik, atau ingin merender animasi web menjadi file video MP4, atau ingin explainer kartun/animasi dibangun LANGSUNG di After Effects lewat bridge/MCP Higgsfield.

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

bangtutorial/bang-motion6662026년 9월 15일 업데이트

Code-only motion design pipeline (no After Effects) for Raphaël / Howseen: launch films, showreels, product promos, LinkedIn/X videos, meme clips. Use when asked to make a motion design video, a promo/launch film, a showreel, "remake this video", a video from a prompt (e.g. "make a 15s motion graphics video…"), to change a video's music/SFX, or to prepare memes for posts. Covers the brief → beat map → stills → seek(t) HTML engine → Playwright render → ffmpeg → music/SFX → QA flow, plus asset sourcing (Mixkit, Pexels, Unsplash, svgl, 21st.dev) and every gotcha hit so far.

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

howseen-ai/claude-motion-design6032026년 10월 4일 업데이트

Direct and produce Chinese-first cinematic motion videos with HyperFrames. Use this skill when the user wants a rendered promo film, article-to-video piece, product launch film, website-to-video piece, keynote reveal, kinetic typography sequence, text/icon transition promo, music-synced motion graphic, HTML/CSS/SVG/GSAP video, short-form vertical video, or a landing page/product story turned into motion. Default to Simplified Chinese, vertical 9:16, and 1080x1920 unless the user or platform clearly requires another format. The skill enforces a two-phase workflow: brief first, confirmation second, then assets, composition, validation, snapshots, render, and review report.

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

geekjourneyx/hyperframes-motion-director4652026년 7월 26일 업데이트