Device Frames Media

The Open Source Standard Library for Device Templates - Website

For each device, there is a:

• PNG of the device frame
• PNG of the mask of the frame (grayscale binary screen mask)
• JSON file with metadata

Example of Frame, Template, and Mask

This data is stored within device-frames-output, which has this structure:

device-frames-output/
├── {category}/         
│   └── {model}/
│       └── {variant}/            
│           ├── frame.png         
│           ├── mask.png
│           └── template.json  
├── index.json 

where category is either Apple iPhone, Android Phone, Android Tablet, Apple iPad,
model is the type of device (ex: 17 Pro Max, iPad mini 8.3, Pixel 9 Pro XL), and
variant is the different colors (ex: Cosmic Orange, Blue, Titanium),
and index.json is a JSON file which contains all frames in a nested lookup structure, each variant in kebab-case with hosted URLs and template metadata:

{
  "apple-iphone": {
    "17-pro-max": {
      "cosmic-orange": {
        "frame": "https://jonnyjackson26.github.io/device-frames-media/device-frames-output/Apple%20iPhone/17%20Pro%20Max/Cosmic%20Orange/frame.png",
        "mask": "https://jonnyjackson26.github.io/device-frames-media/device-frames-output/Apple%20iPhone/17%20Pro%20Max/Cosmic%20Orange/mask.png",
        "screen": {
          "x": 100,
          "y": 100,
          "width": 1320,
          "height": 2868
        },
        "frameSize": {
          "width": 1520,
          "height": 3068
        }
      }
    }
  }
}

This data is created from raw PNGs of device frames (device-frames-raw) with the script process_frames.py. Algorithm docs

Contributing

Please add more device frames to expand the dataset. See CONTRIBUTING.md.

1. Add the frame PNG to the appropriate spot in device-frames-raw
2. Push your branch (or open a PR) and GitHub Actions will automatically run process_frames.py and regenerate the device list below

List of Devices and Variations

Apple iPhone:

• 6s
  • Gold, Rose Gold, Silver, Space Gray
• 8
  • Gold, Silver, Space Grey
• 8 Plus
  • Gold, Silver, Space Grey
• 12 Pro Max
  • Gold, Graphite, Pacific Blue, Silver
• 13
  • Blue, Midnight, Pink, Red, Starlight
• 13 mini
  • Black, Blue, Pink, Product (RED), Starlight
• 14 Pro Max
  • Deep Purple, Deep Purple - Shadow, Gold, Gold - Shadow, Silver, Silver - Shadow, Space Black, Space Black - Shadow
• 15 Pro Max
  • Black Titanium, Blue Titanium, Natural Titanium, White Titanium
• 16
  • Black, Pink, Teal, Ultramarine, White
• 16 Plus
  • Black, Pink, Teal, Ultramarine, White
• 16 Pro
  • Black Titanium, Desert Titanium, Natural Titanium, White Titanium
• 16 Pro Max
  • Black Titanium, Desert Titanium, Natural Titanium, White Titanium
• 17 Pro
  • Cosmic Orange, Deep Blue, Silver
• 17 Pro Max
  • Cosmic Orange, Deep Blue, Silver
• Air
  • Cloud White, Light Gold, Sky Blue, Space Black
• XS
  • Gold, Gold with Shadow, Grey, Silver, Silver with Shadow, Space Grey, Space Grey with Shadow

Apple iPad:

• iPad Air 11 M2 & M3
  • Blue, Blue2, Lavender, Lavender2, Space Gray, Space Gray2, Stardust, Stardust2
• iPad Air 13 M2 & M3
  • Blue, Blue2, Lavender, Lavender2, Space Gray, Space Gray2, Stardust, Stardust2
• iPad Air - 10.9 M1
  • Blue, Blue 2, Green, Green 2, Rose Gold, Rose Gold 2, Silver, Silver 2, Space Grey, Space Grey 2
• iPad mini 8.3 A17 Pro
  • Starlight, Starlight2
• iPad Pro 11 A12X to M2
  • Landscape - Silver, Landscape - Silver - Pencil, Landscape - Space Grey, Landscape - Space Grey - Pencil, Portrait - Silver, Portrait - Silver - Pencil, Portrait - Space Grey, Portrait - Space Grey - Pencil
• iPad Pro 11 M4 & M5
  • Landscape - Silver, Landscape - Space Black, Portrait - Silver, Portrait - Space Black
• iPad Pro 13 A12X to M2
  • Landscape - Silver, Landscape - Silver - Pencil, Landscape - Space Grey, Landscape - Space Grey - Pencil, Portrait - Silver, Portrait - Silver - Pencil, Portrait - Space Grey, Portrait - Space Grey - Pencil
• iPad Pro 13 M4 & M5
  • Landscape - Silver, Landscape - Space Black, Portrait - Silver, Portrait - Space Black

Android Phone:

• Pixel 8
  • Hazel
• Pixel 8 Pro
  • Black, Blue, Silver
• Pixel 9 Pro
  • Hazel, Obsidian, Rose Quartz
• Pixel 9 Pro XL
  • Hazel, Obsidian, Rose Quartz
• Samsung Galaxy S21
  • Black, Pink, Violet, White

Android Tablet:

• Pixel Tablet
  • Hazel, Porcelain
• Samsung Galaxy Tab S11 Ultra
  • Samsung Galaxy Tab S11 Ultra