hyper-dynamic-wallpaper v1.0.1

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

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

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

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

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