ardeora/hyper-dynamic-wallpaper

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

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'
],

5. 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'
      }
    ]
  }
}

hyper-dynamic-wallpaper's Issues

It's not working for me

Got a white page and can't set a custom image or video or anything

Is it still working now?

hyper version: 3.2.3