본문으로 건너뛰기
cccskills
무료GitHub에 공개한국어 소개

oil-motion

영상이나 연속 이미지를 스크롤, 포인터, 드래그에 반응하는 웹 모션으로 만듭니다. 소재 제작 계획부터 타임라인 정리, 재생 제어와 동작 확인까지 다룹니다.

원문원문 설명 보기

处理视频和序列帧,编译滚动、指针、拖动与状态驱动的网页动效;内含本地媒体处理脚本和运行时。新素材生成使用宿主工具。

AI 평가100점/ 100설치 방법 보기

이럴 때 유용합니다

  • 스크롤과 영상 재생 연동
  • 드래그로 동작 상태 전환
  • 기존 영상이나 연속 이미지의 웹용 처리
  • 동작 연속성과 모바일 재생 확인

한국어 소개

할 수 있는 일

oil-motion은 영상이나 연속 이미지를 스크롤, 포인터, 드래그, 상태 변화에 반응하는 웹 모션으로 만듭니다. 조작과 동작의 관계를 정리하고 소재 제작 계획, 타임라인 작성, 배포 형식 선택, 페이지 재생 제어를 다룹니다. 입력에 따라 재생 위치가 바뀌는 방식과 구간별 재생 방식을 선택하며, 역방향 조작과 정지 이미지 전환도 설계합니다.

이럴 때 유용합니다

스크롤에 맞춰 제품의 움직임을 보여 주거나 드래그로 상태를 바꿀 때 유용합니다. 기존 영상이나 연속 이미지로 시작할 수도 있습니다. 먼저 작은 시제품을 실제 페이지에 넣어 연속성과 부하를 확인한 뒤 제작을 진행합니다.

사용 예시

  • “이 영상의 재생 위치가 스크롤 양에 따라 바뀌게 만들어 주세요.”
  • “드래그하면 다음 상태로 진행하고 반대로 조작하면 현재 위치에서 되돌아가게 해 주세요.”

주의 사항

로컬 처리에는 Python 3.10 이상, -fps_mode를 지원하는 FFmpeg와 ffprobe, Pillow, NumPy, PyYAML이 필요합니다. 로컬 처리에는 API 키가 필요하지 않습니다. 새 이미지나 영상은 실행 환경의 도구로 생성합니다. 참고 코드를 납품물에 복사할 때는 원래 저작자 표시와 라이선스 문구를 유지합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가
A양호스크롤과 드래그 등의 입력 및 소재 처리와 재생 제어의 역할을 명시합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가
A양호아홉 단계의 절차와 timeline.json 등의 출력 형식을 명시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가
A양호입력 덮어쓰기를 금지하고 의존성의 격리 설치와 생성 도구 사용 범위를 명시합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
A양호Python과 FFmpeg 등의 요구 사항과 requirements.txt를 통한 설치 방법을 설명합니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

어느 항목이 왜 다르다고 생각하는지 적어 주세요. 로그인은 필요 없습니다. SKILL.md와 대조해 평가를 다시 만들고 이곳에 반영합니다.

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

포함된 파일(32)

  • SKILL.md12.1 KB
  • assets/chroma-video-renderer.ts12.9 KB
  • assets/interactive-motion.ts14.6 KB
  • assets/motion-explainer-template.html33.3 KB
  • assets/motion-manifest.example.json339 B
  • assets/step-gesture.ts1.9 KB
  • LICENSE1.0 KB
  • references/alpha-atlas.md4.3 KB
  • references/baked-video.md3.5 KB
  • references/chroma-video.md4.2 KB
  • references/concepts.md11.3 KB
  • references/delivery-selection.md5.9 KB
  • references/explainer.md3.1 KB
  • references/license.md1.0 KB
  • references/motion-patterns.md16.9 KB
  • references/optimization.md2.7 KB
  • references/prompting.md15.0 KB
  • references/qa.md6.6 KB
  • references/runtime.md7.5 KB
  • scripts/chroma_key.py5.9 KB
  • scripts/compile_scroll_video.py39.6 KB
  • scripts/compose_travel_frames.py4.5 KB
  • scripts/composite_alpha_keyframe.py1.7 KB
  • scripts/create_explainer.py6.6 KB
  • scripts/loop_cleanup.py5.3 KB
  • scripts/media_edges.py1.3 KB
  • scripts/motion_budget.py14.4 KB
  • scripts/motion_pipeline.py36.0 KB
  • scripts/optimize_motion.py27.9 KB
  • scripts/production_gate.py15.4 KB
  • scripts/requirements.txt43 B
  • SOURCES.md932 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Open Design 宿主约定

