Atomic Kinetic Canvas brings "digital matter" to your Framer projects. It takes any standard image and shatters it into a high-density grid of particles, each governed by a dual-force physics engine: Radial Repulsion and Elastic Restoration.

When the user's cursor approaches, particles are violently displaced based on an inverse-distance force calculation. As the cursor leaves, the "Spring Tension" logic takes over, pulling each particle back to its original coordinate with customizable damping. This creates a tactile, "bouncy" experience that makes your photography feel like a living, breathing substance.

✨ Key Highlights

• Molecular Deconstruction: Supports up to 50,000 particles per image. The engine automatically maps the color data of your source image onto the point cloud, maintaining perfect visual fidelity while allowing for 3D chaos.

• Elastic Spring Physics: Every particle is connected to its "home" coordinate by a virtual spring. You control the tension and friction, allowing for effects ranging from "Liquid Jello" to "Stiff Metallic Snap."

• Perspective Size Attenuation: Built with a custom vertex shader that handles 3D depth. Particles that are pushed "back" into Z-space automatically shrink, providing a realistic sense of 3D volume.

• Smart Transparency (PNG Ready): The engine respects alpha channels. If you upload a transparent PNG (like a product or a logo), the component will only generate particles for the visible areas, creating a perfect atomic silhouette.

• Object-Fit: Cover Logic: No more stretched particles. The GLSL fragment shader includes a UV-transform engine that maintains the correct aspect ratio of your image regardless of the component's physical dimensions.

• Idle Breathing Animation: Even without interaction, the canvas is alive. The Idle Float parameter adds a subtle 3D sine-wave oscillation, giving the image a "biological" breathing effect.

⚙️ Professional Physics Controls

• Repel Area & Power: Define the radius of the "forcefield" around the cursor and how aggressively it shatters the image.

• Spring Tension (Return Speed): Adjust how quickly the image "heals" itself after being disturbed.

• Damping (Friction): Control the "bounciness" of the particles. High damping creates a smooth, clinical return; low damping creates energetic, lingering vibrations.

• Aesthetic Wash: Use the "Color Tint" to apply a brand-specific hue over the entire particle system while retaining the original image's luminance.