@huement/CosmicWave — Generative SVG Wave Templates

Interactive Wave Generator

Configure and view features natively generated in real-time.

Live Visualizer

Orientation (`data-wave-face`)

Points (6)

Variance (3)

Zero Flattening Modifiers

`data-start-end-zero="true"` (Flatten both sides) `data-start-zero="true"` (Flatten origin point only) `data-end-zero="true"` (Flatten termination point only)

Enable Loop (`data-wave-animate`)

Animation Loop Duration (`data-wave-speed` in ms)

Target Markup

<cosmic-wave></cosmic-wave>

Complete Attributes API Reference

All data attributes natively parsed out-of-the-box via component declaration.

Attribute String	Evaluated Type	Fallback Default	Operational Details
data-wave-face	String	"top"	Cardinal rendering boundary face. Accepts `"top"`, `"bottom"`, `"left"`, or `"right"`.
data-wave-points	Number	6	Total computed cubic anchor interpolation nodes across layout vector boundaries.
data-variance	Number	3	Randomized peak threshold multipliers. Defines maximum vector displacement distance from midpoint path axis.
data-wave-speed	Number	7500	Execution execution time context in milliseconds for animated canvas path intervals.
data-start-end-zero	Boolean	false	Forces structural origin and termination anchor arrays to flatline directly along base layout limits.
data-start-zero	Boolean	false	Forces only the structural origin anchor point vector to flatline along layout axis boundaries.
data-end-zero	Boolean	false	Forces only the structural termination anchor point vector to flatline along layout axis boundaries.
data-wave-observe	String	unset	Wires a native `IntersectionObserver`. Format pattern: `mode:rootMargin` (e.g. `"once:0px"` or `"repeat:50px"`).
data-wave-animate	Boolean	false	Triggers continuous fluid looping instantly upon loading. Automatically bypassed if browser metrics detect user prefers reduced motion.

Global Install via Package Manager

npm install @huement/cosmicwave

Import the bundle directly inside application modules or entry pathways. Custom DOM elements mount seamlessly into target environments.

import '@huement/cosmicwave';

Direct Implementation Framework CDN

Drop the distributed module bundle pathway target directly within markup headers via a content delivery engine network.

<script
            src="https://cdn.jsdelivr.net/gh/huement/CosmicWave@main/dist/cosmicwave.min.js"
            crossorigin="anonymous"></script>

Public Programmatic Instance API Methods

Access bound element instances directly through DOM reference handles.

.generateNewWave(duration)

Calculates and triggers an immediate cubic translation vector shift transition interpolation loop into an alternate randomized structure format config. Fallback duration defaults to 800ms.

.play(customDuration)

Forces immediate initialization sequence loops targeting uninterrupted multi-point transition animations. Optionally overrides declared data metric loop speeds.

.pause()

Halts runtime execution frame loops instantly, freezing target canvas paths safely at present progress index intervals and caching remaining delta execution vectors.