npm package: @melphys/pop-compiler
Description: POP — Pixel On Pages. Declarative visual language with 8-bit color palette support.
Author: melphys
Latest version: 0.2.1

# POP — Pixel On Pages

> A declarative visual language for building portfolios and websites.  
> Write shapes. Define motion. Compile to HTML.

```
npm install -g pop-lang
pop build portfolio.pop
```

---

## What is POP?

POP is a language designed for visual thinkers. Instead of writing HTML, CSS, and JavaScript in three separate files, you describe what you want to see — and POP compiles it into a real website.

```pop
tokens {
  bg:     #020f09
  fg:     #00ff88
  accent: #ffb300
}

shape Hero {
  @type   block
  @size   fill × 100vh
  @tint   tokens.bg
  @font   mono 48px
  @text   "YOUR NAME"
  @align  center

  enter {
    @ease  glitch
    @dur   600ms
  }
}

layout {
  @flow  vertical
  @align center
  place  Hero
}
```

---

## Installation

```bash
npm install -g pop-lang
```

Requires Node.js 16 or higher.

---

## Usage

```bash
# Compile a .pop file to HTML
pop build mypage.pop

# Specify output file
pop build mypage.pop -o dist/index.html

# Help
pop help
```

---

## File structure

A POP project uses three file types per page:

| File | Role | Example |
|------|------|---------|
| `.pop` | Main file — assembles everything | `portfolio.pop` |
| `.data` | Content — text, images, links | `profil.data` |
| `.view` | Visual — shapes and layout | `profil.view` |
| `.motion` | Animation — timing and effects | `profil.motion` |

---

## Language reference

### Shapes

```pop
shape Name {
  @type    block | text | image | canvas
  @size    width × height
  @tint    background color
  @ink     text color
  @font    mono | sans | serif  size
  @text    "content" or data.field
  @src     path/to/image.jpg
  @border  1px #color
  @pad     24px
  @round   8px | full
  @align   center | left | right
  @pos     free
  @x       position
  @y       position
  @z       z-index
}
```

### Layout

```pop
layout {
  @flow     vertical | horizontal | grid N
  @align    center | left | right
  @gap      24px
  @cols     12

  place ShapeName
  place ShapeName @span 6
  repeat CardShape from data.items
}
```

### Animation

```pop
motion PageName {
  on load {
    seq {
      ShapeName enter
        @ease  glitch | out-expo | spring | bounce
        @dur   500ms
        @from  opacity:0
        @wait  200ms
    }
  }

  on ShapeName hover {
    ShapeName
      @scale  1.05
      @dur    200ms
  }

  on scroll > 80% {
    ShapeName pulse
      @loop  2s
  }
}
```

### Tokens

```pop
tokens {
  bg:     #020f09
  fg:     #00ff88
  dim:    #00994d
  accent: #ffb300
}
```

Use them anywhere with `tokens.name`.

### Data

```pop
data Profile {
  name:   "Your Name"
  title:  "Designer & Developer"
  bio:    "Short description."
  avatar: "./img/photo.jpg"

  links: [
    { label: "github"  url: "github.com/you" }
    { label: "mail"    url: "you@email.com"  }
  ]
}
```

---

## Easing functions

| Name | Effect |
|------|--------|
| `linear` | Constant speed |
| `out-expo` | Fast start, smooth stop |
| `in-back` | Slight overshoot |
| `spring` | Elastic feel |
| `bounce` | Bouncy landing |
| `glitch` | Digital distortion — POP exclusive |

---

## VS Code extension

Install **POP Language Support** from the VS Code marketplace for:
- Syntax highlighting
- Autocomplete for attributes and keywords
- Error underlining

---

## License

MIT — made by [Stael Prill](https://staelprill.com)