Topography
Contour lines trace an invisible terrain that shifts beneath the surface. Technical, precise, quietly alive.
Preview
Usage
import { createTopography } from 'syaivo';
const effect = createTopography({
lineColor: 'rgba(165,243,252,0.2)',
backgroundColor: '#0a0a0a',
levels: 14,
speed: 0.3,
});
effect.mount(document.getElementById('hero')!);Options
| Option | Type | Default | Description |
|---|---|---|---|
lineColor | string | "rgba(255,255,255,0.25)" | Contour line color |
backgroundColor | string | "transparent" | Canvas background |
detail | number | 10 | Grid cell size (4–40). Smaller = smoother |
levels | number | 14 | Number of contour thresholds |
lineWidth | number | 0.8 | Stroke width (CSS px) |
speed | number | 0.4 | Animation speed (0–0.8) |
noiseScale | number | 0.004 | Noise feature scale (0.002–0.012) |
warpStrength | number | 0.5 | Domain warp strength (0–1.5) |
animated | boolean | true | Enable animation |
respectReducedMotion | boolean | true | Honor prefers-reduced-motion |
Dynamic Updates
effect.update({ speed: 0.6, levels: 20 });Example
Introducing your product
Build something
people remember
A polished experience starts with the details. Ship interfaces that feel considered from the first pixel.
Get startedDocumentation