Skip to content

Latest commit

 

History

History
327 lines (283 loc) · 8.29 KB

README.md

File metadata and controls

327 lines (283 loc) · 8.29 KB
Raw

Hyper Wallpaper


Add Video, GIF, Gradient, Image Backgrounds To Hyper Terminal

wallpapers.mov

Install

To install hyper-dynamic-wallpaper:

Method 1: Download Release

  1. Download the latest release
  2. Unzip the file and place the hyper-dynamic-wallpaper folder in ~/.hyper_plugins/local/

Method 2: Repository Clone

  1. Clone this repository into ~/.hyper_plugins/local/
  2. Run yarn install or npm install within the project directory
  3. Run yarn run build or npm run build to build the plugin.
  4. Add the name of the directory to localPlugins in ~/.hyper.js like so:
localPlugins: [
  'hyper-dynamic-wallpaper'
],
  1. Reload terminal window

Controls

MacOS
  1. Press Command + U for next wallpaper
  2. Press Command + I for previous wallpaper
Windows
  1. Press Shift + Ctrl + U for next wallpaper
  2. Press Shift + Ctrl + I for previous wallpaper

Configuring Wallpapers

To add custom wallpapers add a wallpapers object in ~/.hyper.js like so:

config: {
  // ...Hyper config
  wallpapers: {}
}

Look at specific wallpaper sections below for more information on how to add different backgrounds.

Video Wallpapers

Video Wallpapers

config: {
  // ...Hyper config
  wallpapers: {
    video: VideoConfig | VideoConfig[]
  }
}

VideoConfig Options

Property Required Default Value Description
source yes - Local path or link to video
speed no 1 Video Speed

Examples: Video Wallpaper Config

Single Video Wallpaper
config: {
  // ...Hyper config
  wallpapers: {
    video: {
      source: '/Users/aryandeora/Desktop/Downloads/aurora.mp4',
      speed: 1
    }
  }
}
Multiple Video Wallpapers
config: {
  // ...Hyper config
  wallpapers: {
    video: [
      {
        source: '/Users/aryandeora/Desktop/Downloads/aurora.mp4',
      },
      {
        source: 'https://cdn.dribbble.com/users/288987/screenshots/15269498/media/3e7d1d6ca30d7793f72168cb99d6e5b8.mp4',
        speed: 0.8
      }
    ]
  }
}
Image Wallpapers

Image Wallpapers

config: {
  // ...Hyper config
  wallpapers: {
    image: ImageConfig | ImageConfig[]
  }
}

ImageConfig Options

Property Required Default Value Description
source yes - Local path or link to image
repeat no no-repeat CSS background-repeat property
color no black CSS background-color property
position no center CSS background-position property
size no cover CSS background-size property

Examples: Image Wallpaper Config

Single Image Wallpaper
config: {
  // ...Hyper config
  wallpapers: {
    image: {
      source: '/Users/aryandeora/Desktop/Downloads/image.gif',
    }
  }
}
Multiple Image Wallpapers
config: {
  // ...Hyper config
  wallpapers: {
    image: [
      {
        source: '/Users/aryandeora/Desktop/Downloads/image.png',
      },
      {
        source: 'https://lh3.googleusercontent.com/proxy/pVwXyJdsROLTGHwWQmiPH4xEj-ZE1VjlAJbQN9jAYprMD7QV4R25AFoyFq2Cn0yhKnzCCTKw2lgffd4yeUxUQGljk6IhZqo',
        position: '90% 50%',
        size: '35%',
        color: '#08103a'
      }
    ]
  }
}
Gradient Wallpapers

Gradient Wallpapers

config: {
  // ...Hyper config
  wallpapers: {
    gradient: GradientConfig | GradientConfig[]
  }
}

GradientConfig Options

Property Required Default Value Description
colors yes - List of colors in the gradient
gradientAngle no 270 Gradient direction in degrees
animationTime no 0 CSS animation-duration property
timingFunction no linear CSS animation-timing-function property

Examples: Gradient Wallpaper Config

Single Gradient Wallpaper
config: {
  // ...Hyper config
  wallpapers: {
    gradient: {
      colors: ['#F17C58', '#E94584', '#24AADB' , '#27DBB1','#FFDC18', '#FF3706'],
      animationTime: 30,
      timingFunction: 'linear',
      gradientAngle: 270
    }
  }
}
Multiple Gradient Wallpapers
config: {
  // ...Hyper config
  wallpapers: {
    gradient: [
      {
        colors: ['#F17C58', '#E94584', '#24AADB' , '#27DBB1','#FFDC18', '#FF3706'],
        animationTime: 30,
        timingFunction: 'linear',
        gradientAngle: 270
      },
      {
        colors: ['#421F41', '#0475A2'],
        animationTime: 5,
        timingFunction: 'linear',
        gradientAngle: 270
      }
    ]
  }
}
Solid Color Wallpapers

Solid Color Wallpapers

config: {
  // ...Hyper config
  wallpapers: {
    solid: SolidColorConfig | SolidColorConfig[]
  }
}

SolidColorConfig Options

Property Required Default Value Description
color yes - Background

Examples: Solid Color Wallpaper Config

Single Solid Color Wallpaper
config: {
  // ...Hyper config
  wallpapers: {
    solid: {
      color: 'hotpink',
    }
  }
}
Multiple Solid Color Wallpapers
config: {
  // ...Hyper config
  wallpapers: {
    solid: [
      {
        color: 'hotpink',
      },
      {
        color: '#421F41',
      }
    ]
  }
}
Mixed Wallpapers

Mixed Wallpapers

config: {
  // ...Hyper config
  wallpapers: {
    video: VideoConfig | VideoConfig[],
    image: ImageConfig | ImageConfig[],
    gradient: GradientConfig | GradientConfig[],
    solid: SolidColorConfig | SolidColorConfig[]
  }
}

Multiple wallpaper types can be mixed together in the same config like so:

config: {
  // ...Hyper config
  wallpapers: {
    solid: {
      color: '#421F41',
    },
    video: [{
        source: '/Users/aryandeora/Desktop/Downloads/aurora.mp4',
        speed: 1
      }
    ]
    image: [
      {
        source: '/Users/aryandeora/Desktop/Downloads/image.png',
      },
      {
        source: 'https://lh3.googleusercontent.com/proxy/pVwXyJdsROLTGHwWQmiPH4xEj-ZE1VjlAJbQN9jAYprMD7QV4R25AFoyFq2Cn0yhKnzCCTKw2lgffd4yeUxUQGljk6IhZqo',
        position: '90% 50%',
        size: '35%',
        color: '#08103a'
      }
    ]
  }
}