⧉ Info View Source Download Sample

Sup tooltip

Yeah thats how we roll..

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

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

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

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