nosnap.js

A JavaScript library for creating animated noise text effects on HTML5 canvas. Transform your text into dynamic, animated noise patterns with smooth transitions and responsive behavior.

Features

• 🎨 Dynamic Text Animation - Smooth animated noise effects on text
• 📱 Responsive Design - Automatically adapts to canvas size changes
• ⚡ High Performance - Optimized rendering with configurable quality settings
• 🎛️ Flexible Configuration - Extensive customization options
• 🔧 Framework Agnostic - Works with React, Vue, Angular, or vanilla JavaScript
• 📦 Multiple Module Formats - ES6, CommonJS, and UMD builds
• 🛡️ TypeScript Support - Full type definitions included
• 🎯 Error Handling - Comprehensive error handling and recovery

Installation

NPM

npm install nosnap.js

CDN

<!-- ES Module -->
<script type="module">
  import NoSnap from 'https://cdn.jsdelivr.net/npm/nosnap.js/dist/nosnap.esm.js';
</script>

<!-- UMD (Global) -->
<script src="https://cdn.jsdelivr.net/npm/nosnap.js/dist/nosnap.umd.min.js"></script>

Quick Start

import NoSnap from 'nosnap.js';

// Get your canvas element
const canvas = document.getElementById('myCanvas');

// Create the animation
const animation = new NoSnap(canvas, {
  text: 'HELLO WORLD',
  cellSize: 2,
  stepMs: 32
});

// Start the animation
animation.start();

Examples

Basic Usage

const animation = new NoSnap(canvas, {
  text: 'BASIC EXAMPLE'
});
animation.start();

Custom Configuration

const animation = new NoSnap(canvas, {
  text: 'CUSTOM STYLE',
  cellSize: 3,
  stepMs: 40,
  fontSize: 48,
  fontWeight: 'bold',
  fontFamily: 'Arial, sans-serif'
});

Dynamic Text Updates

// Change text without stopping animation
animation.setText('NEW TEXT');

// Update configuration
animation.updateConfig({
  cellSize: 4,
  stepMs: 50
});

Responsive Design

// The library automatically handles canvas resizing
window.addEventListener('resize', () => {
  // Canvas size changes are automatically detected
  // No manual intervention required
});

Framework Integration

React

import { useEffect, useRef } from 'react';
import NoSnap from 'nosnap.js';

function AnimatedText({ text = 'REACT EXAMPLE' }) {
  const canvasRef = useRef(null);
  const animationRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current) {
      animationRef.current = new NoSnap(canvasRef.current, {
        text,
        cellSize: 2,
        stepMs: 32
      });
      
      animationRef.current.start();
    }

    return () => {
      if (animationRef.current) {
        animationRef.current.destroy();
      }
    };
  }, []);

  useEffect(() => {
    if (animationRef.current) {
      animationRef.current.setText(text);
    }
  }, [text]);

  return <canvas ref={canvasRef} width={800} height={400} />;
}

Vue.js

<template>
  <canvas ref="canvasRef" width="800" height="400"></canvas>
</template>

<script>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import NoSnap from 'nosnap.js';

export default {
  props: {
    text: { type: String, default: 'VUE EXAMPLE' }
  },
  setup(props) {
    const canvasRef = ref(null);
    let animation = null;

    onMounted(() => {
      animation = new NoSnap(canvasRef.value, {
        text: props.text,
        cellSize: 2,
        stepMs: 32
      });
      animation.start();
    });

    onUnmounted(() => {
      if (animation) {
        animation.destroy();
      }
    });

    watch(() => props.text, (newText) => {
      if (animation) {
        animation.setText(newText);
      }
    });

    return { canvasRef };
  }
};
</script>

API Reference

Constructor

new NoSnap(canvas, options)

Parameters:

• canvas (HTMLCanvasElement) - Required. Target canvas element
• options (Object) - Optional. Configuration options

Methods

| Method | Description | |--------|-------------| | start() | Start the animation | | stop() | Stop the animation | | destroy() | Stop animation and clean up all resources | | setText(text) | Update the displayed text dynamically | | updateConfig(options) | Update configuration options |

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | text | string | 'HELLO' | Text to display | | cellSize | number | 2 | Size of noise cells (1-10) | | circleRadius | number | 300 | Radius of animated circle effect | | stepPixels | number | 4 | Pixels to move per animation step | | stepMs | number | 32 | Animation step interval (ms) | | maskBlockSize | number | 2 | Text mask block size | | fontSize | number | null | Font size (auto-calculated if null) | | fontWeight | number|string | 900 | Font weight | | fontFamily | string | 'sans-serif' | Font family |

Performance Optimization

Mobile-Friendly Settings

const mobileAnimation = new NoSnap(canvas, {
  text: 'MOBILE',
  cellSize: 4,        // Larger cells = better performance
  stepMs: 50,         // Slower updates = less CPU usage
  maskBlockSize: 4    // Larger blocks = faster rendering
});

High-Quality Settings

const qualityAnimation = new NoSnap(canvas, {
  text: 'QUALITY',
  cellSize: 1,        // Fine detail
  stepMs: 16,         // 60fps animation
  maskBlockSize: 1    // Sharp text edges
});

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Required Features:

• HTML5 Canvas 2D API
• ES6 Modules (for module builds)
• requestAnimationFrame
• ResizeObserver (with polyfill fallback)

Documentation

• 📖 Complete API Documentation
• 🎯 Usage Guide & Examples
• ⚛️ React Integration Examples
• 🟢 Vue.js Integration Examples
• 🌐 Vanilla JavaScript Examples

Examples & Demos

• 📋 Examples Index - Browse all available examples
• 🚀 Local Development Example - Interactive demo with controls
• 📦 Module Usage Examples - Different module systems
• ⚛️ Framework Integration Examples - React, Vue, etc.

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# Watch mode for development
npm run build:watch

# Start development server for examples
npm run dev

# Or just serve files (after building)
npm run serve

Local Development Server

The project includes a development server to easily test examples locally:

# Build and start server
npm run dev

This will:

1. Build the library in development mode
2. Start a local HTTP server on http://localhost:3000
3. Enable CORS for cross-origin requests
4. Disable caching for development

You can then access examples at:

• http://localhost:3000/examples/
• http://localhost:3000/docs/

Example Usage in Development

Create an HTML file in the examples/ directory:

<!DOCTYPE html>
<html>
<head>
  <title>NoSnap.js Local Example</title>
</head>
<body>
  <canvas id="canvas" width="800" height="400"></canvas>
  
  <!-- Use local build -->
  <script src="../dist/nosnap.umd.js"></script>
  <script>
    const canvas = document.getElementById('canvas');
    const animation = new NoSnap(canvas, {
      text: 'LOCAL DEV',
      cellSize: 2
    });
    animation.start();
  </script>
</body>
</html>

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Credits

Hacker News submission

License

MIT License - see the LICENSE file for details.

Support

• 📧 Report Issues
• 💬 Discussions
• 📚 Documentation

Made with ❤️ for the web development community