Kelly Stevens

Ripple. Ripple is a thought board and inspiration aggregator. I designed its animations to simulate the ripple of waves across water (or thoughts across the mind). Users are able to collect bookmarks and aphorisms that inpsire them.

The rippling animation is triggered as a user scrolls through their collection. I wanted to visualize the way a user interacts with a text-based site, and to energize the familiar experience of scrolling down a page. The animated ripples are SVG paths which are generated dynamically, using vector geometry converted into Bezier curves.

Ripple is a single-page app built on Backbone.js, with Node.js server and MongoDB on the back end.

textCell. Animation that simulates cellularity and gravitation, to accompany science essay. textCell.js extracts and parses text from a page, then reanimates it using Canvas. My goal was to give an unexpected experience by animating the un-animatible.

Wikiphilia. I created Wikiphilia as a concept/prototype for a new type of user interface for a wiki. It is designed with the wiki-junkie in mind. Its purpose is to display two articles, a user’s article viewing history, as well as article editing tools on a single screen. Thus a user would not need to open a slew of new tabs in their browser. A user can toggle between the articles that are open, and edit them if they decide.

Simon, a Simon Says memory game, was my first experiment in Javascript. The goal of this project was to fiendishly reinvent Simon Says and to implement a complex game logic. Each time a player loads the game, a randomly tiled game board is generated, with seven tiles of course being more difficult than the standard four. As a player progresses, by remembering and pressing tiles, they build up a soundtrack from a library of techno samples.

My Github

About Kelly

Kelly Stevens is a web developer who approaches code and web design as a sculptural structure. He believes in the unity of aesthetic and technical thinking -- design is about being able to create a sound structure based on a logical system. His current passion is developing enchanting and unexpected interactive web experiences.

About this site

This site is powered by my script, oom.js, which in turn leverages Three.js and CSS transforms. My goal for oom.js was to create an immersive, fully interactive 3D experience. Instead of shunting webGL into a separate box, oom.js makes the entire DOM/page a navigable 3D space.