Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Add Video, GIF, Gradient, Image Backgrounds To Hyper Terminal
wallpapers.movTo install hyper-dynamic-wallpaper:
- Download the latest release
- Unzip the file and place the hyper-dynamic-wallpaper folder in ~/.hyper_plugins/local/
- Clone this repository into ~/.hyper_plugins/local/
- Run yarn install or npm install within the project directory
- Run yarn run build or npm 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
- Press Command + U for next wallpaper
- Press Command + I for previous wallpaper
- Press Shift + Ctrl + U for next wallpaper
- Press Shift + Ctrl + I for previous wallpaper
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 Wallpapersconfig: {
// ...Hyper config
wallpapers: {
video: VideoConfig | VideoConfig[]
}
}| Property | Required | Default Value | Description |
|---|---|---|---|
| source | yes | - | Local path or link to video |
| speed | no | 1 | Video Speed |
config: {
// ...Hyper config
wallpapers: {
video: {
source: '/Users/aryandeora/Desktop/Downloads/aurora.mp4',
speed: 1
}
}
}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
}
]
}
}config: {
// ...Hyper config
wallpapers: {
image: ImageConfig | ImageConfig[]
}
}| 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 |
config: {
// ...Hyper config
wallpapers: {
image: {
source: '/Users/aryandeora/Desktop/Downloads/image.gif',
}
}
}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'
}
]
}
}config: {
// ...Hyper config
wallpapers: {
gradient: GradientConfig | GradientConfig[]
}
}| 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 |
config: {
// ...Hyper config
wallpapers: {
gradient: {
colors: ['#F17C58', '#E94584', '#24AADB' , '#27DBB1','#FFDC18', '#FF3706'],
animationTime: 30,
timingFunction: 'linear',
gradientAngle: 270
}
}
}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
}
]
}
}config: {
// ...Hyper config
wallpapers: {
solid: SolidColorConfig | SolidColorConfig[]
}
}| Property | Required | Default Value | Description |
|---|---|---|---|
| color | yes | - | Background |
config: {
// ...Hyper config
wallpapers: {
solid: {
color: 'hotpink',
}
}
}config: {
// ...Hyper config
wallpapers: {
solid: [
{
color: 'hotpink',
},
{
color: '#421F41',
}
]
}
}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'
}
]
}
}