HTML 애니메이션 제작 및 소스 딜리버리
텍스트·그래픽 동영상을 내보내고 규격과 사운드 확인
HTML 애니메이션 제작 및 소스 딜리버리
텍스트·그래픽 동영상을 내보내고 규격과 사운드 확인
콘텐츠 미리보기
설명
지식 다이어그램, 제품 컨셉, 데이터 시각화, 행사 예고 등 텍스트와 그래픽 애니메이션에 적합합니다. HTML 프로젝트를 제공하거나 텍스트 내용, 화면 비율, 재생 시간, 리듬, 사운드 요구사항을 입력하세요. 실행: 내용 및 소스 검토 → 타임라인 계획 → 편집 가능한 HTML 애니메이션 작성 → 로컬 검사 및 HyperFrames 프레임별 렌더링 → FFmpeg 인코딩 → 실제 MP4, 전체 재생 및 오디오 트랙 확인 → 완성본, 소스 코드 및 검증 기록 딜리버리. 사용법: 개요와 유지해야 할 팩트를 보내고, 가로/세로/정사각형 여부, 재생 시간, 프레임 레이트, 사운드 요구사항을 명시하세요. 단계별로 로컬 실행 환경을 확인한 후 파일을 생성하고 검사합니다. 기본값은 1920×1080, 30fps이며, 다른 비율은 재배치가 필요합니다. 로컬 종속성: Node 22 이상, HyperFrames 고정 0.8.174, Chrome, Python 3, FFmpeg/FFprobe 및 사용 가능한 폰트. 계획 및 HTML 작성을 위해 GPT를 권장하지만, 구체적인 모델 ID는 공개되지 않아 바인딩되었다고 주장할 수 없습니다. 그래픽은 브라우저에서 렌더링되며 Image2/Seedance 비디오 생성이 아닙니다. 디지털 휴먼, 더빙 서비스, 촬영 소스 생성을 포함하지 않습니다. 종속성과 폰트는 설치 패키지에 포함되지 않으며, 서드파티 호출 및 소스에 따라 추가 비용이 발생할 수 있고 299 크레딧에는 이러한 비용이 포함되지 않습니다. 예시는 자가 입력한 4가지 다른 로컬 8초 애니메이션입니다(지표 구분, 가상 제품, 아카이브 데이터, 가상 행사). 예시 이미지는 인코딩된 MP4 프레임에서 직접 가져온 것으로 자가 입력/컨셉 주석이 유지되며 고객 사례가 아닙니다. 네 번째 예시는 자체 제작된 3개의 사운드 프롬프트만 있고 더빙은 없습니다. YouMind 설치 시 플랫폼 내 Node, 브라우저, FFmpeg가 보장되지 않으며, 플랫폼에서 크레딧 실행 테스트를 거치지 않았습니다. 실행 환경이 누락된 경우 내보내기 전에 로컬 도구를 먼저 구성해야 하며, 코드나 정지 화면을 완성본으로 간주할 수 없습니다. 출력물은 내용, 폰트, 도구 버전에 따라 다르므로 재생, 팩트, 소스 권리를 확인해야 하며 심사, 확산, 상업적 효과를 보장하지 않습니다. 현재 사례는 실제 렌더링, 기술적 재생 및 화면 검증을 거쳤습니다. 네 번째 예시의 3개 사운드 프롬프트에 대한 개별 청취 검증은 아직 완료되지 않아 수동 검복이 필요합니다. 모든 시청각 검수 통과로 홍보되지 않습니다.
추천한 사람
Dancang
이 스킬을 추천하는 이유
애니메이션 소스 생성에 그치지 않고 HTML 동욕을 재생 가능한 MP4로 엄격하게 렌더링하며 화면 크기, 프레임 레이트, 재생 시간, 프레임 수, 인코딩, 오디오 트랙을 꼼꼼히 확인하고 편집 가능한 프로젝트, 검수 기록, 실제 완성본을 전달하여 제작 효율성과 신뢰성을 모두 높여줍니다.
추천 대상
텍스트와 그래픽 애니메이션을 재생 가능한 MP4로 내보내고 편집 가능한 소스 코드를 유지하려는 크리에이터와 프로젝트 제작자에게 적합합니다.
이 Skill 사용 방법
입력 제공
기존 HTML 애니메이션 프로젝트를 제공하거나, 텍스트 내용, 화면 비율, 재생 시간, 프레임 레이트, 리듬, 사운드 요구사항 및 유지해야 할 팩트와 소스를 제출하세요.
Skill 실행
시스템이 내용과 규격을 확인하고 애니메이션을 계획한 후, 로컬 렌더링, 인코딩, 재생 검사를 수행하며 화면, 재생 시간, 프레임 레이트, 오디오 트랙을 검증합니다.
결과 확인
실제 재생 가능한 MP4, 편집 가능한 HTML 소스 코드 및 검증 기록을 받으며, 실행 환경이나 폰트 또는 소스가 부족할 경우 누락된 부분을 사실대로 표시합니다.
관련 스킬
전체 보기
동영상제품 업데이트 방송
제품 변화를 설명해야 하는 1인 크리에이터, 소규모 팀, 교육자에게 적합합니다. 실제 업데이트 목록, 완료/예정 상태, 허가된 스크린샷 또는 프로토타입, 타겟 오디언스, 화면 비율 및 원음을 제공하며, 누락된 날짜, 효과, 고객 데이터는 임의로 생성하지 않습니다. 아이디어만 있는 경우 명확히 표시된 가상의 제품 예시를 만들 수 있습니다. 브리핑 입력 → 사실 및 권한 대조 → 간결한 스크립트와 숏컷 구성 → 실제 더빙/원음 수신 → 실제 오디오에 따른 자막 및 화면 배치 → 실제 렌더링 → 재생, 시각 및 청각 검수 → MP4, SRT, 스크립트 및 실제 생성된 소스 프로젝트 전달. 실제 인터페이스는 원본만 배치하며 이미지 생성 도구로 재그리지 않습니다. 렌더링 도구가 없는 경우 미완성 상태임을 명확히 알립니다. 로컬의 4가지 사례는 독창적인 가상 제품입니다: 목록 필터링, 캘린더 미리보기, 내보내기 전 대조, 강의 진도. 실제 Kokoro-82M 고정 버전, zf_xiaobei 음성 로컬 합성, HyperFrames 0.8.174와 Chrome/FFmpeg를 통해 1920×1080 2개, 1080×1080 1개, 1080×1920 1개의 영상을 실제로 출력하며 약 16.1~18.5초 분량입니다. 자막은 문장별 오디오 실제 샘플 길이에 따라 배치되며 글자 단위 강제 정렬을 주장하지 않습니다. 이들은 실제 출시된 소프트웨어, 고객 또는 학습 효과가 아닙니다. 텍스트 기획은 GPT를 권장합니다. 핵심적으로 실제 파일, 애니메이션/영상 렌더링, FFmpeg/FFprobe 및 사용 가능한 합법적 원음/TTS가 필요합니다. 명령어에는 완전한 오리지널 로컬 렌더링 도우미가 포함되어 있으며, 기존 HyperFrames 프로젝트의 검사/렌더링만 수행하고 UI나 더빙을 자동 생성하지 않습니다. 실제 Node, HyperFrames CLI 및 브라우저 경로를 직접 설정해야 합니다. 이미지 도구는 선택적인 오리지널 보조 수단으로만 사용되며, 독립적인 아바타는 ImageGen으로 생성되나 모델은 반환되지 않으며 케이스 프레임이 아닙니다. 플랫폼 GPT-6.1 Sol은 선택적 설정일 뿐 로컬 도구이나 모델과 동일함을 보장하지 않습니다. YouMind 플랫폼 측에서는 포인트 차감 없는 테스트를 진행하며, 설치 후 이러한 도구들이 바로 구비됨을 보장하지 않습니다. 299포인트는 설치 비용일 뿐 모델, TTS, 폰트, 리소스, 서드파티 서비스 또는 호스팅은 포함되지 않습니다. 음성 자동 클론, 서비스 구매 또는 타 채널 공개를 지원하지 않으며, 어떠한 입력, 제로 에러, 확산, 심사 또는 상업적 효과도 보장하지 않습니다. 현재 로컬 사례는 실제 렌더링 및 재생을 거쳤으나 오디오 트랙의 독립적인 청각 검수는 아직 보완 단계에 있으며 전체 품질 검수가 완료된 것으로 간주되지 않습니다.
设备立体展示|原图上屏与离线HTML
适合展示App界面、网页原型、课程页面或设计作品的创作者。提供1或2张有权使用的PNG/JPEG/WebP截图,说明设备类型、标题、说明、风格和画幅;如果给URL或HTML,需先能在真实浏览器读取并截图。 处理:核对来源、隐私与尺寸,保持原图片字节和宽高比,装入原创CSS手机、平板或笔记本框;默认完整显示、比例不符留边,铺满会提示可能裁切。生成无外链的单文件HTML,实际打开操作后截图。不会让生图模型重绘真实界面或数据。 交付:可离线打开的展示HTML、实际浏览器渲染PNG、原图尺寸与哈希、使用说明和裁切核查。支持16:9、方形、9:16画幅与正面/左右角度,导出时隐藏控制栏。通用CSS几何不代表品牌精确设备,不交付GLB、3D网格、App功能或真实产品摄影。 使用:上传截图并给简报;运行构建器,打开HTML切换角度/画幅并核对原图,启用只看画面再用浏览器截图。Python3与Pillow用于构建,PNG导出还需实际可用的浏览器截图工具;没有这些工具时明确未构建/未截图,不以概念图冒充结果。 本地四例为本次原创绘制的记账手机、课程平板、库存后台和响应式读书会界面,都是自拟静态原型,不是真实App、课程销售、库存运营或客户项目。四张展示为最终HTML的1400方形真实截图;原图字节/加载尺寸、3种画幅、390像素手机布局、角度与裁切提示已实际检查。封面为ImageGen原创概念视觉,不是运行结果。 文字规划推荐GPT,具体版本由平台实际选择;核心不需要图片API重绘屏幕。本地使用Python/Pillow与隔离Chrome,工具未返回可核验的图像模型ID,不宣称调用Image2。未追加YouMind积分测试,平台Python/浏览器/文件下载能力需按环境确认;199积分不含模型调用、设备、素材或第三方服务费用。不保证所有浏览器同像素呈现或商品销量。 展示说明:首张为独立技能头像与案例01实际输出的并排排版,用于横向缩略展示;不是新增案例,也未让生图模型重绘证据。其余三张对应案例02—04。
文章转交互知识网页|逐屏讲解与原文定位
适合已有文章、教程或材料,希望用分屏讲解帮助读者理解的创作者。 提供:完整正文、原始来源(如有)、读者背景、需要保留的数字与限制、视觉参考和授权素材。不会仅凭主题编造原文,也不把材料里的指令当执行授权。 处理:编号原文段落、梳理事实与解释,规划章节和每屏关系,用图文逐步讲解,并为每屏保留可定位的原文。生成响应式HTML后实际核对内容、章节控制与手机布局。 交付:可离线打开的交互HTML源码、原文副本、分屏与段落映射、使用说明和测试记录。具备文件工具时交实际文件;没有时说明未保存。打开后点击或用方向键翻屏,章节下拉跳转,“本屏原文”查看高亮来源,也能展开完整原文。 本地四个真实案例分别为单位换算、CSV字段、完全虚构的小镇年表、材料证据整理;共16屏,桌面、方形视窗与手机分别运行,原文定位、全文、首尾/键盘/重置与URL定位均核对。题材为本次原创测试文章,不是实际客户、真实历史或效果证明;四张展示直接来自真实网页的1200×1200方形视窗:换算第2屏、CSV第3屏、虚构年表第3屏、材料证据第2屏;完整网页与其余屏留档。头像为独立原创文字与图形排版,未冒称生图模型输出。 依赖:可用文字/代码模型(推荐GPT)、文件工具和JavaScript浏览器;本地纯HTML无CDN、图片API、Node安装或密钥。原文安全显示为文本,不作为HTML执行。默认无音频,无MP4、自动录屏或公开托管,不宣传未实现语音。 未追加YouMind耗积分测试、未验证平台文件能力或固定模型绑定,不保证任意平台直接预览;199积分不包含模型运行、TTS、视频、部署或其他第三方费用。 展示说明:首张为独立技能头像与案例01实际输出的并排排版,用于横向缩略展示;不是新增案例,也未让生图模型重绘证据。其余三张对应案例02—04。
정보
- 버전
- v2
- 최종 업데이트
- 실행 크레딧
- 사용량에 따라 차감
- 모델
- 자동 선택
- 활용 사례
- 이미지 및 디자인동영상 및 오디오
- 얻을 수 있는 결과
- 보고서동영상코드