Hyper Wallpaper

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

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

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