Spherical Cow Demo

What you're seeing

The floating cow logo follows your cursor with a slow ease. After 5 seconds of inactivity it drifts to the bottom-center and shimmers gold. Click it to open the fullscreen menu. It repels from all links and buttons on the page.

Script tag usage

<script>
var myConfig = {
  menu: {
    brand: 'My Brand',
    columns: [
      {
        sections: [
          { label: 'Pages', links: [
            { title: 'Home', href: '/' },
            { title: 'About', href: '/about' }
          ]}
        ],
        tagline: 'Built with Spherical Cow'
      },
      {
        sections: [
          { label: 'More', links: [
            { title: 'Blog', href: '/blog' },
            { title: 'Contact', href: '/contact' }
          ]}
        ],
        showClose: true
      }
    ]
  }
};
</script>
<script src="spherical-cow.js" data-config="myConfig"></script>

ES module usage

import { SphericalCow } from './spherical-cow.js';

SphericalCow.init({
  logo: '<svg>...</svg>',  // optional custom SVG
  idle: 5000,                    // ms before idle drift
  menu: { brand: 'My Site', columns: [...] },
  nav: [                         // optional prev/next pages
    { path: '/page1', href: '/page1', title: 'Page One' },
    { path: '/page2', href: '/page2', title: 'Page Two' },
  ]
});

Features

Mouse-following with slow lerp easing. Idle drift to bottom-center of viewport. Gold shimmer animation on idle. GSAP-powered fullscreen clip-path menu. Virtual fencing (repels from all clickable elements). Click passthrough when overlapping interactive elements. Optional sequential prev/next page navigation. Nav glow when visible (mutually exclusive with cow shimmer). Dark mode support. Responsive.

Try hovering these links

The cow will dodge: Link One · Link Two · Link Three

Another link down here to test virtual fencing.