Scatter Gallery

Interactive Scatter Gallery is a dynamic, high-impact component designed to bring motion, character, and personality to your Framer projects. Each card — text or image — can be freely dragged, rotated, and rearranged, creating a playful and tactile experience.

With fully customizable typography, hover animations, background layers, and a Shuffle button, this component gives designers total control over the visual style. A strong hero background text block anchors the composition, while optional noise texture adds depth and grit.

Perfect for creating expressive layouts, creative sections, moodboards, hero scenes, and portfolio intro pages that need motion and attitude.

Key Features

Dynamic, Draggable Cards

• Drag to move cards freely around the canvas

• Automatic z-index elevation on interaction

• Supports text cards and image cards

Hover & Motion Effects

• Custom hover scale and rotation

• Smooth spring-based entrance animations

• Tap interaction for elevated focus

Fully Customizable Card Styles

• Background color, text color, rotation, size

• Custom fonts for content + subtext

• Adjustable spacing, shadows, scaling, and more

Supports Responsive Image Cards

• Upload images directly

• Auto-fit with configurable sizing

• Clean polaroid-style framing

Background Customization

• Large billboard text with full typography controls

• Noise overlay with adjustable opacity

• Custom background color

Shuffle Button

• An optional Scatter button that randomizes positions

• Interactive hover effects with a rotating icon

• Clean UI with adjustable styles

Footer Instructions

• Optional footer text for UX guidance

• Fully customizable font + color

Best For / Where to Use It

Ideal for creators who want personality, motion, and playful interaction embedded into their layout.

Perfect for:

• Portfolio hero sections

• Creative agency intros

• Digital moodboards

• Editorial & magazine-style layouts

• Art/photo showcases

• Landing page intros

• Product storytelling

• Experimental visual design

Great Use-Cases:

• Scatter inspirational quotes + visuals

• Display featured case-study cards

• Build a draggable brainstorming moodboard

• Add motion energy to portfolio homepages

• Showcase image highlights in a non-grid format