retro-palace - GitLite

KO | EN

gitlite — search

#nextjs #gemini #ruby #ai #reactjs #windows #machine-learning #framework #nlp #typescript

retro-palace

(★ 12)

A retro-inspired 88×31 button maker built with Next.js that lets you design, animate, and export classic web buttons with an intuitive layer-based editor.

File Explorer

ZIP Download

- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
- dark.png
- light.png
- - layout.js
  - manifest.js
  - opengraph-image.js
  - sitemap.js
- - index.js
- - constants.js
- - useEditorState.js
  - useExport.js
  - useInteractions.js
- - globals.css
- - index.js
.gitattributes
.gitignore
banner.png
eslint.config.mjs
example.gif
jsconfig.json
LICENSE
next.config.mjs
package-lock.json
package.json
postcss.config.mjs
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="banner.png" alt="Retro Palace Banner" width="100%">
</p>

<h1 align="center">🩵Retro Palace🩵</h1>

<p align="center">
Retro Palace is a retro-inspired 88×31 button maker for creating, animating, and exporting classic web buttons.
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Next.js-15-black?logo=next.js" alt="Next.js 15">
  <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react&logoColor=black" alt="React 19">
  <img src="https://img.shields.io/badge/Styling-Tailwind%20CSS-38B2AC?logo=tailwindcss&logoColor=white" alt="Tailwind CSS">
  <img src="https://img.shields.io/badge/Animation-Framer%20Motion-0055FF" alt="Framer Motion">
  <img src="https://img.shields.io/badge/License-MIT-yellow" alt="MIT License">
</p>

<p align="center">
  <a href="#overview">Overview</a> |
  <a href="#features">Features</a> |
  <a href="#tech-stack">Tech Stack</a> |
  <a href="#project-structure">Structure</a> |
  <a href="#getting-started">Getting Started</a> |
  <a href="#usage">Usage</a> |
  <a href="#screenshots">Screenshots</a> |
  <a href="#deployment-notes">Deployment Notes</a>
</p>

## Overview
Retro Palace is a browser-based 88×31 button maker inspired by the charm of classic pixel art and the early web. Create retro buttons using text, images, shapes, and freehand drawings, arrange layers, animate them frame by frame, preview the result, and export everything as a GIF. With light and dark themes, autosave, and a polished interface, it's a cozy little space for creating nostalgic web graphics.

## Features
* Editable text with font customization.
* Import local images or images from URLs.
* Shape layers with fill and stroke controls.
* Freehand drawing on the canvas.
* Move, resize, rotate, duplicate, delete, reorder, and snap layers to a grid.
* Frame-by-frame animation timeline with onion-skin preview.
* Adjustable frame delays and playback controls.
* Export animations as GIFs.
* Adjustable canvas size, export resolution, and zoom.
* Layer panel for organizing and editing content.
* Autosave to local storage.
* Responsive interface with light and dark themes.

## Tech Stack

| Layer | Technologies |
| --- | --- |
| Framework | Next.js 15 |
| UI | React 19 |
| Styling | Tailwind CSS 4 |
| Animation | Framer Motion |
| Theme Management | `next-themes` |
| Export / Capture | `html2canvas` |
| Icons | `lucide-react` |

## Project Structure

```bash
retro-palace/
├── README.md
├── LICENSE
├── banner.png
├── example.gif
├── screenshots/
│   ├── dark/
│   │   └── main.png
│   └── light/
│       └── main.png
├── public/
│   ├── favicon.ico
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   └── site.webmanifest
└── src/
    ├── app/
    │   ├── layout.js
    │   ├── manifest.js
    │   ├── opengraph-image.js
    │   ├── sitemap.js
    │   └── (main)/
    │       ├── page.js
    │       ├── error.js
    │       ├── global-error.js
    │       └── not-found.js
    ├── components/
    │   ├── home/
    │   └── error/
    └── styles/
        └── globals.css
```

## Getting Started

### Prerequisites

- Node.js 18 or newer
- npm

### Install Dependencies

```bash
npm install
```

### Run Locally

```bash
npm run dev
```

Open the app at `http://localhost:3000`.

## Usage

1. Open the editor in your browser.
2. Add text, images, or shapes to the stage.
3. Tweak colors, borders, size, and positioning.
4. Draw over the design if you want a hand-made feel.
5. Capture frames and adjust their timing.
6. Preview the animation.
7. Export the final result as a GIF.

## Screenshots

The repository includes example UI previews:

<table>
  <tr>
    <td align="center">
      <strong>Light Theme</strong><br><br>
      <img src="screenshots/light.png" width="420" alt="Retro Palace light theme screenshot">
    </td>
    <td align="center">
      <strong>Dark Theme</strong><br><br>
      <img src="screenshots/dark.png" width="420" alt="Retro Palace dark theme screenshot">
    </td>
  </tr>
</table>

## License

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

## Credits

Ashish Kumar