Doing the Wave

The other night Leslie and I watched Howl’s Moving Castle. (My Neighbor Totoro is still my favorite Miyazaki film even though I’m not so hot on the English versions of the opening and closing songs.)

Anyway, early in the movie there was a scene with Sophie standing on the shore of a lake. The artists totally nailed the waves lapping on the beach, a blue wave encroaching on tan sand, briefly becoming darker as the sand absorbed the wave, before receding and fading away.

I was amazed at how the animators so artistically communicated the natural movement in 3 simple steps:

  1. wave moves up
  2. at peak, wave gets darker
  3. wave moves down while fading out

Of course, being a total geek I spent the rest of the movie figuring out how one would program a similar effect. The next morning I cracked open Flash and set to work.

While hacking away I started thinking about waves as a representation of the steady, forward rhythm of time and realized that I had something thematically inline with this iteration of ShaunInman.com.

Coincidentally, I’ve been looking for a way to make the site a little more visually dynamic. I love the occasionally brilliant, more often dull, daily color and the fading and aging of older content but neither effect is immediate. These changes imply that time has passed—since a post was written or since the last time you visited—but don’t say, “time is passing right now.” The gentle wave motion in the header makes the suggestion without hitting you over the head with it like with an hourglass or a ticking clock might.

With any luck this addition will stay a complete redesign for another six months or so.

Previous
Fake Gruber
Next
Reggie Watts: Lost in the Options
Author
Shaun Inman
Posted
August 6th, 2007 at 6:48 pm
Categories
The Site
Design
Flash
Comments
028 (Now closed)

028 Comments

001

That’s so captivating and relaxing. Just like fire, I could watch it for ages.

Author
Isko
Posted
Aug 6th, 2007 7:11 pm
002

Fire! Totally. I did all the development in blue but I definitely see the fire on the current orange.

Author
Shaun Inman
Posted
Aug 6th, 2007 7:16 pm
003

Nice touch! I love the subtle fades.

Howl’s Moving Castle is one of my fave movies, btw :)

Author
Christopher Schmitt
Posted
Aug 6th, 2007 7:43 pm
004

OK - I must be a total idiot - I don’t see anything…

Author
Jim
Posted
Aug 6th, 2007 7:58 pm
005

relaxing, yea but somehow its kinda disturbing too. guess you have to let it work a little bit on you first.

Author
bob jarborfski
Posted
Aug 6th, 2007 8:02 pm
006

Christopher, I need to watch it again. I was obviously lost in thought.

Jim, if you don’t have the Flash 8 plugin (or greater) or JavaScript enabled you won’t see anything (but the existing HTML navigation).

Bob, if you’re the type to get sea-sick it might get you. Nothing some dramamine can’t cure.

Author
Shaun Inman
Posted
Aug 6th, 2007 8:16 pm
007

At first, it seemed like the background image was trying it’s darndest to make it to the top—the little background image that could.

Conceptually, I love it. I wish it were slower, though; the fade is a bit frenetic. But the idea behind this (and your ever shifting BG colors) is great. Do us a favor, though… no embedded wave sounds…

Author
Jesse Gardner
Posted
Aug 6th, 2007 8:36 pm
008

Depending on the random angle of the current and previous “waves” it can get a little frenetic—especially if you get two at the opposite ends of the extreme. I might make the algorithm a little smarter to reduce that when I have some time.

Wave sounds are mandatory but will remain viewer provided.

Author
Shaun Inman
Posted
Aug 6th, 2007 8:41 pm
009

Maybe a little shark could swim around in the footer of the page =)

Kidding aside, this is very awesome and I like the idea conceptually as well as how it came to life.

Author
Daniel Nicolas
Posted
Aug 6th, 2007 10:45 pm
010

lovely! now I just need a margarita…

Author
Josiah
Posted
Aug 6th, 2007 11:43 pm
011

Margarita? Surely you mean Orange Creamsicle? Or perhaps you’re referring to the origins of the wave?

Author
Shaun Inman
Posted
Aug 7th, 2007 12:00 am
012

