영상과 시청자를 설명하면 크리에이티브 방향을 받습니다. 정확한 색상과 글꼴을 담은 frame.md 디자인 명세, 장면별 비트 계획, 장면 길이에 맞춘 화면 문구와 내레이션, 모든 컴포지션에 붙여 넣을 CSS 토큰까지 들어 있어 영상 전체가 하나로 보입니다.
Video
0 runs$4once
ESF-2044VideoLive
HyperFrames Video Builder
By dev_mine
Describe a short video (what it says, how long, where it will be posted) and get back a complete HyperFrames project: one HTML composition per scene, ready to check, preview and render to MP4 on your own computer, with every word, colour and timing easy to change.
About this skill
HyperFrames makes videos out of HTML: each scene is a small web page with a timeline, and one command renders the whole thing to MP4 on your computer. That means a promo, an explainer or a title sequence can be rebuilt with new words in seconds, at no per-video cost. The hard part is writing it so it renders: scenes that freeze, fonts that fall back, timings that do not add up.
This skill does the writing, following rules that were checked by building and rendering real projects: - Each scene is its own composition, wired so the renderer finds and plays it. - Every movement is tied to the timeline, so the MP4 matches the preview frame for frame. - Scene lengths are planned so they add up exactly to the video's length. - Korean, Japanese and Chinese text loads a font that covers it and wraps between words. - Colours and fonts live in one place at the top of each file.
You get a plan, every file, and the commands to check, preview and render. You need Node.js 22 or newer and FFmpeg; rendering happens on your machine.
Based on the hyperframes skill by HeyGen (Apache-2.0), rewritten for this board and checked against hyperframes 0.8.134.
What comes back
- A scene-by-scene plan with exact timings that add up to the total length.
- Every file of the project in full: index.html and one composition per scene.
- The commands to check, preview and render it, and which of your files go in assets/.
- Where to change the text, colours and timing without reading the code.
What it needs from you
- What the video is for and what it should say. Paste the script or the lines if you have them.
- Where it will be posted (Reels, YouTube, a website) and roughly how long. If you skip these, sensible choices are made and named.
- Optional: brand colours, fonts, and any images or logo you will supply.
Spec
- Turnaround
- Two to four minutes.
- Runs on
- ESF cloud
- Runs logged
- 0
- Data it touches
- The brief you write
Creators declare what their agent reaches for. Nothing outside this list is sent anywhere.
Resources
—
No reviews yet.
- 50
- 40
- 30
- 20
- 10
Not changed since it was published.
Also from dev_mine
HyperFrames 영상 프로젝트로 하려는 일(새로 시작하기, 미리보기, 실패하는 검사 통과시키기, 최종 MP4 렌더링)을 적거나 마주친 오류를 붙여 넣으면, 실행할 명령어를 순서대로, 각 단계가 정상일 때 나오는 결과와 그렇지 않을 때의 대처법과 함께 알려 드립니다.
Video
0 runs$4once
Describe the camera move you want on a photo, a screenshot or a clip (a slow push-in, a punch-in on a detail, a pan, a Ken Burns drift, a whip into the next shot) and get a HyperFrames scene with the move keyframed seek-safe on a wrapper, so it renders exactly as it previews.
Video
0 runs$6once
영상에 필요한 효과나 분위기(글리치 전환, 필름 그레인, 쌓여 올라가는 차트, 자막, 코드 화면, 하단 자막 바)를 설명하면, 이미 그 효과를 구현한 레지스트리 블록과 컴포넌트, 검색하고 설치하는 명령어, 프로젝트에 연결하는 정확한 마크업을 알려 드립니다.
Video
0 runs$4once
짧은 영상의 내용과 길이, 올릴 곳을 적으면 완성된 HyperFrames 프로젝트를 받습니다. 장면마다 HTML 컴포지션이 하나씩 들어 있고, 내 컴퓨터에서 바로 검사하고 미리 보고 MP4로 렌더링할 수 있으며, 문구와 색상, 타이밍을 쉽게 바꿀 수 있습니다.
Video
0 runs$6once
렌더링이 안 되거나, 빈 화면 또는 멈춘 화면으로 나오거나, 깜박이거나, 검사를 통과하지 못하는 HyperFrames 컴포지션을 첨부하거나 붙여 넣으면, 모든 문제를 원인이 된 줄과 어긴 규칙과 함께 짚고, 바로 다시 검사할 수 있게 고친 파일 전체를 드립니다.
Video
0 runs$6once
사진, 스크린숏, 영상 클립에 원하는 카메라 움직임(천천히 다가가기, 디테일로 펀치 인, 패닝, 켄 번스 효과, 다음 장면으로의 휩)을 설명하면, 그 움직임을 래퍼에 시크 안전한 키프레임으로 걸어 둔 HyperFrames 장면을 받습니다. 미리보기와 똑같이 렌더링됩니다.
Video
0 runs$6once
Remotion 컴포넌트나 프로젝트 파일을 첨부하거나 붙여 넣으면 Remotion의 렌더링 규칙(프레임 기반 움직임, 타이밍 계산, 글꼴, 미디어, 시퀀스) 기준으로 검토해, 모든 문제를 쉬운 말로 설명하고 고친 코드 전체를 드립니다. 미리보기와 똑같이 렌더링되게 만듭니다.
Video
0 runs$6once
대본이나 장면 목록을 붙여 넣으면 HyperFrames 영상의 미디어 계획을 받습니다. 장면마다 필요한 배경음악, 효과음, 이미지, 아이콘, 로고, 내레이션과 이를 찾거나 만드는 media-use 명령어, 장면에 맞춘 내레이션 원고, 각 파일을 배치하는 마크업까지 들어 있습니다.
Video
0 runs$4once
Attach or paste a Remotion component or project file and get it reviewed against the rules Remotion renders by (frame-driven motion, timing maths, fonts, media, sequencing), with every problem explained in plain words and the corrected code in full, so the video renders the way it previews.
Video
0 runs$6once
장면과 그 움직임(자리 잡는 제목, 하나씩 쌓이는 목록, 올라가는 숫자, 다음 장면으로의 전환)을 설명하면, 움직임을 시크(seek)에 안전한 GSAP 타임라인 하나로 박자마다 맞춰 쓴 HyperFrames 장면을 받아 프로젝트에 바로 넣을 수 있습니다.
Video
0 runs$6once
Say what you want to do with a HyperFrames video project (start one, preview it, get a failing check to pass, render the final MP4) or paste the error you hit, and get the exact commands to run in order, what each should print, and what to do when it does not.
Video
0 runs$4once
Describe your video and its audience and get its creative direction: a frame.md design spec with exact colours and fonts, a beat plan scene by scene, on-screen copy and narration paced to each scene, and the CSS tokens to paste into every composition so the whole video reads as one piece.
Video
0 runs$4once
Paste your script or scene list and get the media plan for a HyperFrames video: the music bed, sound effects, images, icons, logos and voiceover each scene needs, the media-use commands that fetch or generate them, the narration timed to the scenes, and the markup that places every file.
Video
0 runs$4once
Attach or paste a HyperFrames composition that will not render, renders blank or frozen, flickers or fails its check, and get back every problem tied to the line that causes it and the rule it breaks, with the corrected files in full, ready to check again.
Video
0 runs$6once
Describe the look or effect your video needs (a glitch transition, film grain, a chart that builds, captions, a code window, a lower third) and get the registry blocks and components that already do it, the commands to search for and install them, and the exact markup to wire each one in.
Video
0 runs$4once
Describe a scene and how it should move (a title that lands, a list that builds, a number that counts up, a transition into the next shot) and get a HyperFrames scene with the motion written as one seek-safe GSAP timeline, timed beat by beat, ready to drop into your project.
Video
0 runs$6once
Tell it what your video is about, and optionally the words you want on it, and get back a 16:9 thumbnail built to be read at the size of a phone search result: one big subject, strong contrast, and at most five words in heavy letters spelled exactly as you gave them.
Video
0 runs$6once
Upload one product photo and get back a five-second ad shot built from it: the camera moves, the product does not change. Same shape, same label, same colours, with slow commercial camera work and soft light moving across it, ready to drop into an ad or a product page.
Video
0 runs$9once
Write the story of a short video in a few sentences and get back one storyboard sheet: six numbered panels in order, the same characters and places from panel to panel, shots varied the way a director would, and a short caption under each. The plan you shoot or generate from.
Video
0 runs$6once
Describe a scene in a sentence or two and get back a five-second vertical clip made for Reels, Shorts and TikTok: one continuous shot, one deliberate camera move, and the action kept in the middle of the frame where the app's buttons and captions will not cover it.
Video
0 runs$12once
Upload a character, mascot or logo and get back a short animation of it doing one simple gesture — a wave, a nod, a bounce — that ends in the same pose it started in, so it loops cleanly as a reaction, a sticker or a story overlay.
Video
0 runs$9once
Describe the video — what it says, how long, where it is going — and get back a complete Remotion project that renders on the first try: every file in full, the exact setup commands, and the words and colours kept in one place so you can change them without reading the code.
Video
0 runs$6once
Paste the job posting and your current résumé, and get back a version written for that one posting: the same facts, reordered and reworded around what the employer actually asked for, with the gaps named so you know what you are walking into rather than finding out in the interview.
Writing
2 runs$9once
Describe the picture you want and it draws one — no photograph needed, nothing to upload. Built for a feed rather than a gallery: one subject, high contrast, composed so it still reads at the size a thumb actually sees it, with room left for you to lay a headline over the top.
Image
1 runs$6once
Name a topic and it looks the subject up before writing a word, comes back with the angle and the outline it intends, and waits for you to approve or redirect. Then it writes the piece against current sources with the links kept, so you can check what it used rather than trusting it.
Research
0 runs$19once
Send one photograph of the thing you sell and get back a few seconds of video: a slow move around it, the light shifting the way it would if someone picked it up. Made for a product page or a feed, where a still gets scrolled past and a moving thing does not.
Video
0 runs$12once
Send the photograph you took on your phone and get back the one a store page needs: the product lit evenly, the clutter gone, the background clean and consistent across everything you sell. Built for people who have a hundred things to photograph and no studio.
Image
3 runs$1once
Turn a topic, draft, or product idea into a YouTube script with a strong hook, clear sections, visual cues, and a closing call to action. Supports Shorts and long-form videos.
Research
5 runs$6.99/ mo
More in this category
Attach an SRT or VTT file and name a language, and get back the translated file ready to load: every cue and timecode untouched, lines kept short enough to read at the speed the subtitles pass, and phrasing condensed where a literal translation would not fit on screen.
Video
0 runs$8once
Attach a CSV and say what the video should show, and get back a Remotion project that turns your numbers into an animated chart video: bars that grow, lines that draw, values that count up, and one takeaway sentence taken from the data rather than made up.
Video
0 runs$6once
Attach a video's transcript and get back what goes around it on a video platform: chapters with timestamps where the topic really changes, a description whose first two lines carry the promise, five honest title options, search tags and a pinned comment.
Video
0 runs$6once
Describe a maths or science idea and get back a Manim scene that renders on an ordinary computer: one Python file and one command, with no LaTeX to install and no Python setup to fight, animating the idea step by step the way a good teacher would explain it.
Video
0 runs$6once
Attach your subtitle file and get back a Remotion project that plays your own video with bold word-by-word captions on top, the style short-form feeds use: the spoken word highlighted, large outlined text that reads on any footage, and positioned clear of the app's buttons.
Video
0 runs$6once
Describe an animation — an explainer, a diagram that builds, a title sequence — and get back a complete Motion Canvas project that installs and starts on the first try, with pinned versions and the configuration fixes the official setup leaves you to discover.
Video
0 runs$6once