vnve

vnve

🎬 VNVE (Visual Novel Video Editor) Make visual novel videos in browser 在浏览器中快速制作视觉小说视频,利用AI一键生成!

Stars: 126

Visit
 screenshot

VNVE is a Visual Novel Video Editor that allows users to create visual novel videos in their browser with AI-powered rapid creation. It offers a low-cost production solution for converting textual content into videos, creating interactive videos for gaming experiences, and making video teasers for novels and short video dramas. The tool is a pure front-end Typescript implementation powered by PixiJS + WebCodecs, and users can also create videos programmatically using the npm package. VNVE is tailored specifically for visual novels, focusing on text content and simplifying the video creation process for users.

README:

English | 简体中文

V N V E

Visual Novel Video Editor

Make Visual Novel Videos in Your Browser 🔗

discord chat downloads commit static

Features

  • 🔥 AI-powered rapid creation, enabling the generation of visual novel videos with just one click through the integration of APIs such as DeepSeek and OpenAI. 🆕
  • 🎬 An online video editor customized for creating visual novels, open your browser and start creating!
  • 👋 Say goodbye to complicated video editing software and create visual novel videos easily and quickly!
  • 📝 Text First, Let's Return to the Core of Visual Novel Creation — Text Content.
  • 🚀 Pure front-end Typescript implementation, Powered by PixiJS + WebCodecs.
  • 🖍️ You can also create videos programmatically by using the npm package

👻 Positioning is just a video creation tool tailored for visual novels, if you want to create branching logic, numerical values and other more game-like behavior, you can go to use bilibili interactive video

Created with VNVE

Video title scene

Character dialog scenes

Purpose

  • 🪄 Low-cost production of visual novel videos, quickly converting textual content into video.
  • 🧩 With interactive videos on Bilibili, it is possible to achieve a gaming experience similar to that of a GalGame.
  • 🎬 Creating video teasers for novels, short video dramas.
  • ...

Online Usage

visit: vnve.net, start creating video immediately.

Demo

https://github.com/user-attachments/assets/bcf3802d-3d64-40e7-ab89-173e42c339cb

Code Usage

You can also create videos directly by calling the npm package

Install

npm install @vnve/core

Usage

import { Creator, Scene, Img, Text, Sound, PREST_ANIMATION } from "@vnve/core";

// Init creator
const creator = new Creator();

// Scene, the video is made up of a combination of scenes
const scene = new Scene({ duration: 3000 })

// Create some elements
const img = new Img({ source: "img url" })
const text = new Text("V N V E", {
  fill: "#ffffff",
  fontSize: 200
})
const sound = new Sound({ source: "sound url" })

// Add elements to the scene
scene.addChild(img)
scene.addChild(text)

// Add sound
scene.addSound(sound)

// You can add some animation to the element
text.addAnimation(PREST_ANIMATION.FadeIn)

// Provide the scene to the creator and start generating the video
creator.add(scene)
creator.start().then(videoBlob => {
  URL.createObjectURL(videoBlob) // Wait a few moments and you'll get an mp4 file
})

Open in CodeSandbox

Template

By using pre-packaged templates, we can achieve the desired video effects more efficiently.

It is necessary to install an additional package @vnve/template

npm install @vnve/template

Template Usage

import { Creator } from "@vnve/core";
import { TitleScene, DialogueScene } from "@vnve/template";

const creator = new Creator();
// Create a title scene
const titleScene = new TitleScene({
  title: "V N V E",
  subtitle: "Make video programmatically",
  backgroundImgSource: "img url",
  soundSources: [{ source: "sound url" }],
  duration: 3000,
})

// Create a dialog scene
const dialogueScene = new DialogueScene({
  lines: [
    {
      name: "Character A",
      content: "Charater A says..."
    },
    {
      name: "Character B",
      content: "Charater B says..."
    }
  ],
  backgroundImgSource: "img url",
  soundSources: [{ source: "sound url" }],
});

// Add scenes
creator.add(titleScene)
creator.add(dialogueScene)

// Start creating videos
creator.start().then(videoBlob => {
  URL.createObjectURL(videoBlob)  // Wait a few moments and you'll get an mp4 file
})

Open in CodeSandbox

Core Packages

package name brief docs
@vnve/editor Web UI page for the online editor 🚧
@vnve/core Core module, using PixiJS + Webcodes to achieve scene dynamization and export Mp4 video 🚧
@vnve/template Template package, consisting of scenarios and elements for scenario reuse 🚧

License

MIT

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for vnve

Similar Open Source Tools

For similar tasks

For similar jobs