A standalone React application designed for creating and downloading virtual background images enriched with customizable text elements.
A lightweight frontend app to generate and download virtual background image with text.
We recognized the need for a tool that allows teams to personalize their virtual backgrounds with ease, enhancing their professional image and brand identity.
If you've ever found yourself squinting at the screen during a video call, trying to match names to faces as your team grows, or wishing you could make it super easy for partners to spot your name and company, then this app's got your back.
And let's say your company is all about that unified look and drops official backgrounds to keep everyone's vibe on brand – you're going to love this.
We recommend using Node.js Version 18+ and pnpm
https://pnpm.io/installation
Build path: dist
Build Command
pnpm install && pnpm run build
In the repo folder
pnpm install
pnpm run dev
Dev server will be running at
http://localhost:5173/
You can deploy directly from your GitHub repository using GitHub Pages at Setting > Pages > Github Actions
menu.
Check our deployment workflow with GitHub Actions at .github/workflows/deploy.yml
We offer a Dockerfile to help you get started quickly. You can execute the Docker commands as follows. It will allow you to access via 8080 port.
docker build -t abc-virtual-background-maker .
docker run -d -p 8080:80 abc-virtual-background-maker
Modify app.config.json
file.
You can choose where to load background images from. Currently, we are supporting filesystem, CDN, and GitHub repo. Below json examples shows how to set backgroundsUri
value.
"backgroundsUri": {
"type": "filesystem",
"path": "./backgrounds"
}
"backgroundsUri": {
"type": "cdn",
"path": "https://your-cdn-host/backgrounds"
}
You can manage background images using a GitHub repository. Suppose that you created a repository with the following structure:
your-background-repo
├── backgrounds
│ ├── (app.config.json) // Optional. Without this configuration file, themes and background images are sorted alphabetically.
│ ├── your-theme-name
│ │ ├── 01.jpg
│ │ ├── 02.jpg
Rename .env.example
file to .env
(which will be ignored by Git), and set generated Personal Access Token value.
The app.config.json
should be as below;
"backgroundsUri": {
"type": "github",
"path": "https://{your-git-host}/api/v3/repos/{your-repo-owner}/{your-repo-name}/contents/backgrounds"
}
app.config.json
's themes
. (Value Type src/constants/theme.ts
)Theme |
default | |
---|---|---|
name | Theme name should be unique. | |
backgrounds | Array of images. (Detailed explanation about Image is below) |
|
inputFields (optional) | Set up an input field group just for this theme | |
isNew (optional) | If it's true, new icon shows up next to this theme | false |
isHidden (optional) | If it's true, this theme will be hidden | false |
rrr,ggg,bbb
between two dots, only if you need to set text color. (ex. 01.255,255,255.jpg)backgrounds/**/*
. (or any other directory and set backgroundsUri
as relative path.)pnpm run build
or pnpm run dev
output.config.json
's themes
's backgrounds
value will be changed automatically.backgroundsUri
in app.config.json
as base url.themes
's backgrounds
values as an object in app.config.json
.Image |
default | |
---|---|---|
src | contains the path to the image you want to embed | |
fontColor (optional) | Font color in this image | |
theme (optional) | Which theme does it belong to |
Modify default input fields: Change defaultInputFields
's value in app.config.json
(Value Type src/constants/input.ts
)
InputFieldGroup |
default | |
---|---|---|
position | InputFieldGroup position within the image divided by 3x3 sections. (row-column) | |
fields | InputField items | |
direction (optional) | Align InputField items in InputFieldGroup. (column : Items are stacked, row : Items are laid out in a line.) |
column |
offset (optional) | Adjusting detail position from origin point. (Detailed explanation is below) | {x: '0', y: '0'} |
InputField |
default | |
---|---|---|
label | Unique label of input (also used as placeholder text) | |
fontSize | Font size of input | |
fontStyle | Typography of input | |
offset | Adjusting detail position from origin point. (Detailed explanation is below) | |
isRequired (optional) | false |
|
text (optional) | Default value of input | "" |
tooltip (optional) | Allows you to add a description of the input. | "" |
Offset
You can locate textfield by adjusting offset
values. The value {"x":"0%", "y": "0%"}
starts from Top-Left corner as the origin point.
Below table shows reference values according to 1920x1080 or 1280x720 images. Use this table as a guide to approximate the placement of your textfield in pixels.
Pixels | 20% | 40% | 60% | 80% |
---|---|---|---|---|
1920 px | 384 | 768 | 1152 | 1536 |
1080 px | 216 | 432 | 648 | 864 |
1280 px | 256 | 512 | 768 | 1024 |
720 px | 144 | 288 | 432 | 576 |
Modify input fields for each theme: Add themes
's inputFields
's value in app.config.json
. (It will overwrites defaultInputFields
.)
To embed 19 Google web fonts (total 20 fonts!),
index.html
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Arvo:wght@700&family=Black+Ops+One&family=DM+Sans:opsz,[email protected],800&family=DM+Serif+Text&family=Dosis:wght@800&family=Exo:wght@800&family=Gasoek+One&family=Gloock&family=Hanuman:wght@900&family=Inter:wght@800&family=Kalnia:wght@600&family=Lobster&family=Noto+Serif:wght@800&family=Nunito:wght@900&family=Roboto:wght@900&family=Rubik+Bubbles&family=Ultra&family=Zilla+Slab:wght@700&display=swap"
rel="stylesheet"
/>
fonts
's styles
in app.config.json
"styles": [
"LINE Seed",
"Inter",
"Roboto",
"DM Sans",
"Exo",
"Noto Serif",
"Kalnia",
"DM Serif Text",
"Abril Fatface",
"Gloock",
"Zilla Slab",
"Hanuman",
"Dosis",
"Alfa Slab One",
"Arvo",
"Rubik Bubbles",
"Ultra",
"Lobster",
"Gasoek One",
"Black Ops One"
]
To embed local web fonts,
public
.@font-face
style in styles/_font.scss
.@font-face {
font-weight: 700;
font-family: "LINE Seed";
font-style: normal;
font-stretch: normal;
src: url("/LINESeedJP_OTF_Bd.woff2") format("woff2");
font-display: swap;
}
fonts
's styles
as that font-family name in app.config.json
Modify fonts
's sizes
value in app.config.json
To change the color of the UI elements such as toggles and buttons, you can add the keyColor
value in rrr,ggg,bbb
format in the app.config.json
file. It fosters a consistent design identity for your team.
You may want to override default values for specific theme. We support this feature by placing another app.config.json
file under backgrounds
directory.
In app.config.json
structure, themes
node can be overridden by app.config.json
file in backgroundsUri
path. It means, you maintain root app.config.json
for common values, and you can override values for specific theme by placing another app.config.json
under backgrounds
directory as below;
your-background-directory
├── backgrounds
│ ├── app.config.json
│ ├── office
│ │ ├── 01.jpg
│ │ ├── 02.jpg
With above structure, let say you want to override themes
node for office
theme. If you want to override defaultInputFields
for specific theme, you can add inputFields
value in app.config.json
under each theme
node as below.
{
"themes": [
{
"name": "office",
"inputFields": [
{
"position": "top-right",
"direction": "column",
"fields": [
{
"label": "name",
"fontSize": "Large",
"fontStyle": "LINE Seed",
"offset": {
"x": "0%",
"y": "0%"
},
"isRequired": true
}
]
},
{
"position": "bottom-left",
"fields": [
{
"label": "Team Name",
"fontSize": "Large",
"fontStyle": "LINE Seed",
"offset": {
"x": "0%",
"y": "0%"
},
"isRequired": true,
"text": "IT Support Team"
}
]
}
]
}
]
}