Ten morphing dot formations for loaders, AI states and hero moments. One file, about 5 KB gzipped, no dependencies.
Each one has its own silhouette, drawing style and motion. Click a snippet to copy it.
Drop in the script, add a canvas. Size it with CSS and colour it with color.
<canvas data-orb="torus"
style="width:200px;height:200px;color:#FF4400"
aria-hidden="true"></canvas>
<script src="https://cdn.jsdelivr.net/gh/ShazMoghaddam/orbs@1.0.3/orb.min.js" defer></script>
Or drive it from JavaScript.
const orb = new Orb(canvas, {
shape: 'sphere',
shapes: 'sphere,wave,ticks',
cycle: 4000
});
orb.morph('helix');
orb.next();
Loading states for AI features, and a letter that comes alive.
Hello world
Hover the o. The real letter stays in the page, so search engines and screen readers still see it.