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.
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
Hero sections, portfolio sites, agency websites, SaaS backgrounds, section dividers, and creative landing pages.
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
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.
Evixel Studio
