Alchemy Mindworks

Depending upon who you listen to, there may be up to a billion people connected to the world wide web as you read this. Don’t get too excited – they have in excess of 100 million web pages to look at, according to a 2008 report by Domain Tools. If yours in one of them, you’ll need something more than a clever domain of your own to attract the attention of passers-by in cyberspace.

In creating the effects for the Text Effects #4 plugin, we sought to build animations that would catch people’s attention in the few seconds that most of them spend deciding whether to read any further in a web page they’ve just arrived at. This is something of a tightrope act – animated headlines need to be radical enough to be noticed, but not sufficiently strange to be off-putting or more interesting than the pages they’re part of.

One of our favorite object lessons of web page design is a popular Java applet that creates an interactive pattern of puddles upon the surface of a photograph, perturbed by a passing mouse cursor. Put one at the top of your web page and people will stop by to play with it. In fact, it’s so engaging that few of them are likely go any further.

A few words of text that can both convey meaning and perform as a design element at the web page it’s part of can be a powerful page element. Making this happen requires a degree of stealth.

The effects of the Text Effects #4 plugin were designed to be suitably stealthy – eye-catching, and yet no so much so as to have visitors to your pages look at them to the exclusion of all else. A number of them are periodic – they display conventional text which animates briefly, and then returns to being static. It’s an effective trick – configured to get up and dance once every five seconds or so, such an animation will attract attention without being obvious about its objectives.

Several of the effects available in Text Effects #4 are distortion functions – rather than just painting something pretty within your text, they’ll actually warp the text itself. This is cool when it’s done well – because most of the time, it’s done badly. The effects in Text Effects #4 have been carefully engineered to look like serious CGI, and they don’t show the rough edges, funky shading and erratic movement of most attempts at text animation.

They also look decidedly unlike Flash effects – most web users have seen buckets of these things, and they know intuitively when they’re looking at another attempt to dazzle them with graphics in the absence of genuine content.

The Ripple and Pinch effects of Text Effects #4 are laudably subtle – they perform relatively little text distortion, but it’s enough to get just about anyone’s attention.

Several of the effects, such as Breaker and Singularity, are based on vortex animations, wherein the text – or part of it – is twisted into a whirlpool and then released to unwind itself. A common enough animation, this effect is usually implemented using relatively crude pixel displacements, resulting in the whole works looking suspiciously like a medium-resolution Lego sculpture. Needless to say, the one in Text Effects #4 doesn’t.

We did include some animated text effects as well – Hyperspace is a house favorite. It began as a much more complex effect which was to simulate the albeit theoretical reality of traveling at relativistic speeds. At speeds approaching the speed of light, point sources of light would elongate and light would Doppler shift toward the blue end the spectrum when it’s approached, and toward the red end of the spectrum as it’s moved away from – for the same reason that a train’s horn appears to change pitch as the train gets closer and then departs.

While cool in theory, this didn’t look all that slick when it was rendered in the limited number of pixels available in a text fill. The actual implementation of Hyperspace isn’t anywhere near as scientifically accurate – we’re pretty sure a few physicists will explode when they see it – but it looks excellent. So do exploding physicists, for that matter.

Phasers on Stun rocks too – no physicists were harmed during the making of this effect.

The Background Hyperspace effect was used to create one of the banners for the Text Effects #4 plugin – this animation was created using the plugin and the Overlay effect in GIF Construction Set Professional 3.

The Gumdrops effect harkens somewhat less to science fiction – it can look like a turgid oily surface or like a waving flag behind the text it’s part of, depending upon how you configure it and set up its colors. We used a beta version of the plugin to build a banner ad with this effect for A Prelude to Dark Ages, the new music CD from ancientmusick.com, and we received considerably more e-mail about the banner than about the CD.

Creating banner ads is something of an art – confronted with a medium having slightly less bandwidth than a bottle cap, designers of these things will want to come up with ways to get viewers of them sufficiently curious to click on them.

The animations created by the Text Effects #4 plugin make ideal elements in commercial banners, of course, for the same reason that they’ll attract attention at a web page. They’re quick, unexpected and they haven’t been seen before. We’ve used a lot of them since the plugin was initially available in betas to build into more complex Animation Workshop projects.

The Text Effects #4 plugin stretches the envelope of typography to a considerable degree – it certainly stretched the minds of its designers while it was under development. One day, we’re presumably going to want to come up with Text Effects #5 – the envelope should be stretched well into a different plane of space-time when that one rolls out of betas.