retro-palace - GitLite

KO | EN

gitlite — search

#svg #windows #privacy #pdf #android #terminal #animation #openai #anthropic #hacktoberfest

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.

파일 탐색기

ZIP 다운로드

- 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

# CDN으로 사용하기

jsDelivr

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

버전

파일

링크

예시

// 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