---
title: "Untouchable — Free Framer component · Best of Framer"
description: "Free Framer component · by Iklil Najma Muqtafa · Interactive. Evasive Interactive Element"
canonical: "https://framer.elliotli.dev/component/untouchable"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Untouchable

# Untouchable

Evasive Interactive Element

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

![Untouchable preview image 1](https://framer.elliotli.dev/og/component/untouchable/5be27fa8223427e5/1600x1200.jpg)

## Summary

Evasive Interactive Element

## Description

Why Don't Touch Me?

Creating interactive gamified components or viral landing page gimmicks usually requires managing tedious screen coordinate event tracking, computing responsive layout bounds, and battling layout clipping.

This controller simplifies that process entirely. By passing a simple element ID hook, it continuously maps your design asset against live viewport boundaries. The second a user hovers or taps nearby, it generates random geometric coordinates within the container view bounds and shifts via fluid Framer Motion spring physics. It's an excellent utility choice for building engaging promotional campaigns, landing pages, creative portfolios, or quirky site interactions.

## Key Features

-   **Smart Viewport Mapping:** Dynamically measures bounds to keep elements on-screen during movement, preventing layout overflow across devices.
    
-   **Dynamic Physics Integration:** Hooks directly into native Framer springs to produce smooth, lifelike motion profiles.
    
-   **Target ID Mapping:** Zero styling constraints. Connect the component helper to your existing design stack by referencing its ID token.
    
-   **Custom Event Hooks:** Choose between standard mouse pointer triggers or multi-device click mappings depending on your design logic.
    

## How to Use

1.  Copy the Component URL.
    
2.  Select your target UI button or layer in Framer, and assign a unique name in its **ID** property input field on the right utility panel (e.g., `donttouch-btn`).
    
3.  Paste this component helper asset nearby onto your canvas.
    
4.  Input your assigned layout token identifier inside the **Target ID** control window field to activate the motion behavior.
    

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

-   All · #4470

## Details

- **Author**: Iklil Najma Muqtafa
- **Published**: 2026-06-21
- **Updated**: 2026-09-22
- **Added**: 2026-06-21
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase
