How can I code this awesome glowing border effect with CSS and JavaScript?

Question

This form has an awesome effect when you focus on one of its fields:

http://labs.dragoninteractive.com/panel/demo/

Any clues on how I can recreate this? Here are a few of my observations:

• I see they have a giant colorful image here: http://labs.dragoninteractive.com/panel/demo/lib/img/form/map/rmap.jpg
• When you focus on the form the color seems to fade in (and fades away on blur)
• I don't know how they are getting the soft edge (glow) using the source image they have
• I don't know how they are panning the colorful image across the border infinitely
• The markup seems pretty messy; ideally I'd want a simpler solution than what they have
• This one is a clone made all with CSS3, but I don't like how the outer glow doesn't stay uniform

Answer 1

The color changing action occurs as the position of rmap.jpg (the very large colorful image) is animated. There is an .png with alpha-transparencies which acts as matte over rmap.jpg, creating the nice soft color transition. The animation is handled using jQuery.

Peter Schmalfeldt created a demo which is also downloadable.