@frybynite/image-cloud 0.1.0 → 0.1.2

package/README.md

@@ -63,9 +63,9 @@ const cloud = new ImageCloud({
         {
           type: 'urls',
           urls: [
-            'https://example.com/image1.jpg',
-            'https://example.com/image2.jpg',
-            'https://example.com/image3.jpg'
+            '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'
           ]
         }
       ]
@@ -96,9 +96,9 @@ await cloud.init();
           "sources": [{
             "type": "urls",
             "urls": [
-              "https://example.com/image1.jpg",
-              "https://example.com/image2.jpg",
-              "https://example.com/image3.jpg"
+              "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"
             ]
           }]
         }
@@ -110,206 +110,48 @@ await cloud.init();
   ></div>
 
   <!-- No CSS link needed — auto-init injects styles automatically -->
-  <script type="module" src="node_modules/@frybynite/image-cloud/dist/image-cloud-auto-init.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@frybynite/image-cloud@latest/dist/image-cloud-auto-init.js"></script>
 </body>
 </html>
 ```
 
-## Usage Examples
+## Getting Started
 
-### Static Images from URLs
+For detailed configuration, see the documentation in the `docs/` folder:
 
-```typescript
-const cloud = new ImageCloud({
-  container: 'cloud',
-  loader: {
-    type: 'static',
-    static: {
-      sources: [
-        {
-          type: 'urls',
-          urls: [
-            'https://picsum.photos/400/300',
-            'https://picsum.photos/500/350',
-            'https://picsum.photos/450/320'
-          ]
-        }
-      ]
-    }
-  }
-});
+1. **[Loaders](docs/LOADERS.md)** — Configure image sources (static URLs, local paths, Google Drive folders)
+2. **[Layout Generators](docs/GENERATORS.md)** — Choose and customize layout algorithms (radial, grid, spiral, cluster, random)
+3. **[Image Sizing](docs/IMAGE_SIZING.md)** — Control base sizes, variance, and responsive/adaptive behavior
+4. **[Full Parameter Reference](docs/PARAMETERS.md)** — Complete configuration options for animation, interaction, styling, and more
+5. **[API Reference](docs/api/README.md)** — TypeScript API documentation for the ImageCloud class, types, loaders, and generators
 
-await cloud.init();
-```
+### Using the Configurator
 
-### Static Images from Local Path
+The easiest way to create a custom configuration is with the interactive Configurator tool:
 
-```typescript
-const cloud = new ImageCloud({
-  container: 'cloud',
-  loader: {
-    type: 'static',
-    static: {
-      sources: [
-        {
-          type: 'path',
-          basePath: '/images',
-          files: ['photo1.jpg', 'photo2.jpg', 'photo3.jpg']
-        }
-      ]
-    }
-  }
-});
+- **Online**: [Image Cloud Configurator](https://frybynite.github.io/image-cloud/configurator/index.html)
+- **Local**: Run a local server from the `configurator/` directory
 
-await cloud.init();
-```
-
-### Google Drive Folder
-
-```typescript
-const cloud = new ImageCloud({
-  container: 'cloud',
-  loader: {
-    type: 'googleDrive',
-    googleDrive: {
-      apiKey: 'YOUR_GOOGLE_API_KEY',
-      sources: [
-        {
-          type: 'folder',
-          folders: ['YOUR_FOLDER_ID']
-        }
-      ]
-    }
-  }
-});
+The Configurator lets you visually adjust all settings and exports a ready-to-use JSON configuration.
 
-await cloud.init();
-```
+## Events & Interactions
 
-### Custom Configuration
-
-```typescript
-const cloud = new ImageCloud({
-  container: 'cloud',
-  loader: {
-    type: 'static',
-    static: {
-      sources: [{ type: 'urls', urls: ['img1.jpg', 'img2.jpg'] }]
-    }
-  },
-  layout: {
-    algorithm: 'radial',  // 'radial' | 'grid' | 'spiral' | 'cluster' | 'random'
-    sizing: {
-      base: 250
-    },
-    rotation: {
-      range: { max: 20, min: -20 }
-    },
-    spacing: {
-      padding: 60
-    }
-  },
-  animation: {
-    duration: 800,
-    queue: {
-      interval: 200
-    }
-  },
-  interaction: {
-    focus: {
-      scale: 3.0,
-      zIndex: 1000
-    }
-  }
-});
-
-await cloud.init();
-```
-
-## Configuration Options
-
-See `docs/PARAMETERS.md` for full documentation of the configuration object.
-
-### ImageCloudOptions
-
-```typescript
-interface ImageCloudOptions {
-  container?: string;              // HTML element ID (default: 'imageCloud')
-  loader?: Partial<LoaderConfig>;
-  layout?: Partial<LayoutConfig>;
-  animation?: Partial<AnimationConfig>;
-  interaction?: Partial<InteractionConfig>;
-  rendering?: Partial<RenderingConfig>;
-  debug?: boolean;
-}
-```
-
-## API Reference
-
-### ImageCloud Class
-
-#### Methods
-
-- `init(): Promise<void>` - Initialize the cloud and load images
-- `clearImageCloud(): void` - Clear all images and reset state
-- `destroy(): void` - Clean up resources and event listeners
-
-### Events & Interactions
+### Mouse
 
 - **Click image**: Focus/zoom the image
 - **Click outside**: Unfocus current image
-- **ESC key**: Unfocus current image
-- **Window resize**: Responsive layout adjustment
-
-## Advanced Usage
-
-### Custom Placement Generator
-
-```typescript
-import { PlacementGenerator, ImageLayout, ContainerBounds } from '@frybynite/image-cloud';
+- **Hover**: Apply hover styling
 
-class CustomGenerator implements PlacementGenerator {
-  generate(count: number, bounds: ContainerBounds): ImageLayout[] {
-    // Your custom layout algorithm
-    return layouts;
-  }
-}
-```
+### Keyboard
 
-### React Integration
+- **Arrow Right**: Navigate to next image (when focused)
+- **Arrow Left**: Navigate to previous image (when focused)
+- **Enter / Space**: Focus hovered image
+- **Escape**: Unfocus current image
 
-```tsx
-import { useEffect, useRef } from 'react';
-import { ImageCloud } from '@frybynite/image-cloud';
-import '@frybynite/image-cloud/style.css';
+### Window
 
-function CloudComponent() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const cloudRef = useRef<ImageCloud | null>(null);
-
-  useEffect(() => {
-    if (containerRef.current) {
-      cloudRef.current = new ImageCloud({
-        container: containerRef.current.id,
-        loader: {
-          type: 'static',
-          static: {
-            sources: [{ type: 'urls', urls: ['img1.jpg', 'img2.jpg'] }]
-          }
-        }
-      });
-
-      cloudRef.current.init();
-    }
-
-    return () => {
-      cloudRef.current?.destroy();
-    };
-  }, []);
-
-  return <div id="cloud" ref={containerRef} />;
-}
-```
+- **Resize**: Responsive layout adjustment (debounced)
 
 ## Browser Support
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frybynite/image-cloud",
-  "version": "0.1.0",
-  "description": "TypeScript image cloud library with animated scattered layouts and zoom effects",
+  "version": "0.1.2",
+  "description": "TypeScript image cloud library with custom loaders, various layouts, full images styling, what animation and zoom effects",
   "type": "module",
   "main": "./dist/image-cloud.umd.js",
   "module": "./dist/image-cloud.js",