The Particle Logo Intro builds the business's logo out of thousands of particles when it comes into view. Hovering pushes the particles aside, and they settle back. It suits brand-led sites with a strong logo or a short, memorable name.
How to add it
- Click Add, open Effects, and drag Particle Logo Intro onto the page.
- Click Choose Logo in the toolbar and pick the source:
- Site logo: the logo in Business Info. It follows the logo when it changes. With no logo on file, the wordmark (or the business name) shows.
- Uploaded SVG or PNG: a logo on a transparent background works best.
- Typed wordmark: words drawn in the site's heading font.
- Click Save.
Design panel
- Particles: Density (Low, Medium or High) and Hover scatter (Off, Gentle or Strong).
- Fly-in: Duration in seconds, Direction (From the edges, From the center, or Left to right), Plays (Every visit or First visit only, remembered in the visitor's browser), and the Replay button with its text.
- Size: Height per screen size, Logo width, and a Background color.
- Wordmark: the Font (empty uses the heading font), Weight and Color (empty uses the text color of the section).
Good to know
- The real logo is in the page first. It shows until the particles are ready, for visitors who ask for less motion, after Pause motion, and when a logo from another website can't be read. Screen readers read the logo, not the particles.
- The particles take the logo's own colors, so the formed logo looks exactly like it.
- With hover scatter off, the crisp logo comes back once the particles have formed.
- Zeus can add it to brand-led sites, usually right after the home hero.