vox-cell - GitLite

KO | EN

gitlite — search

#proxy #csharp #ruby #generative-ai #cpp #postgresql #php #html #security #artificial-intelligence

vox-cell

(★ 9)

A cute, modern browser-based pixel art studio with layers, colorful palettes, fun drawing tools, filters, and seamless exports built with Next.js and React.

파일 탐색기

ZIP 다운로드

- video.mp4
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
- - 1.png
  - 2.png
  - 3.png
- - 1.png
  - 2.png
  - 3.png
- - layout.js
  - manifest.js
  - opengraph-image.js
  - sitemap.js
- - index.js
- - constants.js
  - preloaded-images.json
- - imageToASCII.js
- - globals.css
- - index.js
.gitattributes
.gitignore
banner.png
eslint.config.mjs
jsconfig.json
LICENSE
next.config.mjs
package-lock.json
package.json
postcss.config.mjs
README.md

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="banner.png" alt="Vox Cell banner" width="100%">
</p>

<h1 align="center">🎨 Vox Cell</h1>
<p align="center">
  <strong>A modern browser-based pixel art editor built with Next.js, React, Canvas, layered editing, palettes, filters, and export tools.</strong>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Next.js-15.5.4-000000?logo=nextdotjs&logoColor=white" alt="Next.js">
  <img src="https://img.shields.io/badge/React-19.0.0-61DAFB?logo=react&logoColor=111111" alt="React">
  <img src="https://img.shields.io/badge/Canvas-Pixel%20Editor-10B981" alt="Canvas Pixel Editor">
  <img src="https://img.shields.io/badge/License-MIT-yellow" alt="MIT License">
</p>

## Overview

Vox Cell is a creative pixel-art workspace for drawing, editing, transforming, and exporting grid-based artwork in the browser. The home page introduces the project with animated preloaded pixel previews and dynamic theme-aware color transitions. The `/editor` route opens the full editor, where users can paint on a canvas, manage layers, choose palettes, resize and transform artwork, apply filters, import images, and export final assets.

The project is built with the Next.js App Router, React 19, Tailwind CSS, `next-themes`, Lucide icons, and browser Canvas APIs. It is primarily client-side, with artwork and editor preferences handled in React state and browser storage.

## Demo

The project includes a demo video:

```text
demo/video.mp4
```

## Screenshots

<table align="center">
  <tr>
    <th>Light Mode</th>
    <th>Dark Mode</th>
  </tr>
  <tr>
    <td><img src="screenshots/light/1.png" alt="Vox Cell light mode screenshot 1" width="100%"></td>
    <td><img src="screenshots/dark/1.png" alt="Vox Cell dark mode screenshot 1" width="100%"></td>
  </tr>
  <tr>
    <td><img src="screenshots/light/2.png" alt="Vox Cell light mode screenshot 2" width="100%"></td>
    <td><img src="screenshots/dark/2.png" alt="Vox Cell dark mode screenshot 2" width="100%"></td>
  </tr>
  <tr>
    <td><img src="screenshots/light/3.png" alt="Vox Cell light mode screenshot 3" width="100%"></td>
    <td><img src="screenshots/dark/3.png" alt="Vox Cell dark mode screenshot 3" width="100%"></td>
  </tr>
</table>

## Features

- Animated landing page with preloaded pixel-art previews.
- Light and dark theme support.
- Dedicated `/editor` pixel art workspace.
- Canvas-based pixel editor with adjustable zoom.
- Toggleable pixel grid.
- New project creation.
- Image import that maps uploaded images onto the current canvas size.
- Multiple drawing tools: pencil, eraser, bucket fill, eyedropper, selection, rectangle, circle, line, spray, and magic wand UI.
- Brush size controls.
- Eraser shape controls: square, circle, and diamond.
- Paint bucket tolerance and contiguous-fill settings.
- Shape options for filled or stroked shapes.
- Stroke width controls for shape tools.
- Spray density and spread controls.
- Symmetry drawing modes: vertical, horizontal, both, radial, mandala, and kaleidoscope.
- Configurable radial symmetry segment count.
- Layer system with add, duplicate, delete, reorder, visibility toggle, lock toggle, opacity, and blend modes.
- Primary and secondary color selection.
- Built-in palettes: classic, grayscale, pastel, neon, earth, retro, cyberpunk, and nature.
- Recent custom color tracking.
- History system with undo, redo, and jump-to-history support.
- Canvas presets from 16x16 icons up to 1024x1024 ultra canvases.
- Custom canvas resizing with anchor controls.
- Fine canvas size adjustment by 1 pixel or 10 pixels.
- Flip horizontal and vertical transformations.
- Rotate 90 degrees clockwise or counter-clockwise.
- Filter presets including vintage, modern, dramatic, noir, dreamy, retro, cyberpunk, and pastel.
- Manual filter controls for brightness, contrast, saturation, hue, and blur.
- Export image as PNG, JPEG, or WebP.
- Export scale, quality, transparency, and background color settings.
- Save project data as JSON.
- Auto-save-oriented local storage support for editor state and preferences.
- Status bar with canvas size, zoom, active tool, color, grid state, history count, and symmetry state.
- App manifest, favicon assets, sitemap, Open Graph image route, and custom error pages.

