---
title: "Interactive Layout — Free Framer component · Best of Framer"
description: "Free Framer component · by Balogun Ilias · Navigation. Physics-infused layout component"
canonical: "https://framer.elliotli.dev/component/interactive-layout"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Interactive Layout

# Interactive Layout

Physics-infused layout component

[View on Framer](https://framer.com/marketplace/components/interactive-layout/?via=elliot-li)

![Interactive Layout preview image 1](https://framer.elliotli.dev/og/component/interactive-layout/295f1d3f2a86e93e/1600x920.jpg)

## Summary

Physics-infused layout component

## Description

Bring raw tactile energy and micro-delight to your digital portfolios and landing pages. Kinetic Stack is an advanced, production-ready code component that transforms standard static button menus into a living, physics-infused environment.

Inspired by high-end motion design aesthetics, this component maps your cursor tracking data in real time, allowing custom canvas layers to gracefully evade or magnetize to the mouse while organically transferring kinetic velocity to neighboring layers. No overlapping, no complex keyframing—just pure, dynamic physics out of the box.

🚀 **Key Features**

-   **Two Interactive Modes:** Switch instantly between **Repel (Evade)** for an elastic UI that playfully shies away from the cursor, or **Attract (Magnet)** to draw elements elegantly toward the mouse track.
    
-   **Dual-Orientation Support:** Works flawlessly as a **Vertical** feature stack or a **Horizontal** top-navigation menu. The collision physics automatically calculate and adjust vectors based on your layout axis.
    
-   **Infinite Slot Customization:** Built utilizing a native Framer `Array` control wrapper. Add, remove, or drag-and-drop to reorder an unlimited number of custom frames directly from your right-hand settings panel.
    
-   **Unified Z-Index Mechanics:** Elements are hardcoded into a shared layout plane. They physically collide and push adjacent components out of the way without clipping or overlapping, ensuring flawless presentation.
    
-   **Total Visual Autonomy:** Because you link native Framer frames directly into the stack, you retain 100% control over typography, individual border radiuses, custom background states, and canvas hover effects.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1455

## Details

- **Author**: Balogun Ilias
- **Published**: 2026-07-01
- **Updated**: 2026-09-06
- **Added**: 2026-07-01
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation