ivarvong/lantern

어떤 프로젝트인가요?

핵심 기능

• 01Scene과 단계 이름을 지정해 애니메이션의 각 단계에 바로 연결할 수 있습니다
• 02브라우저에서는 실제 DOM으로, Workers와 Node에서는 문자열로 SVG를 렌더링합니다
• 03설치된 폰트와 무관하게 포함된 글리프 윤곽선으로 텍스트를 렌더링합니다
• 04Mermaid 플로차트 파싱과 Scene용 JSON 문서 입력을 지원합니다
• 05SVG 및 프레임 내보내기와 함께 텍스트, 상태 추적, 인덱스 결과를 제공합니다
• 06JSON으로 표현된 Scene을 렌더링하는 Cloudflare Workers용 HTTP API를 제공합니다

활용 사례

• 공유 가능한 링크로 코드 변경 사항을 단계별로 검토자에게 설명하기
• Mermaid나 JSON에서 요청 흐름 또는 아키텍처의 애니메이션 다이어그램 생성하기
• 헤드리스 브라우저 없이 서버에서 설명 자료용 SVG 프레임 만들기
• AI 에이전트에 애니메이션 설명의 구조화된 텍스트와 상태 추적 정보 제공하기

빠른 시작

1. 1

   저장소를 클론합니다

   git clone https://github.com/ivarvong/lantern && cd lantern
2. 2

   종속성을 설치합니다

   npm install
3. 3

   개발 서버를 시작하고 데모 장면을 엽니다

   npm run dev

사용 전 알아둘 점

• !아직 npm에 공개되지 않았으므로 사용하려면 저장소를 클론해야 합니다.
• !도구와 테스트를 TypeScript로 직접 실행하려면 Node 24가 필요합니다.
• !현재 범위에 포함되지 않는 항목: 3D, 경로 불리언 연산, LaTeX, 매칭 모프.

포함된 컬렉션

토픽

자주 묻는 질문

lantern은(는) 무엇인가요?

브라우저, Cloudflare Workers 또는 Node에서 SVG로 렌더링하는 단계별 애니메이션 코드 설명 자료를 만들 수 있는 무의존성 TypeScript 라이브러리입니다. Lantern은 Python 애니메이션 엔진 manim의 핵심 모델을 JavaScript/TypeScript로 포팅한 라이브러리로, 코드 변경 사항을 시각적으로 설명하는 데 초점을 맞춥니다. Scene은 단계와 애니메이션을 선언하는 비동기 construct() 메서드를 가진 클래스입니다. 각 단계는 ?scene=&step= 같은 URL로 바로 접근할 수 있으며, 각 Scene은 텍스트 형식과 구조화된 상태 추적 정보도 생성할 수 있어 에이전트가 결과를 읽을 수 있습니다.

lantern은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

lantern은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

lantern은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. lantern의 마지막 커밋은 2026년 10월 27일입니다.

lantern은(는) 어디에 사용할 수 있나요?

공유 가능한 링크로 코드 변경 사항을 단계별로 검토자에게 설명하기 Mermaid나 JSON에서 요청 흐름 또는 아키텍처의 애니메이션 다이어그램 생성하기 헤드리스 브라우저 없이 서버에서 설명 자료용 SVG 프레임 만들기 AI 에이전트에 애니메이션 설명의 구조화된 텍스트와 상태 추적 정보 제공하기

lantern는 어떻게 설치하나요?

저장소를 클론합니다: git clone https://github.com/ivarvong/lantern && cd lantern 종속성을 설치합니다: npm install 개발 서버를 시작하고 데모 장면을 엽니다: npm run dev

lantern은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ivarvong/lantern