Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 43 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<div align="center">

# iLayerFrame
# LAYER FRAME

**Decompose any artwork into clean, on-chain-ready layers — right in the browser.**
**Decompose any artwork into clean, mint-ready layers — right in the browser.**

A single-file, zero-backend studio for turning a flat image into a structured, mint-ready
layer stack: colour separation that preserves brightness, glass and glow, a complete
background floor, an embedded iQR, an immutable description block, and a permanent local
library.
The image-layering studio of the **CLONE FRAME · iCLONE** toolkit. Turn one flat image into a
structured layer stack, then hand it off to **iIrys Frame** to seal on Irys and mint as an
**iNFT** in **CLONE FRAME**.

`LAYER FRAME` is the product · `ilayerframe` is this repo.

[![License: MIT](https://img.shields.io/badge/License-MIT-3ad07e.svg)](LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-5ba3d0.svg)](CONTRIBUTING.md)
[![No backend](https://img.shields.io/badge/backend-none%20·%20100%25%20client--side-8b93a0.svg)](#privacy--security)
[![No backend](https://img.shields.io/badge/backend-none%20·%20100%25%20client--side-8b93a0.svg)](#-privacy--security)
[![Made for builders](https://img.shields.io/badge/builders-welcome-e0b341.svg)](#-contributing)

</div>
Expand All @@ -20,30 +21,47 @@ library.

## What it is

iLayerFrame is part of the **CLONE FRAME · iCLONE** toolkit. It runs entirely in your
browser — **no server, no account, no data leaves your device** — and helps you turn one
image into a coherent set of layers that compose back into a richer, collection-grade NFT.
LAYER FRAME is the **open, free tool** where you build the layers of your NFT art. It runs
entirely in your browser — **no server, no account, no data leaves your device** — and ships
as a single HTML file (`index.html`). Open it and it works.

It is the first step of the CLONE FRAME open-tools pipeline: here you make the layers, then
you send them to **iIrys Frame** to attach the agent soul + metadata and seal them on Irys.

## Where it fits

```mermaid
flowchart LR
A["LAYER FRAME<br/>make the layers<br/>(this repo)"] -->|export| B["iIrys Frame<br/>soul + metadata · seal on Irys<br/>(coming soon)"]
B -->|tokenURI| C["CLONE FRAME<br/>mint the iNFT · Plaza"]
```

It is intentionally shipped as **one HTML file** (`index.html`). Open it and it works.
1. **LAYER FRAME (here)** — split an image into clean layers (background, traits, iQR,
description), compose the final art and export the stack.
2. **iIrys Frame** — attach the agent soul (`neural_soul.md`) + metadata and seal everything
permanently on **Irys** (produces the `tokenURI`). *(separate repo, coming soon)*
3. **CLONE FRAME** — mint the layered art as an **iNFT** (agent + NFT) on Base and list it in
the Plaza marketplace. Repo: [devclone20/clone-frame](https://github.com/devclone20/clone-frame).

## ✦ Features

- **Split & AI Auto-Layer** — colour decomposition that *preserves the original* brightness,
glass/transparency and anti-aliased edges. Tiny figures and glints survive (Detail mode),
instead of being smoothed away.
glass/transparency and anti-aliased edges. Tiny figures and glints survive (Detail mode)
instead of being smoothed away. Split fidelity: Clean ↔ Detail.
- **✨ Glow layer** — an adaptive highlight/bloom pass extracts the light into its own soft
layer so the glow reads on the final composite.
- **Background / Floor** — auto-detects the backdrop colour and lays a full-canvas solid
rectangle as the base, so the collection always has a complete, clean background.
- **Precise selection tools** — pick, paint, pen (Apple-Pencil lasso), box, points, edge
select, magic erase, despeckle, with edge snapping and feathering.
- **iQR** — generate a QR linked to your site and merge it into a layer slot.
- **Description iNFT** — cyberpunk text templates with auto-fit (always fits its box,
- **Floor / background** — auto-detects the backdrop colour and lays a full-canvas solid base,
so the collection always has a complete, clean background.
- **Precise selection tools** — pick, paint, pen (lasso), polygon, box, points, edge select,
magic erase, despeckle with edge snapping and feathering.
- **iQR slot** — generate a QR linked to your site and merge it into a dedicated layer slot.
- **Description iNFT slot** — cyberpunk text templates with auto-fit (always fits its box,
centred and faithful) and neon font styles.
- **Merge & compose** — a draggable board to arrange, merge and export the final iNFT.
- **My Layers** — a permanent local library (IndexedDB) to save, reload and export
collections. Nothing is uploaded; it stays on your device.
- **Apple-style UI** — dark-first, island navigation, glass-gel controls, and a top-bar
- **Definições / Settings** — appearance, engine and licence & rights in one hub.
- **Apple-style UI** — dark-first, island navigation, glass-gel controls, top-bar
notification island.

## 🚀 Quick start
Expand All @@ -66,13 +84,16 @@ python3 -m http.server 8123
# open http://localhost:8123/
```

> Once GitHub Pages is enabled for this repo, the app is also usable straight from the web.
> With GitHub Pages enabled, the app also runs straight from the web at
> **devclone20.github.io/ilayerframe**.

## 🗺️ Roadmap

- [x] World-class layering engine (fidelity-preserving Split / AI / Glow / Floor)
- [x] iQR + Description iNFT slots
- [x] My Layers permanent library
- [x] Definições / Settings hub (appearance, engine, licence & rights)
- [ ] **iIrys Frame handoff** — one-click export preset for sealing on Irys
- [ ] **Native desktop apps — macOS, Windows, Linux** (next focus)
- [ ] Drag-and-drop collection batching
- [ ] Pluggable export presets per marketplace
Expand All @@ -86,7 +107,7 @@ your PRs are wanted.
1. Read **[CONTRIBUTING.md](CONTRIBUTING.md)**.
2. Fork the repo and create a branch: `git checkout -b feat/your-idea`.
3. Keep it a single-file app where reasonable, and match the existing dark-first design.
4. **Never commit secrets** (see [Privacy & security](#privacy--security)).
4. **Never commit secrets** (see [Privacy & security](#-privacy--security)).
5. Open a pull request describing the change and the reasoning.

Good first areas: selection-tool refinements, export presets, i18n, native-app shells,
Expand Down
Loading