Liquid Hero

Move your cursor over the photo and it ripples like water.

Your roles are listed in the corner, and a line under the current one fills up. When it’s full, the headline and the background photo change to the next role. You can swap in your own photos, roles and text. There’s a project counter, and it comes with Desktop, Tablet and Phone layouts. On slow devices you get the plain photo, people with reduced motion turned on get no animation, and nothing runs when the hero is off screen.

Features

• The photo ripples like water wherever your cursor moves.

• Without the cursor, the photo still drifts slightly. You can turn this down or off.

• There are three roles, with a line under the current one that fills up over time.

• When the line is full, the headline and background photo change to the next role, all at the same moment.

• The project counter rolls up to its number when the hero loads or comes into view.

• It includes Desktop, Tablet and Phone layouts.

• You can change the photos, role names, headline words, counter, colors and fonts in the settings panel.

• Animation stops when the hero is off screen.

Uses

• A personal portfolio for a designer, art director or photographer.

• The opening section of a creative studio or agency site.

• A freelancer homepage that shows more than one skill, like “Designer, Director, Artist”.

• A landing page for a model, actor or musician with strong portrait photos.

• A fashion or beauty brand page where the photo needs to stand out.

• A launch page for a creative course, workshop or event.