Skip to content

Logo animation

The type logo animation, on real names.

The name types itself out after the mark appears. Every example below runs it once in plain CSS, with no video and no script. Free to preview on your own name.

Examples

6 logos, made by the engine.

  • Oak & Main Fashion brand · Wordmark with split color

  • Riverside Jewelry · Wordmark with outline

  • Summit Watches · Wordmark

  • Juniper Sneakers · Wordmark with cut letter

  • Bluebird Furniture · Wordmark

  • Northgate Florist · Wordmark with underline

How it works

Advice

The name types itself out after the mark appears. It runs for 2.2 seconds and then rests on the finished logo.

Good for a site header or social video where the name should be read first.

With reduced motion turned on, visitors see the finished logo, still. The animation is plain CSS, so it never blocks the page.

Questions

Plain answers

What files does the type animation come in?

The brand pack has it as an HTML page, an animated SVG and a GIF, ready for a website header, a slide or a social post.

Does it respect reduced motion settings?

Yes. The CSS only runs when the visitor has not asked for less motion; otherwise the logo appears finished.

How long is it?

2.2 seconds, played once. The timing comes from the engine, so the preview and the files match.

What is in the brand pack · Pricing and downloads

Check a logo for trademark conflicts (for example at uspto.gov) before you register or print it.