Fork me on GitHub

Collage.js

Framework for creating live, dynamic, and interactive collages.

Collage.js brings together many public APIs, along a method of presenting media within a limitless two-dimesional space to create memorable experiences.

An example

Here's a basic embedded collage, move your mouse over the collage to move. Click here to view it full page.

var collage = Collage.create(document.getElementById('PopcornCollage'));
collage.load('popcorn media', {
  flickr: [{ tags: 'popcorn'}],
  googleNews: ['popcorn'],
  twitter: [{ query: 'popcorn' }]
}).then(function(){
  collage.start('popcorn media');
  collage.speed(8);
});

Integrated APIs

Out-of-the box, you can populate the collage with media from these content providers:

You can also easily embed any HTML element you would like, including iframes or images.

How It Works

Collage.js predictively places media just ahead of the visible viewport in the direction the user is moving, this gives a sense of infinity to the collage. Media is loaded into tag groups (in the example above, "popcorn media" is a tag group), you can then toggle these groups on and off to determine which group the collage should populate itself from.

Toggling tag groups allows you to do things like synchornizing the content of the collage to music, so that at key points of the song the collage content begins to change. You could also determine toggling based on the users position within the collage (going up may show different content than down).

The sense of infinity within the element is made possible by Big Surface and the collision detection to ensure media doesn't overlap is made possible by Giant Quadtree.

Getting Started

Download Collage.js, then refer to the documentation in the GitHub page for configuration options.

Collages Across the Web

Contributing

Collage.js is free under the Apache License 2.0. Your contributions are welcome at GitHub.

Collage.js was created by Ozan.