Gridline Gesture

nteractive, Media

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.

nteractive, Media