hyper-dynamic-wallpaper
v1.0.1
Published
Add Video, GIF, Gradient, Image Backgrounds To Hyper Terminal
Downloads
30
Maintainers
Readme
Hyper Wallpaper
Add Video, GIF, Gradient, Image Backgrounds To Hyper Terminal
Install
To install hyper-dynamic-wallpaper
:
Method 1: Download Release
- Download the latest release
- Unzip the file and place the
hyper-dynamic-wallpaper
folder in~/.hyper_plugins/local/
Method 2: Repository Clone
- Clone this repository into
~/.hyper_plugins/local/
- Run
yarn install
ornpm install
within the project directory - Run
yarn run build
ornpm run build
to build the plugin. - Add the name of the directory to
localPlugins
in~/.hyper.js
like so:
localPlugins: [
'hyper-dynamic-wallpaper'
],
- Reload terminal window
Controls
MacOS
- Press
Command + U
for next wallpaper - Press
Command + I
for previous wallpaper
Windows
- Press
Shift + Ctrl + U
for next wallpaper - 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
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
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
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
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
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'
}
]
}
}