WebGL Globe
A WebGL sphere of news stories. Open stories by clicking. When you find the video, hit
- 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
Drag n Drop Photos
Drag files in from your machine, get an instant preview
- HTML5 Drag 'n Drop
- FileReader API