Package Exports

monoink
monoink/monoink.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (monoink) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MonoInk.js

A lightweight JavaScript library that applies authentic retro computer display effects to web content. Render any webpage with a retro screen effect using pixelation, dithering, high contrast, and backlight effects reminiscent of classic CRT monitors and early computer displays.

Features

Pixelation: Create chunky, low-resolution blocks (1-100 density levels)
Dithering: Floyd-Steinberg algorithm for authentic black/white dot patterns
High Contrast: Force colors to pure black or white
Backlight: Colored lighting effects like vintage CRT monitors
Performance Optimized: Canvas reuse, 60fps throttling, memory leak prevention
Cross-Origin Safe: Graceful handling of CORS-restricted content
Real-time Updates: Dynamic settings changes without reinitialization

Installation

NPM

npm install monoink

Direct Download

<script src="monoink.js"></script>

CDN

<!-- Latest version -->
<script src="https://unpkg.com/monoink@latest/monoink.js"></script>

<!-- Specific version -->
<script src="https://unpkg.com/monoink@1.0.0/monoink.js"></script>

ES Modules

import MonoInk from 'monoink';

Quick Start

Render Entire Page

// Apply effects to the entire webpage
const monoInk = new MonoInk({
    pixelation: true,
    pixelDensity: 4,
    dithering: true,
    ditherDensity: 2
});

monoInk.render();

Render Specific Element

// Apply effects to a specific div or element
const targetDiv = document.getElementById('my-content');
const monoInk = new MonoInk({
    targetElement: targetDiv,
    pixelation: true,
    pixelDensity: 6,
    dithering: true
});

monoInk.render();

API Reference

Constructor

new MonoInk(options)

Options

Parameter	Type	Default	Range	Description
`pixelDensity`	number	4	1-100	Size of pixelated blocks. Higher = chunkier pixels
`ditherDensity`	number	2	1-10	Fineness of dithering dots. Lower = finer dots
`pixelation`	boolean	false	-	Enable/disable pixelation effect
`dithering`	boolean	false	-	Enable/disable dithering effect
`highContrast`	boolean	true	-	Force similar colors to pure black/white
`backlight`	boolean	false	-	Enable colored backlight effect
`backlightColor`	object	`{r:255,g:165,b:0}`	RGB 0-255	Backlight color
`targetElement`	Element	document.body	-	DOM element to apply effects to
`toggleButtonSelector`	string	"#toggle-backlight"	-	CSS selector for toggle button

Methods

`render()`

Applies the current effects to the target element.

monoInk.render();

`updateSettings(newSettings)`

Dynamically update effect parameters without recreating the instance.

monoInk.updateSettings({
    pixelDensity: 8,
    dithering: true,
    backlightColor: { r: 0, g: 255, b: 0 }
});

`toggleBacklight()`

Toggle the backlight effect on/off.

await monoInk.toggleBacklight();

`destroy()`

Clean up resources and remove effects.

monoInk.destroy();

Usage Examples

Basic Retro Effect

const monoInk = new MonoInk({
    pixelation: true,
    pixelDensity: 6,
    dithering: true,
    ditherDensity: 1,
    highContrast: true
});

monoInk.render();

Vintage Terminal Look

const monoInk = new MonoInk({
    pixelation: false,
    dithering: true,
    ditherDensity: 3,
    backlight: true,
    backlightColor: { r: 0, g: 255, b: 0 }, // Green CRT
    highContrast: true
});

monoInk.render();

Multiple Elements with Different Effects

// Apply different effects to different sections
const header = document.getElementById('header');
const content = document.getElementById('main-content');

// Subtle effect for header
const headerEffects = new MonoInk({
    targetElement: header,
    pixelation: true,
    pixelDensity: 2,
    highContrast: false
});

// Stronger effect for main content
const contentEffects = new MonoInk({
    targetElement: content,
    pixelation: true,
    pixelDensity: 8,
    dithering: true,
    backlight: true,
    backlightColor: { r: 0, g: 255, b: 0 }
});

headerEffects.render();
contentEffects.render();

Dynamic Controls

const monoInk = new MonoInk();

