Topographic Contour

About

Topographic Contour brings the beauty of terrain maps to your Framer projects. Using procedural noise generation, it creates organic, flowing contour lines that animate smoothly and respond to user interaction.

Built with SVG for razor-sharp rendering at any resolution—no pixelation on retina displays or when scaling.

Key Features

• Crisp SVG Rendering — Resolution-independent lines, perfect at any size

• Smooth Animation — Flowing terrain that evolves organically

• Mouse Reactivity — Contours ripple around cursor movement

• Dual Color Modes — Monochrome or elevation-based gradients

• Procedural Generation — Infinite unique patterns via seed control

• Transparent Background — Layer over images, videos, or other elements

Use Cases

Hero sections, portfolio sites, agency websites, SaaS backgrounds, section dividers, and creative landing pages.

Property Controls

• Terrain — Scale, detail, roughness, and seed for pattern generation

• Contour Lines — Line count, thickness, and quality (Fast/Balanced/Sharp)

• Colors — Background color, mono or gradient mode, line opacity, and custom gradient palette (up to 8 colors)

• Animation — Toggle on/off and speed control

• Mouse Reactivity — Enable/disable, radius, strength, and cursor visibility

• Styling — Border radius and shadows

Quick Tips

• Set background opacity to 0 for transparent overlays

• Use low line opacity (0.1–0.2) for subtle, elegant effects

• Save favorite seed values for consistent patterns across projects.