I’m too much of a minimalist to appreciate it used like that :(

Author
Lee
Posted
Aug 7th, 2007 12:06 am
013

My only peeve with Flash: you can’t cmd+click to open in a new tab & you can’t triple click a text field to select the whole field!

Otherwise, this is a very soothing addition to the site.

Author
Pat
Posted
Aug 7th, 2007 12:06 am
014

I wonder how easily this would have been to achieve as a background element and keeping the HTML navigation elements a level higher?

Very nice effect though, great work!

Author
Sam Brown
Posted
Aug 7th, 2007 4:05 am
015

Nice idea and a good execution, but I have say I find it a little distracting pretty quickly. When I click into a post, I have to scroll down far enough to see the content, but also hide the header, which is a little annoying. It would be nice if there was an option to calm the sea!

Author
Peter
Posted
Aug 7th, 2007 9:50 am
016

Sam, I couldn’t figure out any way to implement this using just HTML (even experimented with the canvas element) never mind an “easy” way.

Author
Shaun Inman
Posted
Aug 7th, 2007 9:57 am
017

Very relaxing effect. I’m also a big fan of Miyazaki. Princess Mononoke is one of the most gorgeous films I’ve ever seen. His films are some of the most fluid anime out there, a lot less jerky than garbage like Shonen Jump.

And the Totoro song in English is awesome. I had that stuck in my head for so long…

“Totoro To-tor-o, Totoro To-tor-o”

Author
Rob Goodlatte
Posted
Aug 7th, 2007 10:04 am
018

I appreciate the curiosity and creative work that went into the effect, but golly is it ever distracting … I almost immediately scrolled down to hide the effect. If there were a way to turn it off, I would.

Author
Aliotsy
Posted
Aug 7th, 2007 11:13 am
019

Awesome. When I first saw it I was like, woah what is that thing? I concur to what Aliotsy said. It is a totally original awesome effect, but maybe some people will prefer it “hidden” maybe you can put an option for that? BTW, would you consider releasing it down the road =D

Author
Jonathan Solichin
Posted
Aug 7th, 2007 12:11 pm
020

Just punch the monkey, it’ll stop. ;)

Author
Shaun Inman
Posted
Aug 7th, 2007 5:43 pm
021

Shaun — I noticed a small visual bug that appears infrequently. When I click your logo to return to the main page, a large white square appears on the right through the first cycle of the animation. It goes away with the first rising wave.

I’m using Safari 2.0.4 with a window width just shy of 1280. It only seems to be reproducible about 1/3 of the time, but it seems to happen the most often when I move from a sub-page back to the home page by clicking on the logo.

Author
Rob Goodlatte
Posted
Aug 7th, 2007 6:07 pm
022

huge fan of Miyazaki here… but Howl’s honestly just didn’t do it for me. Beautiful film, of course, but the story just meandered on and on and on.

…and on.

Author
platypotamus
Posted
Aug 7th, 2007 10:40 pm
023

Very cool, although it’s kind of distracting. Can you make it more subtle, just for me? thanks.

Author
Andy
Posted
Aug 8th, 2007 3:00 pm
024

I love it. :D

Author
Jina Bolton
Posted
Aug 9th, 2007 12:47 am
025

The music is one of the best parts of the movie. Even if you don’t notice it, it is always there, always conveying the right feeling.

Author
kb
Posted
Aug 9th, 2007 10:16 am
026

“Very cool, although it’s kind of distracting. Can you make it more subtle, just for me? thanks.”

Yes it is cool although a little distracting… But i think i stared at it too long and got a little sea sick. :)

I don’t know, but i think using all the same colors as the page just 3 different shades would look pretty cool. The orange and white is a big contrast difference.

Still, very cool look.

Author
SEO
Posted
Aug 9th, 2007 6:12 pm
027

all your shores are belong to us. — i’m loving it.

Author
Manuel Martensen
Posted
Aug 10th, 2007 5:24 pm
028

I thought the page is still loading when i first saw that effect. Looks cool. Will be great to add more matching colors.

Author
Zeb
Posted
Aug 19th, 2007 10:59 am