这是当前任务中的功能技能。保留用户选定的任务类型、品牌、技术栈、当前阶段和交付格式;不要因为 @ 选择而改成视频项目。规划阶段只规划,实现阶段才写代码。检查、渲染和导出仅在宿主当前阶段允许且工具真实可用时执行;技能不能额外开启独立 Agent、强制审批或绕过宿主交付边界。

附属文件相对当前技能包根目录读取,按当前问题选读,不把全部参考文档粘入提示词。不读取其他 Agent 的全局配置。素材优先用用户已有文件;需要新图片、视频或音频时使用当前宿主实际提供且用户允许的工具。缺少生成、测量或导出能力时说明具体缺口,交付可验证部分,不声称完成未执行的步骤。遵循当前任务的输出路径,不覆盖输入或历史产物。

Oil Motion

把用户的交互意图转换为可验收的动画素材、时间轴清单和网页运行时。AI 生成负责肢体、结构、材质、遮挡等语义变化;程序负责输入映射、播放控制、媒体处理和性能。

本适配包包含本地媒体处理脚本和网页控制器。运行 Python 脚本前检查 Python 3.10+、支持 -fps_mode 的 FFmpeg / ffprobe、Pillow、NumPy、PyYAML;缺少依赖时仅在任务隔离环境中按 scripts/requirements.txt 安装,不修改全局环境。纯本地处理不需要 API Key。

运行参考命令前,将 OIL_MOTION 设为本次实际加载的技能目录:

OIL_MOTION="<本次 SKILL.md 所在绝对目录>"

图片/视频生成交给宿主已有工具。此包不包含上游的生成服务、Keychain 或凭据配置页面;不要尝试调用它们。

四个唯一事实源

每项信息只保存在一个位置,其他文件引用它,不复制:

  1. source/concept-contract.yaml:用户明确要求的对象、视觉、交互和连续性。
  2. source/motion-brief.yaml:由合同派生的关键帧、片段和生产计划。
  3. build/timeline.json:成片的实际帧率、段落边界、停帧和播放曲线。
  4. build/motion-budget.json:交付格式与运行时控制器的自动选择结果。

主流程

1. 锁定用户意图

用户只有模糊目标时,先读 references/concepts.md,给出最多三个真正不同的方向;要求已经明确时直接写 Concept Contract。

需要外部案例启发时,按表达目的选读 references/motion-patterns.md。先分清哪些变化属于素材本身、哪些只是容器编排或 UI 状态,只有前者进入生成流程。

subject_count: <number>
subjects:
  - identity: <可验证的身份或外观锚点>
style: <用户原词>
motion_intent: <动作及视觉结果>
background_owner: video | page
scene: <背景属于视频时的场景、镜头和光线要求>
driver: scroll | pointer | drag | touch | orientation | audio | data | state | time
input_semantics: continuous | step | event
time_control: scrub | segment-play | autonomous
navigation: continuous | paged | none
clip_continuity: chain | independent
continuity: [<必须保持不变或连续的内容>]
aspect_ratio: 16:9 | 9:16 | 1:1 | 21:9 | custom
destination: <页面位置、最大显示尺寸和目标设备>

判断规则:

  • aspect_ratio 取自 destination 的真实容器:横向全屏或 Hero 通常是 16:9,竖屏全屏是 9:16,卡片、头像等方形视窗是 1:1;不要未经确认就默认 1:1。容器比例与生成比例不一致时,在合同中写明裁切或补边策略。锁定后关键帧尺寸、视频画幅和编译输出都沿用同一比例,尺寸对照见 references/prompting.md。
  • scrub:输入值与时间轴位置持续对应,输入停止时画面停在当前位置。
  • segment-play:输入选择下一状态,片段随后按时间播放;反向输入应从当前画面撤回,不得换源硬切。
  • autonomous:动画由时间推进,交互只负责开始、暂停或切换状态。
  • navigation 只描述页面如何移动,不决定视频如何播放;分页页面也可以使用连续时间轴。
  • 镜头、环境光、接触阴影、景深或背景连续性重要时使用 background_owner: video。只有主体必须透明复用在页面背景上时使用 page。
  • 用户已说清的内容直接记录,不改写、不扩写。缺项会改变可生成性、可验收结果或生产路线时,必须先补齐。

2. 建立生产计划

Motion Brief 只保存派生计划,不复制合同字段:

concept_contract: source/concept-contract.yaml
identity_bible: source/identity-bible.md | null
parameter_space: linear | circular | 2d | discrete
media_access: sequential | random
gesture_policy:
  unit: continuous | one-gesture-one-step
  inertia: coalesce | preserve
  while_active: retarget | queue | ignore
  boundary: clamp | loop
  programmatic_navigation: ignore | observe
