🩵Retro Palace🩵

Retro Palace is a retro-inspired 88×31 button maker for creating, animating, and exporting classic web buttons.

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

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

npm install

Run Locally

npm run dev

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

Usage

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

Screenshots

The repository includes example UI previews:

Light Theme

Dark Theme

License

This project is licensed under the MIT License. See LICENSE for details.

Credits

Ashish Kumar

FilesExpand file tree

README.md

Latest commit

History