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:
- wave moves up
- at peak, wave gets darker
- 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.
028 Comments
That’s so captivating and relaxing. Just like fire, I could watch it for ages.
Fire! Totally. I did all the development in blue but I definitely see the fire on the current orange.
Nice touch! I love the subtle fades.
Howl’s Moving Castle is one of my fave movies, btw :)
OK - I must be a total idiot - I don’t see anything…
relaxing, yea but somehow its kinda disturbing too. guess you have to let it work a little bit on you first.
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.
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…
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.
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.
lovely! now I just need a margarita…
Margarita? Surely you mean Orange Creamsicle? Or perhaps you’re referring to the origins of the wave?
I’m too much of a minimalist to appreciate it used like that :(
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.
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!
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!
Sam, I couldn’t figure out any way to implement this using just HTML (even experimented with the
canvaselement) never mind an “easy” way.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”
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.
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
Just punch the monkey, it’ll stop. ;)
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.
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.
Very cool, although it’s kind of distracting. Can you make it more subtle, just for me? thanks.
I love it. :D
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.
“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.
all your shores are belong to us. — i’m loving it.
I thought the page is still loading when i first saw that effect. Looks cool. Will be great to add more matching colors.