Brand motion

Logo animation · Into Range

Every marker, brought into range.

Seven grey markers glide into a target ring and turn green as they arrive: the moment a number comes back to where it should be. This is the web version, drawn live as SVG with the same geometry, easing and timing as the video masters.

  • 12 KB gzipped
  • No dependencies
  • Sharp at any size
  • Respects reduced motion

The full lockup takes the place of the wordmark row in the beoptimal.ca footer and plays once as it scrolls into view. Nothing to download: it is drawn by the browser.

Explore Optimal

  • Home
  • Longevity
  • Hormone health
  • Primary care
  • The Optimal Journal

Contact

Optimal Health Clinic630 Huronia Rd, Unit 5Barrie, ON L4N 0W5
Book an intro
© Optimal 2026Privacy Policy
Inline variant · 3.3 s · white to match the footer type

Use it

One script, one tag. It works in plain HTML, Preact, React or any CMS that allows a script.

Any page
<!-- once, in <head> -->
<script src="optimal-logo.js" defer></script>

<!-- wherever the logo goes -->
<optimal-logo theme="dark"></optimal-logo>
beoptimal.ca · SiteFooter.tsx
// src/index.tsx
import './vendor/optimal-logo.js'

// SiteFooter.tsx, inside .site-footer__wordmark (replaces <OptimalTextIcon />)
<optimal-logo
  theme="dark"
  style="--optimal-logo-dot:#fff; --optimal-logo-word:#fff; --optimal-logo-ring:#fff"
/>

// types (once, e.g. src/custom-elements.d.ts)
declare module 'preact' {
  namespace JSX {
    interface IntrinsicElements {
      'optimal-logo': JSX.HTMLAttributes<HTMLElement> & {
        variant?: 'inline' | 'stage'; theme?: 'light' | 'dark'
        play?: 'visible' | 'load' | 'manual'; speed?: number
      }
    }
  }
}
variant
inline (default) forms in place, for a header, footer or wordmark row. stage is the video choreography: the symbol forms large at the centre, then settles into the lockup.
theme
light (default) is the forest-green logo for cream and white surfaces. dark is the cream logo for forest-green surfaces.
play
visible (default) plays once when scrolled into view. load plays straight away. manual shows the finished logo until you call .play().
speed
Playback rate. 1 is the timing of the video masters.
--optimal-logo-*
Colour overrides: dot, word, ring, start, halo.
.play() .seek(s) .finish()
Replay, jump to a moment, or stop on the finished logo. Fires optimal-logo-done when it ends.
Reduced motion
Visitors who turn motion off in their phone or computer settings see the finished logo, still.