⧉ Info View Source Download Sample

Sup tooltip

Yeah thats how we roll..

Close
WebGL Globe

A WebGL sphere of news stories. Open stories by clicking. When you find the video, hit p to play.

  • WebGL
  • CSS3 2D transforms
  • CSS3 transitions
  • Webm video
ASCII Art

Synchronized ASCII art video via WebSockets. All current viewers see the same video frame at the same time. Move your mouse over the video to change the color.

  • HTML5 WebSockets
Orientation Physics

Break up a video into lots of boxes and move them around by titling your machine.

  • Canvas
  • Device Orientation
  • Video
SVG Puzzle

Solve the puzzle! Hover over the correct area to place tiles, click to rotate.

  • SVG
  • SVG Transforms
Notification Time!

Schedule a countdown to a notification, like an alarm clock.

  • Desktop Notifications
  • Date.js
Video PiP

Use Picture-in-picture to swap between two video sources while enjoying a color glow effect. Custom pause, mute and progress bar.

  • HTML5 video
  • Media element API
  • Canvas
Geolocation

Peruse local job listings and envision your commute.

  • Geolocation
  • Google Base API
  • Google Maps API
Video Cube

Build a cube of ASCII reflecting a video in realtime and reposition the view.

  • HTML5 video
  • Canvas
  • CSS 2D Transforms
  • CSS3 mask image
Newspaper Columns

A newspaper-like layout provided by CSS3. Adjust the sliders to understand the styles.

  • CSS3 Columns
  • input type=range
Podcast Player

Load in podcast feeds dynamically, then listen to episodes in a custom player UI. The player UI is a semi-opaque skin on top of the background color.

  • HTML5 audio (mp3)
  • Google Feed API
Slider Carousel

Image gallery in a carousel UI. Page through the images quickly, and click to view full size.

  • CSS 2D Transforms
  • CSS 3D Transforms
  • input type=range
Slideshow

A minimal version of the HTML5 Slide Deck, ready for you to adapt to your uses.

  • CSS3 Transitions
  • CSS3 Gradients
  • CSS3 2D Transforms
Page Flip

An animated page flip of real HTML content.

  • CSS3 2D transforms
  • CSS3 animation
Drag n Drop Photos

Drag files in from your machine, get an instant preview

  • HTML5 Drag 'n Drop
  • FileReader API
View more