Cool Retro Hyper

A Hyper plugin inspired by cool-retro-term.
It uses the retro preset from the hyper-postprocessing plugin to replicate the CRT monitor effect of cool-retro-term.

!Cool Retro Hyper Screenshot
_screenshot with mrange's Neonwave Sunset set as the background._

_It is currently available on macOS and Windows. It has not been tested on Linux yet._

Installation

``
hyper i cool-retro-hyper
`

After installing the plugin using the above command, add the following to .hyper.js.

`js
// ~/.hyper.js

module.exports = {
...

plugins: [
'cool-retro-hyper'
],

...
}
`

⚡️ Sadly, I'm not sure if the development of Hyper Terminal is still ongoing, but Hyper 4.0.0-canary.5 is quite usable. Compared to the current stable version 3.4.1, it has significantly improved rendering performance, and I haven't noticed any issues with parts of the screen being cut off. If you plan to use this plugin, I strongly recommend using version 4.0.0-canary.5.

$3

If you have decided to use version 4.0.0, you need to add the following to the configuration file to prevent the version from rolling back due to automatic updates

`json
// macOS: ~/.config/Hyper/hyper.json
{
"config": {
...
"updateChannel": "canary",
...
"disableAutoUpdates": true,
}
}
`

⚠️ Cautions

- This app does not support split screen and tabbing in Hyper Terminal. If you need these features, please use a multiplexer like tmux or zellij.
- 👀 Some properties of this plugin may not be easy on the eyes. Adjust the settings to avoid eye strain!

Configuration

Configuration values can be omitted, and can input only the necessary values to use.
The following are the default settings configurable in the plugin.

`js
// ~/.hyper.js

module.exports = {
config: {
...
coolRetroHyper: {
crt: {
bloom: 2, // Warning: if this value is exceeded, the screen will not be rendered: 0 ~ 5
burnInTime: 0.4,
jitter: 0.8,
screenCurvature: 0.1,
noise: 0.4,
glowingLine: 0.75,
flickering: 0.2,
ambientLight: 0.5,
pixelHeight: 6.0,
pixelization: false,
rgbSplit: 0.25,
rgbSplitXDistance: 0.13,
rgbSplitYDistance: 0.08,
bazelSize: 0.12,
frameColor: '#191919',
},
shaderPaths: [
// glsl file paths
],
},
...
},
}
`

$3

You can input a GLSL file to use as the background. You can provide the input either relative to the home directory or as an absolute path, as shown below.

`js
{
shaderPaths: ['~/some.glsl']
}
`

The GLSL file is loaded through the postprocessing package, and the mainImage function has the following interface.

`glsl
void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 fragColor) {
...
}
`

The available uniforms are as follows.

- time
- resolution
- PI

$3

To make the Shadertoy code easier to use, if a comment contains @shadertoy, it will load the GLSL of the Shadertoy interface.

`
// @shadertoy
`

For example, clone this repository into your home directory and configure it as follows

`js
{
shaderPaths: ['~/cool-retro-hyper/examples/in-space.glsl']
}
``

⚠️ Note: Currently, only iTime and iResolution are supported. Other uniforms require manual code conversion.

Demo

$3

$3

#### New File

#### Example Files

- in space
- Neonwave Sunset

$3

$3