5 ways to make a Framer hero section feel alive

A hero section has a few seconds to make a visitor stay. Motion gets attention, but too much motion makes a site feel busy. Here are five ways to add motion that has a purpose. Pick one or two.

1. Show the product working

The best motion shows what your product does. A demo that plays by itself shows a cursor that clicks and types in your app. Visitors understand the product without a click.

Use Autodemo, or read how to show a product demo without a video.

2. Light that follows the cursor

Light behind your headline makes the first screen feel like a stage. When the light follows the cursor, visitors play with it.

Use Backlight Rays, or read how to add light rays behind text.

3. Bring the text in

Framer has an Appear effect. Select the headline, add the effect, and set it to move up a little and fade in. Give the buttons a short delay, so they come in after the headline. Keep the movement small, about 20 pixels.

4. Let the photo move

A photo where one part moves, such as water or clouds, feels alive but stays calm. Today you can use the Video component in Framer: turn on autoplay and loop, and turn off the sound. Keep the clip short, so it loads fast.

Living photo, the next component from vicsek studio, does this with a still photo instead of a video.

5. React to the pointer

Buttons and cards that react when the pointer is over them feel ready to use. In Framer, add a Hover state to a component: lift it by a few pixels or make the color a little brighter.

Keep it calm

• Move one thing at a time. Two moving things in the same view fight for attention.
• Make sure that the page works without the motion. Visitors who turn on reduced motion must still see your headline and buttons.
• Test on a phone. Phones have no cursor, so effects that follow the cursor need a fallback.

Questions