Product Hunt

Framefields — Open-source code-first video for AGI era

Framefields — AI 에이전트를 위한 코드 중심 영상 엔진

Framefields는 Node.js에서 네이티브 WebGPU로 작동하는 오픈소스 영상 엔진입니다. TypeScript로 모션 그래픽, 합성 효과, 3D 장면과 오디오 처리를 구성하고 브라우저 없이 프레임 단위로 렌더링해 MP4를 출력합니다.

에디터 노트

Framefields의 역할은 영상 분석이 아니라 분석 결과를 코드로 편집하고 렌더링하는 데 있습니다. 화면 녹화본에서 설명 영상을 만드는 작업도 음성 인식과 장면 선택을 외부 모델에 맡긴 뒤 Framefields로 합성하는 흐름이라고 제작사가 설명합니다. 따라서 단독 영상 편집기보다 에이전트가 사용할 렌더링 도구라는 설명이 정확합니다. 댓글은 실제 화면 녹화와 스튜디오 촬영 영상에 쓸 수 있는지, 프레임 그리드에서 작은 글자를 읽을 수 있는지를 묻습니다. 제작사는 외부 분석 모델과 개별 프레임 검사를 답으로 제시하지만, 대화만으로는 편집 품질이나 작업 흐름의 안정성을 확인하기 어렵습니다. 빠른 렌더링과 낮은 토큰 사용량도 제작사의 주장으로 제시됐으며 비교 수치는 없습니다.

AI 요약

Framefields는 AI 에이전트와 엔지니어를 위한 코드 중심 영상 제작 엔진입니다. Node.js에서 네이티브 WebGPU를 사용하며 Chromium이나 브라우저를 실행하지 않고 영상을 렌더링합니다. 제작사는 결정론적이고 프레임 단위로 정확한 렌더링과 하드웨어 가속 MP4 출력을 내세웁니다.

TypeScript로 구성하는 영상 제작

하나의 npm 패키지에서 모션 그래픽과 타이포그래피, 2D 합성 및 시각 효과, 3D 장면, 오디오 DSP를 다룹니다. 예시로 키네틱 텍스트, SVG 경로, Yoga 레이아웃 트리, 스프링과 베지어 곡선, 필름 그레인과 LUT, 3D 리라이팅, 이퀄라이저와 마스터 압축을 제시합니다. WebGPU 구현에는 Dawn, Metal, Vulkan을 언급합니다.

에이전트의 역할과 범위

Framefields는 영상을 분석하는 도구가 아니라 분석 결과를 바탕으로 편집하고 합성하는 렌더링 엔진입니다. 제작사 답변에 따르면 기존 화면 녹화본을 설명 영상으로 만들 때 음성 인식과 관련 프레임 분석은 외부 모델이 맡고, 에이전트가 Framefields로 새 구성을 만듭니다. 전통적인 영상 편집에서도 전환 효과, 그래픽, 자막을 더하는 용도로 쓸 수 있다고 설명합니다. 에이전트는 프레임 그리드를 확인하고 작은 글자가 읽히지 않으면 해당 프레임을 단독 이미지로 다시 생성해 검사할 수 있습니다.

Product Hunt 반응

  • @okanasl — 현재 프로그래밍 방식 영상 도구는 헤드리스 Chromium, Puppeteer, 캔버스 편법에 의존하는 경우가 많아 무겁고 프레임 손실이 생기며 자율 AI 에이전트가 안정적으로 다루기 어렵습니다. Framefields는 브라우저 오버헤드 없이 Node.js에서 네이티브 WebGPU로 작동하는 엔진을 만들었습니다. 에이전트나 스크립트가 TypeScript 코드를 작성하고 프레임을 검사한 뒤 영상을 출력합니다.
  • @simon_moxon — 제품 사용 안내 영상을 제작하는 입장에서 에이전트가 안정적으로 다룰 수 있는 영상 엔진을 살펴보고 싶습니다. 실제 화면 녹화본을 완성된 설명 영상으로 편집하는 기능을 지금 쓸 수 있나요?
    • @okanasl — 사용 모델이 해당 작업을 할 수 있어야 합니다. Framefields는 에이전트용 도구이며 렌더링 속도와 영상 제작 기능을 제공합니다. 음성 인식은 Whisper 같은 외부 모델을 사용하고, 에이전트가 원본 영상의 관련 프레임을 확인해 새로 구성해야 합니다.
  • @justdan — 스튜디오에서 촬영한 인터뷰나 팟캐스트 같은 전통적인 영상 편집에도 도움이 되나요? 그래픽을 추가하는 기능도 궁금합니다.
    • @okanasl — Framefields는 렌더링과 합성 엔진이며 영상 분석은 제공하지 않습니다. 분석은 Claude가 수행하고 Framefields는 애니메이션 전환, 블렌딩, 모션 그래픽, 자막을 편집 결과에 더합니다. 빠른 렌더링으로 에이전트 작업의 피드백 반복을 늘리고 토큰 사용을 줄인다고 설명합니다.
  • @joertemple — 프레임 그리드 검사는 여러 프레임을 한 이미지에 넣어 에이전트가 확인하는 방식인가요? 작은 글자가 읽히지 않을 정도로 프레임이 많아지는 기준은 무엇인가요? 모션 그래픽을 확인할 때 Claude가 작은 글자를 추측하는 경우가 있습니다.
    • @okanasl — 그리드 모양과 프레임 수는 에이전트가 정합니다. 읽기 어려운 글자가 있는 프레임은 단일 이미지로 다시 생성해 확인할 수 있습니다.
  • @sohan_patil — 게시한 영상도 Framefields로 만들었나요?
    • @okanasl — 그렇습니다. GitHub 저장소에 있는 예시 영상 네 편도 Framefields로 편집하고 합성했습니다. 제작 코드도 관련 폴더에서 확인할 수 있습니다.

원문: Product Hunt / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