flukeout luke pacholski's design & illustration

This thing grabs a Tweet that has a specific animation-based keyword in it, then animates it according to that word. The cool part about making this was figuring out how to do the animations letter-by-letter. What I do is first render the message in an invisible element and wrap a tag around each letter. That lets me figure out what the coordinates of each letter should be when animating. Have a look..

Check it out! Works in Chrome/Safari only!

Tired of calling your users by their boring usernames? Let them know how you really feel with this plugin. buddyBaller generates a two-word name for your user, supportive or condescending, depending on what you set the “tone” attribute to when generating the name.

Suggested Usage

Want to use it?

Here is the Git Repo. Just add buddyballer-1.0.js to your site, then invoke it with a selector like here. You can generate new names by calling the newname() method. By default, the tone is set to “good” – but you can pass in “bad” as a parameter.

Affectionately dubbed “Lando” on our team here at Vibes, this app first started out as a mobile landing page builder, and later expanded to support the new iOS Passbook format. Through an iterative process that included lots of internal user feedback and observation, I designed the front-end alongside the UX Director and helped implement the front-end code.

The Overview Page

This page shows all recently edited and created pages and offers for the current user. Our Client Services team here manages pages and offers for a lot of our clients, so it was important for them to see the most recent stuff they worked on.

Items are organized by companies, and users can create folders within a company to keep things organized.

The Page Builder

This is the WYSIWYG editor for building mobile pages. Users have access to a variety of editable components that they can stack and rearrange vertically on a mobile page.

The Builder in Action

Here you can see how easy it is to build and publish the page above with this tool.

On-screen is one of the components of the Catapult platform I’ve been working on at Vibes. It’s a little difficult to explain exactly what it does, but think of it as a Keynote-like presentation builder for interactive content for a Jumbotron!

It lets you design content in the form of decks and hook them up to Twitter or Text content to display messages, photos or run votes. Decks can have multiple slides that contain animated interactive content. Decks are rendered in a browser using HTM, CSS & Javascript, and can be displayed pretty much on any screen at any resolution.

I designed the entire front-end, wrote most of the HTML & CSS and helped with a lot of the front end Javascript too (especially for the widgets that you can use to display content in the decks).

The Dashboard

This is the overview that shows you current campaigns, and which feeds are currently live. From this view you can launch a feed to start showing content, or get access to the remote controller for live feeds.

Campaign Overview

This is the overview page for a campaign that ran during the Sugar Bowl in 2012. It included two decks: a deck where the audience voted on which team they thought would win and a text-to-screen deck that displayed text messages and tweets sent in by the crowd.

The Twitter and Text settings for messaging and the vote are configured on this page. Once they’re set up, they’re made available to the deck editor.

The Deck Editor

This is probably the coolest part of On-Screen. It’s like a web-based keynote (or Powerpoint) editor that lets you create the visuals. This is the Sugar Bowl vote race. Each component of the deck is individually configurable.

Each of the two football players is linked to a vote option and moves across the screen depending on how many votes that option has received. The second slide in the deck shows the team with the most votes when the vote ends.

The Remote Controller

The Remote Controller lets you control what’s displayed on a screen. You can change decks, slides, and control voting. Once a feed is running somewhere, you can control it from any browser.

Here’s how a vote looks

Here’s a quick and dirty preview of how a live vote might look in progress. Players move left and right depending on the vote counts. Each player is a GIF sprite. The field background is a looping CSS animation. At any time, you can use the Remote Controller to switch to the Winner slide to display the results.

I was learning how the Javascript behind multi-touch gestures works on the iPhone and created the Mystical Door of Random GIF. Pinch open the door to see the GIF and shake your phone to load up a new one. It can’t get a new one when you’re watching, so close the door first.

It’s grabbing from a list of 20 or so hand-curated GIFS.

On your iPhone? Try it out! Or scan the QR code above.