## Keyboard Shortcuts

| Shortcut | Tool or Action |
| --- | --- |
| `B` | Pencil |
| `E` | Eraser |
| `G` | Bucket fill |
| `I` | Eyedropper |
| `M` | Select |
| `R` | Rectangle |
| `C` | Circle |
| `L` | Line |
| `P` | Spray |
| `Space` | Move tool |
| `Ctrl+Z` | Undo |
| `Ctrl+Shift+Z` | Redo |
| `Ctrl+Y` | Redo |
| `Ctrl+C` | Copy selection |
| `Ctrl+V` | Paste selection |
| `Ctrl+A` | Select entire canvas |
| `Ctrl+S` | Export image |
| `Ctrl+H` | Toggle history panel |

## Tech Stack

| Area | Technology |
| --- | --- |
| Framework | Next.js 15 App Router |
| UI Library | React 19 |
| Styling | Tailwind CSS 4 |
| Theme Handling | next-themes |
| Icons | Lucide React |
| Drawing Surface | Browser Canvas API |
| Image Processing | Canvas pixel data |
| Date Utilities | date-fns |
| Server-side Canvas Dependency | canvas |
| State and Persistence | React state, refs, localStorage |

## Project Structure

```text
vox-cell/
├── README.md
├── package.json
├── banner.png
├── demo/
│   └── main.mp4
├── public/
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon.ico
│   └── site.webmanifest
├── screenshots/
│   ├── dark/
│   └── light/
└── src/
    ├── app/
    │   ├── (main)/
    │   ├── editor/
    │   ├── layout.js
    │   ├── manifest.js
    │   ├── opengraph-image.js
    │   └── sitemap.js
    ├── components/
    │   ├── editor/
    │   ├── error/
    │   └── home/
    ├── data/
    │   ├── constants.js
    │   └── preloaded-images.json
    ├── scripts/
    │   └── imageToASCII.js
    ├── styles/
    │   └── globals.css
    └── utils/
        └── index.js
```

## Getting Started

### Prerequisites

- Node.js 20 or newer
- npm

### Installation

```bash
git clone <repository-url>
cd vox-cell
npm install
```

### Development

```bash
npm run dev
```

Open `http://localhost:3000` in your browser.

### Production Build

```bash
npm run build
npm run start
```

### Linting

```bash
npm run lint
```

## Available Scripts

| Command | Description |
| --- | --- |
| `npm run dev` | Starts the Next.js development server with Turbopack. |
| `npm run build` | Creates a production build. |
| `npm run start` | Starts the production server. |
| `npm run lint` | Runs the configured Next.js lint command. |
| `npm run script` | Runs the image preloading script configured in `package.json`. |

## How To Use

1. Open the home page.
2. Click **Launch Editor** to enter the editor workspace.
3. Select a drawing tool from the left toolbar.
4. Choose colors from the color panel or palette presets.
5. Draw, erase, fill, select, transform, or resize the canvas.
6. Use layers for non-destructive composition.
7. Apply filter presets or manual adjustments when needed.
8. Export the image or save the project JSON from the export panel.

## Deployment

This app can be deployed to Vercel or any platform that supports Next.js.

For Vercel:

1. Push the project to a Git repository.
2. Import the repository in Vercel.
3. Keep the default Next.js build settings.
4. Deploy.

## License

This project is licensed under the MIT License. See [LICENSE](LICENSE) for details.

## Author

Ashish Kumar