An enhanced sine wave generator tailored for web applications, offering advanced features for creating dynamic, visually captivating sine waves. Ideal for educational tools, music production software, and creative web projects.
- Apple-inspired documentation refresh with new examples and performance guidance
- New options:
pixelRatio,maxPixelRatio, andautoResize - Pause/resume example controls and a performance-tuned demo
AudioSync(src/audio-sync.js): analyzes anHTMLMediaElementorMediaStreamvia the Web Audio API and derives real-time energy, frequency-band, beat, and BPM metricsSineWaveGenerator.syncToAudio()/unsyncAudio(): bind anAudioSync(or any object exposingupdate(timestamp)) so wave amplitude, speed, and rotation react to music, with a configurable per-property metric mappingrespectReducedMotion/reducedMotionScaleoptions: honor the user'sprefers-reduced-motionpreference by default, scaling animation speed (or fully pausing) instead of ignoring it, and updating live if the preference changesariaLabeloption: canvases are nowaria-hidden="true"by default (decorative), orrole="img"with the given label when providedpixelRatiois now tracked automatically (unless explicitly overridden) and updates live via amatchMedialistener when the display's pixel density changesautoResizenow also observes the canvas element itself withResizeObserver, catching layout-driven size changes that a windowresizeevent alone would missValidationError,CanvasError,AudioSyncError: a typed error hierarchy (allinstanceof Error) replacing genericErrorthrows throughout, so consumers can discriminate failure modes withinstanceoftsconfig.jsonand atypecheckscript: JSDoc-driven type-checking with no added build stepcolorSchemeoption: the default gradient now followsprefers-color-schemelive (with a distinct, higher-contrast palette for dark backgrounds), or force"light"/"dark"useSineWaveGenerator(src/use-sine-wave-generator.js): an optional React hook that creates, starts, and destroys aSineWaveGeneratoracross the component lifecycle.reactis an optional peer dependency — only required if this file is imported- Dual ESM/CJS build (via
tsup) plus apackage.jsonexportsmap:require("@sebastienrousseau/sine-wave-generator")andimport ... from "@sebastienrousseau/sine-wave-generator"(and the/audio-sync,/use-sine-wave-generatorsubpaths) now both resolve natively. The previousrequire(".../src/*.js")deep-import paths still work unchanged, kept as explicit legacy aliases in the exports map - A live
/react-quickstart/page — three running React examples (basic multi-wave, hero background, audio-reactive microphone) built onuseSineWaveGenerator, with equal footing in the global site nav - Ten new example demos in the "Rhythm & signal" gallery section: heartbeat monitor, decorative wave pattern, voice-message-style waveform, live-microphone listening indicator, equalizer-style visualizer, closed wave loop, voice recorder (record/preview/playback), DJ-style dual-wave mixer, a reduced-motion preview toggle, and a light/dark adaptive-gradient toggle
- Restored the "Fundamentals" (basic wave, layered waves, pointer reactive, dynamic wave management, performance mode, custom easing, pause/resume) and "Responsive resize" demos to the deployed Examples gallery — previously only present in an unbuilt legacy file, so they never actually shipped
llms.txtandllms-full.txt(the llmstxt.org convention) for AI coding assistants, plus a documented path to expose them to MCP-capable tools viamcpdoc- schema.org
SoftwareApplicationstructured data on the homepage - A minimal single-file reproduction snippet on the Getting Started page, suitable for pasting into a sandbox or bug report
- A full regression test suite for the examples gallery, the React quickstart bundle, and every code example in the README and Getting Started page — all executed against the real library, not just checked by eye (175+ new tests)
- Responsive canvas sizing now respects element dimensions and device pixel ratio caps
strokeStyleis now honored; set tonullfor the built-in gradientWave.update()validates configuration changes before applying- Behavior change: animations now default to respecting
prefers-reduced-motion(seerespectReducedMotionabove) — passrespectReducedMotion: falseto restore the previous always-full-speed behavior - Behavior change: canvases now get an
aria-hiddenorrole="img"attribute by default unless one is already present on the element - Behavior change: the default gradient now varies with
prefers-color-schemeinstead of always using the same colors — passcolorScheme: "light"to restore the previous fixed palette AudioSync.detectBeat()now documents its algorithm basis and known limitations (single-band bass trigger, 60–200 BPM detection range) in JSDoc and the README- The Examples gallery is reorganized around what you're building rather than how it's drawn (for example, the generic "Examples" section is now "Backgrounds & decorative patterns", "Lab presets" is now "Hero background presets", "Advanced modes" is now "Generative & experimental art")
- Off-screen example cards use
content-visibility: autoto reduce the initial render cost of the ~50-canvas Examples gallery - The Examples-gallery search is now debounced and matches only each card's title/description, instead of reading full card text (including code samples) on every keystroke
- Pointer interactions now clamp to valid ranges for predictable phase updates
- Touch handling now guards against empty touch lists
- The constructor now throws a clear
CanvasErrorinstead of a rawReferenceErrorwhen called without a DOM (e.g. during server-side rendering) - The voice-waveform and heartbeat-monitor examples animated too fast and looked "scattered" — the underlying wave speed and beats-per-cycle values were recalibrated against every other demo's established pacing
- The homepage previously carried two separate, conflicting schema.org
SoftwareApplicationJSON-LD blocks (different descriptions, one missing version/license); consolidated into one
- New
rotateconfiguration option to rotate waves (#15) Wave.generateRandomConfig()static method to generate random configsWave.update()method to update wave configurations
Easefunctions now exported instead of inline- Consistent
thisreturn for fluent interface
- Inline gradient configuration, moved to
Waveclass - Unused
SPEEDconstant
setPhase()instance method,phasenow public
- Supports multiple simultaneous waves with individual configurations
- Includes mouse/touch interactivity to control wave phase
- More configurable with options like rotation, easing functions etc.
- Split into classes for Wave and Generator, encapsulates functionality
- Includes jsdoc commenting and type definitions
- Helper utils module for shared logic
- Utilizes requestAnimationFrame for smooth animations
- Implements resize listener for fullscreen canvas
- Includes validation logic for configurations
- Error handling for constructor
- Consistent syntax and formatting
- Descriptive variable/function names
- DRY principles followed
- Unused variables cleaned
- Modern JS syntax with classes, arrow fns etc
- Includes jsdoc commenting for classes, methods, and types
- Documents parameters and return values
- Describes purpose and functionality
- Can generate API documentation
