Skip to content

Repository files navigation

Bio Synthwave x Fluoromachine

An installable fork of Synthwave x Fluoromachine & epic animations, extended with modular bioinformatics visuals:

  • A rolling-circle viroid animation with RNA bases
  • A rotating mathematical icosahedral capsid
  • A shell-style active repository and file locus
  • A shared 15 FPS scheduler that pauses while the window is hidden

The original theme and glow/transition CSS are by TheCodemonkey and upstream contributors. This fork preserves the upstream MIT license and attribution.

why?

Technically, wanted to see how well an agent dealt with typescript/css/visuals. But is just looks so dope... Probably not for people with epilepsy or those sensitive to flashing visuals / migraines / battery-life aware.

Bio Synthwave animated demo

Requirements

Install Custom CSS and JS Loader (be5invis.vscode-custom-css). On Linux, the loader needs permission to modify VS Code's workbench file.

Warning

This uses up significant resources compared to a flat theme (even when idle). Animated CSS, SVG filters, and the viroid/capsid renderer increase VS Code's resource usage. In one Linux measurement with all modules enabled, the active VS Code renderer used approximately 42-46% of one logical CPU core (about 2.1-2.3% of total capacity on a 20-thread system), 1.14 GiB RSS, and 1.01 GiB proportional set size (PSS). These figures include the entire VS Code window, extensions, editor, and terminal, so they are not solely attributable to this theme and will vary by machine and workload. The bio renderer runs at 15 FPS and pauses while the window is hidden. Disable the viroid, capsid, epic transitions, or neon glow individually if resource usage is too high.

Install

Install the Custom CSS dependency and the latest packaged release from GitHub:

code --install-extension be5invis.vscode-custom-css
curl -fL https://github.com/urineri/BioSynthwave_vsix/releases/latest/download/bio-synthwave-x-fluoromachine.vsix -o /tmp/bio-synthwave.vsix && code --install-extension /tmp/bio-synthwave.vsix --force

Alternatively, with the GitHub CLI:

mkdir -p /tmp/bio-synthwave-vsix
gh release download \
  --repo urineri/BioSynthwave_vsix \
  --pattern '*.vsix' \
  --dir /tmp/bio-synthwave-vsix \
  --clobber
code --install-extension /tmp/bio-synthwave-vsix/*.vsix --force

To build and install directly from the repository instead:

git clone https://github.com/urineri/BioSynthwave_vsix.git
cd BioSynthwave_vsix
npm install
npm run check
npm run package
code --install-extension ./bio-synthwave-x-fluoromachine-0.1.0.vsix --force

Note

The direct download command works after the first tagged GitHub Release is published. The release workflow always uploads bio-synthwave-x-fluoromachine.vsix as a stable alias, so this URL does not change between versions.

Use

  1. Select Bio Synthwave x Fluoromachine as the color theme.
  2. Run Bio Synthwave: Apply or Reload Bio Synthwave Styles.
  3. Restart VS Code when prompted.

Use these commands to toggle individual modules:

  • Bio Synthwave: Toggle Viroid
  • Bio Synthwave: Toggle Capsid
  • Bio Synthwave: Toggle Active Locus
  • Bio Synthwave: Set Animation FPS

The same controls are available as settings:

{
  "bioSynthwave.neonGlow": true,
  "bioSynthwave.epicTransitions": true,
  "bioSynthwave.viroid": true,
  "bioSynthwave.capsid": true,
  "bioSynthwave.activeLocus": true,
  "bioSynthwave.animationFps": 15
}

Animation FPS accepts whole numbers from 1 to 60. Lower values reduce CPU usage; 10-15 FPS generally preserves the slow rotations. After changing settings directly, run the apply/reload command. Custom CSS must normally be reloaded after VS Code updates.

Development

npm install
npm run check
npm run package

The resulting .vsix can be installed with Extensions: Install from VSIX....

Release

Every push and pull request to main validates and packages the extension as a downloadable workflow artifact. To publish a permanent GitHub Release with both versioned and stable VSIX filenames, make the package.json version match the tag and push a v* tag:

npm version patch
git push origin main --follow-tags

GitHub Actions uses the repository-provided GITHUB_TOKEN; no personal access token or repository secret is required.

License

MIT. See the included LICENSE file.

Disclaimer

This theme may cause visual discomfort for some users due to its animated and flashing elements. Use at your own discretion. I am not responsible for anything that may happen as a result of using this theme.

About

No description or website provided.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages