About Dotscape 3D
Dotscape is a customizable 3D animated dot surface that transforms simple dots into beautiful, flowing landscapes. Create ocean-like waves, abstract terrains, and interactive particle effects.
Powered by WebGL, it delivers smooth animations directly in the browser. Perfect for website backgrounds, hero sections, and creative visual elements.
Features
4 Wave Patterns: Ocean Swell, Radial Ripples, Flowing Terrain, and Interference.
Interactive Effects: Lift, dip, repel, or attract dots on hover.
Click Ripples: Create expanding waves with a click.
Pointer Trail: Add trails that follow your cursor.
Scroll Effects: Add scroll-based energy and camera tilt.
Custom Dot Styles: Circles, squares, diamonds, and rings.
Color Themes: 7 built-in themes plus custom colors.
3D Wireframe: Connect dots with lines for a mesh effect.
Responsive: Automatically adapts to container sizes.
Optimized Performance: Adaptive resolution and reduced-motion support.
Property Controls
Customize everything directly from Framer:
Wave: Pattern, height, speed, scale, direction, and layers.
Grid: Density, layout, spacing, depth, and scatter.
Dots: Size, shape, glow, softness, opacity, and wireframe.
Colors: Preset themes or custom color palettes.
Background: Color, glow, transparency, and vignette.
Camera: Perspective, tilt, rotation, zoom, and drift.
Motion: Intro animation and duration.
Interaction: Hover, click ripples, pointer trails, and scroll effects.
Performance: Frame rate, dot limit, adaptive quality, and reduced motion.
Quick Start
Add Dotscape to your Framer canvas.
Resize it to fit your section or container.
Open the property panel and customize the settings.
Choose a wave pattern, adjust colors, and enable interactions.
Preview your page and enjoy your animated 3D surface.