storyboard: <有序视觉阶段>
keyframes: <K0…Kn>
clip_chain: <每段使用的相邻关键帧>
rest_state: <初始及失去输入时的状态>
loop: open | closed | none
anchor: fixed-body | center | bottom | free
scene_continuity: <仅背景属于视频时填写>
frame_policy: native | interpolate
target_fps: <由源素材和运行时需求决定>
quality_target: <分辨率、DPR 和文件预算>
pixel_dimensions: <宽x高,由合同的 aspect_ratio 与 DPR 派生>
reduced_motion: <静态替代状态>

parameter_space 描述素材时间轴,不描述页面布局:linear 是有起止的时间轴,circular 是闭环,2d 是二维采样,discrete 是互不连续的状态。不要把二维或无序状态压成一条线性视频。

frame_policy 与 target_fps 的取舍标准见 references/optimization.md。

整组位移、缩放、旋转、裁切和时间映射由程序完成;关节、结构、材质、接触和遮挡变化由生成模型完成。如果只移动整张图不能保持自然,就生成完整动作,不继续叠加 CSS 补丁。

3. 自动选择交付与运行时

在宿主允许运行工具的阶段,用 Brief 中的计划帧数、显示尺寸和参数空间运行 motion_budget.py --strict,显式传入合同中的 background_owner 和 time_control,保存 build/motion-budget.json。Pilot 按这个结果挂载到真实页面;之后帧数或尺寸变化就重新预算。脚本分别返回:

  • delivery.selected:baked-video | chroma-video | alpha-atlas。
  • runtime.controller:frame-scrub | segment-playback | autonomous-playback。

格式选择与播放方式是两件事,不得互相推断。命令和决策顺序见 references/delivery-selection.md。按结果只读取一条媒体路线:

4. 制作关键帧

  1. 有角色或需要身份一致时,先写 Identity Bible。
  2. 生成并验收 K0…Kn;每段只承担一个主要语义变化,片段 i 使用 Ki → Ki+1。clip_continuity: chain 时,第 2 段起的首帧改用上一段验收后的实际尾帧,尾帧仍是计划关键帧。
  3. 用宿主可用图片工具生成关键帧:按 aspect_ratio 传尺寸,并核对脚本报告的实际宽高比;尺寸至少覆盖最大 CSS 尺寸乘目标 DPR。真实产品、既定角色或上一张关键帧用 --image 作为参考输入,不只凭文字描述。
  4. background_owner: page 请求透明输出,并实际检查 Alpha 通道;不得先生成色底再反向抠图。视频模型需要色键输入时,由 composite_alpha_keyframe.py 从透明源合成副本。background_owner: video 使用不透明场景输出,场景直接画进关键帧。
  5. 命令、尺寸对照、提示词、首尾帧模式和提交方式见 references/prompting.md。宿主自带的图片工具同样能输出真实 Alpha 并接受参考图时也可以使用,验收标准不变。已有视频或序列帧时跳过生成,保留原始素材并从分析开始。

5. 先做 Pilot

批量生成前,只完成第一组关键帧、第一段视频,并按已选路线挂载到真实页面。按 references/qa.md 通过 Pilot 硬门后才能量产;失败就修正上游,不在运行时掩盖。

6. 生成并逐段验收

按 references/prompting.md 生成母版,按 references/qa.md 验收内容与连续帧链。chain 模式必须同时验证生成输入接力和相邻成片解码后的输出接缝;任一失败都停止后续生产。

7. 帧准备、清理与编译时间轴

按 references/optimization.md 执行 frame_policy(插帧出现重影或伪影时退回 native 或重新生成),再按已选媒体路线清理和编译。所有裁剪和拼接都要检查新产生的相邻帧;不得用一次远距离跳帧替代缓慢尾部变化。

编译后生成 build/timeline.json,字段语义只以 references/runtime.md 的时间轴规范为准。时间值必须由最终编译结果生成,不手工抄写。

8. 接入运行时

从 assets/interactive-motion.ts 的对应控制器开始实现(frame-scrub 管理随动与最短环形距离,segment-playback 管理分段与反向);分步手势使用 assets/step-gesture.ts。输入映射、分段播放、反向、取消、预加载和降级只以 references/runtime.md 为准。

9. 最终验收

按 references/qa.md 在目标 CSS 尺寸、DPR、冷缓存、快速反向、移动端和资源失败条件下验收。页面导航、时间控制、媒体格式和连续性分别检查,不用一种检查代替另一种。

