Join the waitlist

Animate your hero and keep it fast

Hero Mode draws your first screen the moment the page paints, then plays its entrance on desktop and tablet. Phones get a calm, still first screen.

Get Grinner free
See it live

Type

A setting on Group and Columns

Find it

Section settings, Performance & Mobile

Phones

Still on phones, by design

Speed

Nothing on the first screen starts hidden

Live demo

Seen at once, then animated.

This is the real Hero Mode and phone motion setting, running on this page.

Warm loaves on the counter by eight

Order before midnight and your sourdough is waiting at the shop door, still warm.

See the bread list
Find the shop

Settings    Hero Mode on     Stagger children 0.12     Mobile animations off on

What you can change

The settings worth knowing.

Three switches decide how a section behaves on the first screen and on phones.

Fresh flowers every Friday

Pick a bunch

Hero Mode

Drawn at first paint

The section shows straight away, then desktop and tablet play its entrance over the top.

Still on phones

Mobile animations off

Calm on phones

Stops this section’s entrances, hover, parallax, gradient flow, count-ups and card stacking on phones.

Tablet

Phone

Hide on mobile

Desktop and tablet only

Hides the section on phones while tablet and desktop still show it.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Give the hero an entrance

Add a section entrance or a text animation to your first-screen section.

3

Turn on Hero Mode

In the section’s Performance & Mobile settings, switch on Hero Mode, then publish.

Good to know

Fair questions.

Hero Mode is a Grinner setting on Group and Columns for your first screen. The section is drawn the moment the page paints, then plays its entrance on desktop and tablet, while phones get a calm, still first screen. Use it to animate a hero without hurting its loading speed.

No. It needs an entrance on the section or somewhere inside it.

That’s intended. In Hero Mode the entrance never plays on phones, so the first screen is quick and still.

Not ones with effects of their own. Switch it on for those too.

No. Hide on mobile is the only hide option here.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All scroll and motion features

Section entrances

Sections fade, slide or zoom in, one after another.

Text animations

Headings that type, decrypt, reveal or arrive word by word.

Image entrances and scroll effects

Images that reveal as they appear, or move and drift with the scroll.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version