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.

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

npm install -g pop-lang

Requires Node.js 16 or higher.

Usage

# 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

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

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

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

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

Use them anywhere with tokens.name.

Data

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: "[email protected]"  }
  ]
}

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