Web Demos

Daft Cubes

My first web demo on the site. 3D blocks in a qbert-like arrangement, with text that crawls along thier surfaces. The lyrics to Daft Punk's "Technologic" are used as an example, a text box allows you to run your own text across. Relies heavily on precise timing, but created the basis for future 3D DOM-based fun.

Chromium-based browsers, Firefox 57+

Launch Demo >

Tiny House

Further expanding on the DOM-based 3D cubes, this demo was an exercise to see if it was possible to create complex shapes using the same basic system. Dragging or swiping left and right allow you to rotate the house as smoke puffs billow from the chimney.

Chromium-based browsers, Firefox 55+

[Touchscreen Support ✔]

Launch Demo >

Holo Cube Navigation

Utilizing the same DOM-based 3d cubes as the previous demos, but used for a more practical application. Scroll, Drag or Swipe to navigate the different options. Note that the links are placeholders.

Chromium-based browsers, Firefox (partial), Edge (EdgeHTML)

[Touchscreen Support ✔]

Launch Demo >

3D Flip Marquee

Inspired by an Ok Go music video, this demo provides an interactive flip marquee. Enter text in the box to display it on the marquee, or click on the tiles to flip them manually. Features a few random animations for displaying text. Supports all the main ASCII characters, and yes, I did have to manually define my own characters.

Chromium-based browsers, Firefox (partial), Edge (EdgeHTML partial)

Launch Demo >

Traincar Navigation

In an attempt to combine the technology of the Tiny House demo and the functionality of the Holo Cube demo, this demo attempts to create complex shapes with the same DOM-based 3D cubes and use them to create a novel landing page for a website. I hope you like trains.

Chromium-based browsers, Firefox, Edge (EdgeHTML partial)

[Touchscreen Support ✔]

Launch Demo >

Parallax Background

After seeing a site with a novel 3D parallax effect, I couldn't resist but try my hand at it using the same 3D approach I've become familiar with. Mostly CSS, just a few lines of js.

Chromium-based browsers, Firefox, Edge (EdgeHTML partial)

Launch Demo >

Jump'N'Shoot

By far the most fun and challenging demo to develop, Jump'N'Shoot is a bookmarklet that allows you to load a little spaceman into any page. Equipped with a laser blaster and a space suit, turn any webpage into a side-scrolling destruction fest by running across, jumping on, and shooting page elements. The physics, movement, collisions, etc. were written entirely by hand!

Chromium-based browsers, Firefox, Edge (EdgeHTML), IE11

Launch Demo >

Breakdown!

A fun little bookmarklet that causes the current page to fall apart when activated. Uses Matter.js for physics.

Chromium-based browsers, Firefox

Launch Demo >