Spice up your website with this customizable interactive background built for Framer. It reacts to cursor movement and touch with smooth, organic motion. The effect simulates raked sand, gentle ripples, and drifting particles in real time, creating a calm and premium surface for hero sections, landing pages, and portfolios.
Move your mouse or swipe to leave trails that look like brushed sand. Click or tap to create soft ripples that slowly fade. Choose between dots, squares, or use your own logo or image as particles. Everything runs on canvas for high performance and full responsiveness.
How to Use
Drag the Zen Garden component into your Framer project.
Pick background and particle colors to match your brand.
Choose a particle style: Dots, Squares, or Image/Logo.
Adjust interaction and appearance in the right-hand panel:
Ripple Strength, Rake Radius, and Trail Fade
Motion Sensitivity and Hover Scale
Grid Pattern or Honeycomb Layout
No setup or libraries needed. It works instantly.
Features
Interactive Surface: Particles move and react to cursor motion, swipes, and clicks.
Customizable Look: Choose between dots, squares, or branded image particles.
Calm Idle Motion: Even at rest, particles subtly shimmer for a living, ambient feel.
Performance Optimized: Auto density, dual canvases, and GPU-friendly rendering.
Responsive Design: Scales perfectly across all screen sizes and devices.
Perfect For
Hero sections that need elegant motion
Portfolios and personal websites
Product landing pages and brand showcases
Interactive or ambient backgrounds
Summary
Zen Garden is a real-time interactive canvas for Framer that brings motion, texture, and serenity to any page. It’s built for designers who want a refined, responsive background that feels alive yet understated.
Made with ❤️ by Dalton Taylor
Dalton Taylor
