!Image Cloud Banner

Image Cloud Library

A TypeScript library for creating interactive image clouds with animated scattered layouts and zoom effects. Supports multiple image sources (static URLs, JSON endpoints, Google Drive) and layout algorithms.

> [!WARNING]
> ⚠️ All minor versions of this library before 1.0 (e.g., 0.1, 0.2, ...) will include breaking changes during development. Please re-test every time before upgrading until we have published v1.0.

Features

- ✨ Animated image layouts with smooth transitions
- 🎯 Multiple layout algorithms (radial, grid, spiral, cluster, wave, random)
- 🎬 Rich entry animations (bounce, elastic, wave paths; spin, wobble rotations)
- 🔍 Zoom/focus interactions with keyboard navigation
- 🎨 State-based image styling (borders, shadows, filters for default/hover/focused)
- 📱 Responsive design with adaptive sizing
- 🖼️ Multiple image sources (static URLs, JSON endpoints, Google Drive, composite loaders)
- 🛠️ Interactive configurator for visual configuration
- 📦 Zero runtime dependencies
- 🔷 Full TypeScript support

Installation

``bash
npm install @frybynite/image-cloud
`

$3

No install needed — load directly from a CDN:

jsDelivr
`
https://cdn.jsdelivr.net/npm/@frybynite/image-cloud@latest/dist/image-cloud.js (ESM)
https://cdn.jsdelivr.net/npm/@frybynite/image-cloud@latest/dist/image-cloud.umd.js (UMD)
https://cdn.jsdelivr.net/npm/@frybynite/image-cloud@latest/dist/image-cloud-auto-init.js
https://cdn.jsdelivr.net/npm/@frybynite/image-cloud@latest/dist/style.css
`

unpkg
`
https://unpkg.com/@frybynite/image-cloud@latest/dist/image-cloud.js (ESM)
https://unpkg.com/@frybynite/image-cloud@latest/dist/image-cloud.umd.js (UMD)
https://unpkg.com/@frybynite/image-cloud@latest/dist/image-cloud-auto-init.js
https://unpkg.com/@frybynite/image-cloud@latest/dist/style.css
`

Replace @latest with a specific version (e.g., @0.2.1) to pin to that release.

Quick Start

$3

`typescript
import { ImageCloud } from '@frybynite/image-cloud';
import '@frybynite/image-cloud/style.css';

const cloud = new ImageCloud({
container: 'myCloud',
images: [
'https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600',
'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600',
'https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600'
],
layout: {
algorithm: 'radial'
}
});

await cloud.init();
`

$3

`html



id="cloud"
style="width: 100%; height: 100vh"
data-image-cloud
data-config='{
"images": [
"https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600",
"https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600",
"https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600"
],
"layout": {
"algorithm": "radial"
}
}'
>