---
title: "Gridline Gesture — Framer component · Best of Framer"
description: "$3.00 · Framer component · by knokknokD · Interactive. nteractive, Media"
canonical: "https://framer.elliotli.dev/component/gridline-gesture"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Gridline Gesture

# Gridline Gesture

Drag grid lines to bend an image

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

![Gridline Gesture preview image 1](https://framer.elliotli.dev/og/component/gridline-gesture/d89db7fa9b6b2406/1600x1172.jpg)

## Summary

nteractive, Media

## Description

What it includes

\- Dense starting cluster with a shared, editable `Cluster Size`

\- Three image slots per token: Default, Hover, and Click

\- Waiting, Hover, and Active color controls

\- Press-only retreat: the selected token remains central while the others fan outward

\- Press the active token again to regroup the field

\- Horizontal, center-aligned ON/OFF state label beneath the last interacted token (never rotates)

\- Optional scene image, labels, retreat distance, and cluster size

\- Keyboard buttons with `aria-pressed`, Static Renderer fallback, and Reduced Motion support

Best for

\- Fashion, music, art, and culture launches

\- Playful portfolio or agency landing pages

\- Interactive campaign maps and visual indexes

\- Product stories where one object needs to become the focal point

Why it feels different

Most token fields are either static piles or permanently scattered bubbles. Token Retreat Field treats the cluster as a social object: hover changes its skin, a press creates focus, and every other token physically makes room.

Usage

1\. Add Token Retreat Field to a Framer page.

2\. Open the `Tokens` array and add up to the number of tokens your layout needs.

3\. Attach a Default Icon, Hover Icon, and Click Icon to each token. If an image is omitted, a cute kitschy pixel glyph fallback is used.

4\. Keep X/Y values close together for a dense pile. Increase `Retreat Distance` only when the preview needs more breathing room.

5\. Preview hover, keyboard focus, press, regroup, and Reduced Motion before publishing.

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

-   All · #9972

## Details

- **Author**: knokknokD
- **Price**: $3.00
- **Published**: 2026-08-29
- **Updated**: 2026-10-06
- **Added**: 2026-08-29
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step