需要动画原理展示页时,读 references/explainer.md 并使用 create_explainer.py。

交付

保留 source/、pilot/、build/、qa/ 和 final/。final/ 只包含选中的主资源、静态降级和运行时入口;同时按宿主交付契约附上四个事实源及可复现的处理命令。

随包运行文件

下列文件随会话冻结,按需读取;所有 Python 内部依赖和运行时模板均在包内。

  • assets/chroma-video-renderer.ts
  • assets/interactive-motion.ts
  • assets/motion-explainer-template.html
  • assets/motion-manifest.example.json
  • assets/step-gesture.ts
  • references/alpha-atlas.md
  • references/baked-video.md
  • references/chroma-video.md
  • references/concepts.md
  • references/delivery-selection.md
  • references/explainer.md
  • references/motion-patterns.md
  • references/optimization.md
  • references/prompting.md
  • references/qa.md
  • references/runtime.md
  • scripts/chroma_key.py
  • scripts/compile_scroll_video.py
  • scripts/compose_travel_frames.py
  • scripts/composite_alpha_keyframe.py
  • scripts/create_explainer.py
  • scripts/loop_cleanup.py
  • scripts/media_edges.py
  • scripts/motion_budget.py
  • scripts/motion_pipeline.py
  • scripts/optimize_motion.py
  • scripts/production_gate.py
  • scripts/requirements.txt

许可随包保留

references/license.md 随会话包保留来源许可。复制参考代码到交付工程时保留上游署名及许可文本。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

8-bit-orbit-video-template

무료요약 있음AI 평가 90점

복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.

  • 픽셀 스타일의 소개 영상을 만들 때
  • 세 장면 영상의 내용을 교체할 때
  • HTML에서 장면 전환을 확인할 때
nexu-io/open-design10.3만2026년 10월 21일 업데이트

ad-creative

무료요약 있음AI 평가 80점

소셜 미디어 광고와 검색 광고의 제목, 설명, 본문을 작성하고 표현을 반복해서 수정합니다. 광고 문구 후보를 준비하고 개선안을 검토할 때 활용합니다.

  • 소셜 미디어 광고 제목을 작성합니다
  • 검색 광고 설명을 준비합니다
  • 광고 본문 표현을 검토합니다
nexu-io/open-design10.3만2026년 10월 21일 업데이트

after-hours-editorial-template

무료요약 있음AI 평가 80점

어두운 배경과 세리프 글꼴로 패션 잡지 같은 세 페이지 동적 연출을 만듭니다. 글자 단계 표시와 장면 전환을 포함한 단일 HTML 파일로 출력합니다.

  • 패션 잡지 분위기의 움직이는 소개 제작
  • 짧은 이야기를 세 페이지로 표현
  • 기존 브랜드 표현을 어두운 지면에 적용
nexu-io/open-design10.3만2026년 10월 21일 업데이트

agent-browser

무료요약 있음AI 평가 100점

브라우저에서 페이지를 살펴보고 클릭, 입력, 화면 캡처, 정보 추출을 수행합니다. OpenDesign의 로컬 미리보기를 중심으로 웹 앱의 동작과 품질을 확인합니다.

  • OpenDesign 미리보기를 확인합니다
  • 웹 앱의 클릭과 입력을 테스트합니다
  • 페이지나 요소의 화면을 캡처합니다
nexu-io/open-design10.3만2026년 10월 21일 업데이트

ai-music-album

무료요약 있음AI 평가 80점

AI 음악 앨범의 콘셉트 구상부터 가사 초안, 곡 순서 검토, 내보내기까지 다룹니다. 독립 제작 실험과 브랜드 음악 기획에 활용합니다.

  • 독립 제작 앨범 기획
  • 앨범 주제에 맞는 가사 초안 작성
  • 수록곡 순서 검토
nexu-io/open-design10.3만2026년 10월 21일 업데이트

algorithmic-art

무료요약 있음AI 평가 80점

p5.js에서 계산 규칙과 난수로 생성 예술을 만듭니다. 난수의 초깃값을 고정해 같은 그림을 재현하며, 포스터와 동적인 느낌의 정지 이미지, 구도 시안 제작에 활용합니다.

  • 규칙을 바탕으로 포스터를 제작합니다
  • 움직임이 느껴지는 정지 이미지를 만듭니다
  • 예술 작품의 구도를 시험합니다
nexu-io/open-design10.3만2026년 10월 21일 업데이트

nexu-io의 스킬 모두 보기

이 스킬의 문제 신고