hyper-dynamic-wallpaper

    1.0.1 • Public • Published

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

    Install

    npm i hyper-dynamic-wallpaper

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    5

    Last publish

    Collaborators

    • adeora