// Create control interface
document.getElementById('pixel-slider').addEventListener('input', (e) => {
    monoInk.updateSettings({ 
        pixelation: true,
        pixelDensity: parseInt(e.target.value) 
    });
});

document.getElementById('dither-slider').addEventListener('input', (e) => {
    monoInk.updateSettings({ 
        dithering: true,
        ditherDensity: parseInt(e.target.value) 
    });
});

Color Picker Integration

document.getElementById('color-picker').addEventListener('change', (e) => {
    const hex = e.target.value;
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    
    monoInk.updateSettings({
        backlight: true,
        backlightColor: { r, g, b }
    });
});

Effect Combinations

Pixelated Dithering

When both pixelation and dithering are enabled, MonoInk creates large pixelated blocks with fine dithering patterns within each block:

// Large blocks with fine internal dithering
const monoInk = new MonoInk({
    pixelation: true,
    pixelDensity: 20,    // Very chunky blocks
    dithering: true,
    ditherDensity: 1     // Very fine dots within blocks
});

Independent Effects

Effects can be combined or used separately:

Pixelation only: Chunky, blocky appearance
Dithering only: Fine black/white dot patterns
High Contrast only: Pure black/white conversion
Backlight only: Colored overlay effect

Performance Notes

Canvas Reuse: Canvases are reused to minimize memory allocation
Frame Rate Limiting: Automatic 60fps throttling prevents excessive rendering
Lazy Rendering: Effects only apply when enabled
Memory Management: Proper cleanup prevents memory leaks
CORS Handling: Graceful degradation for cross-origin images

Browser Support

Modern browsers with Canvas 2D support
Chrome 60+, Firefox 55+, Safari 11+, Edge 79+
Mobile browsers supported

Error Handling

MonoInk includes robust error handling:

try {
    const monoInk = new MonoInk({
        pixelDensity: -5  // Invalid value
    });
} catch (error) {
    console.error('MonoInk initialization failed:', error.message);
}

Common errors:

Invalid parameter types or ranges
Missing target elements
Canvas creation failures
CORS-restricted content (handled gracefully)

CSS Integration

The effect canvas is automatically styled and positioned:

/* MonoInk canvas styling (automatic) */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

To customize or hide specific elements from effects:

.no-monoink {
    /* Elements with this class will be skipped */
}

Advanced Usage

Multiple Instances

// Different effects for different areas
const headerEffects = new MonoInk({
    targetElement: document.header,
    pixelation: true,
    pixelDensity: 3
});

const contentEffects = new MonoInk({
    targetElement: document.main,
    dithering: true,
    ditherDensity: 2
});

Animation Integration

// Animate pixel density over time
let density = 1;
setInterval(() => {
    density = (density % 10) + 1;
    monoInk.updateSettings({ pixelDensity: density });
}, 200);

Responsive Design

// Adjust effects based on screen size
function updateForScreenSize() {
    const isMobile = window.innerWidth < 768;
    monoInk.updateSettings({
        pixelDensity: isMobile ? 2 : 4,
        ditherDensity: isMobile ? 4 : 2
    });
}

window.addEventListener('resize', updateForScreenSize);

Cleanup

Always clean up when done:

// Before page unload
window.addEventListener('beforeunload', () => {
    monoInk.destroy();
});

// Or when switching views
function cleanup() {
    monoInk.destroy();
}

Distribution Preparation

This library is ready for distribution through multiple channels:

NPM Publishing

# Ensure you're logged in to NPM
npm login

# Publish to NPM registry
npm publish

Development Setup

# Clone the repository
git clone <your-repo-url>
cd monoink

# Install development dependencies (none required)
npm install

# Run demo
npm run demo

File Structure for Distribution

monoink/
├── monoink.js          # Main library file
├── package.json        # NPM package configuration
├── README.md          # Documentation
└── index.html         # Demo file (not included in NPM package)

Version Management

Update version in package.json before publishing:

{
  "version": "1.0.1"
}

License

MIT License - Feel free to use in personal and commercial projects.

Contributing

Contributions welcome! Please ensure:

Code follows existing style
Performance optimizations are maintained
Cross-browser compatibility is preserved
Documentation is updated accordingly