---
title: "Token Retreat Field — Framer component · Best of Framer"
description: "$3.00 · Framer component · by knokknokD · Interactive. Token Retreat Field treats the cluster as a social object: hover changes its skin, a press creates focus, and every other token…"
canonical: "https://framer.elliotli.dev/component/token-retreat-field"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Token Retreat Field

# Token Retreat Field

Interactive logo & icon cluster

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

![Token Retreat Field preview image 1](https://framer.elliotli.dev/og/component/token-retreat-field/9ea6804a4ba15ba2/1600x956.jpg)

## Summary

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.

## Description

What it includes

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

\- Ten original Y2K inline SVG icons: smiley, love signal, chrome star, butterfly, cyber pet, lucky star, flame, disk, alien, and spiral

\- 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

\- Background follows any Fixed Framer frame size; verified at tablet, mobile, and 320px widths

\- 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\. Use the built-in Y2K SVG set or attach a Default Icon, Hover Icon, and Click Icon to any token for custom artwork.

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 · #5578

## Details

- **Author**: knokknokD
- **Price**: $3.00
- **Published**: 2026-09-03
- **Updated**: 2026-10-06
- **Added**: 2026-09-03
- **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