nosnap.js - Vanilla JavaScript Examples

Basic Usage

Simple initialization with minimal configuration:

Ready to start

Real-time configuration changes and text updates:

Text Content:

Cell Size: 2

Speed (ms): 32

Font Size: Auto

Font Weight:

Font Family:

Configure and start animation

Automatically adapts to container size changes:

Container Width: 800px

Container Height: 400px

Resize container to see responsive behavior

Multiple independent animation instances:

Cell Size: 1, Speed: 16ms

Cell Size: 2, Speed: 32ms

Cell Size: 4, Speed: 60ms

Control multiple animations simultaneously

Monitor animation performance and automatically adjust quality:

Auto-adjust quality based on performance

FPS: 0

Frame Time: 0ms

Current Quality: Balanced

Cell Size: 2

Step Interval: 32ms

Performance monitoring ready

Switch between different visual themes and presets:

Theme Presets:

Text Presets:

Select a theme to see different visual styles