Image Collage
Image Collage is an image interaction in the UI HUB image interactions collection. An interactive image collage that toggles between a scattered cluster and an organised row on click/tap.
The component is driven by 3 documented props (images, containerClassName, imageClassName), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Per-card spring animate between authored offsets and zeroed row; React.forwardRef + HTMLAttributes passthrough; Click toggle of the isOrganized state.
Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Image Collage?
A click-to-toggle image collage that springs between a scattered cluster and an aligned row.
Image Collage at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React and Framer Motion
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 3
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Image Collage works
An interactive image collage that toggles between a scattered cluster and an organised row on click/tap. Each card springs between its authored x/y/rotate offsets and a flat aligned row using a stiff spring (stiffness 350, damping 25, bounce 0.4); the caption switches between 'Dynamic Collage Cluster' and 'Organized Row View'. Forwards refs and spreads HTML attributes so it can be placed anywhere.
Technical information for Image Collage
| Category | Image Interactions |
|---|---|
| Libraries | React and Framer Motion |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | spring physics |
| State change | scattered rotated cluster of overlapping cards to flat evenly overlapped aligned row |
| Props | 3 configurable |
| Usage example | Included on this page |
What Image Collage requires
- Per-card spring animate between authored offsets and zeroed row
- React.forwardRef + HTMLAttributes passthrough
- Click toggle of the isOrganized state
- Responsive card widths + negative overlap
- No rAF or event listeners
How to use Image Collage
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <ImageCollage /> in your page using that import path.
- Pass any of the 3 documented props to change colours, density, speed or behaviour.
Image Collage questions
What is Image Collage?
A click-to-toggle image collage that springs between a scattered cluster and an aligned row.
How does Image Collage work?
An interactive image collage that toggles between a scattered cluster and an organised row on click/tap. Each card springs between its authored x/y/rotate offsets and a flat aligned row using a stiff spring (stiffness 350, damping 25, bounce 0.4); the caption switches between 'Dynamic Collage Cluster' and 'Organized Row View'. Forwards refs and spreads HTML attributes so it can be placed anywhere.
Which category does Image Collage belong to?
Image Collage is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the images prop do in Image Collage?
Images as { src, x, y, rotate, alt? }. It defaults to DEFAULT_COLLAGE_IMAGES.
What does the containerClassName prop do in Image Collage?
Extra classes for the inner card row. It defaults to undefined.
Is Image Collage free to use?
Image Collage is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Image Collage use?
Image Collage uses React and Framer Motion and is styled with Tailwind CSS.
What does Image Collage need to run?
Image Collage needs Per-card spring animate between authored offsets and zeroed row, React.forwardRef + HTMLAttributes passthrough, Click toggle of the isOrganized state and Responsive card widths + negative overlap.