Sphere Sketch

1,900 italic serif letters and printer's marks wrapped around a turning globe, inked in the theme foreground with the side facing you picked out in the primary colour. Hover to spin faster, click to shake letters off; they tumble away in the primary colour and regrow. Colours and the typeface come from the theme, so it follows light and dark mode and the palette picker. It fills its positioned parent, pauses when off screen and renders a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add sphere-sketch

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/sphere-sketch.tsx.
3. Paste the code.

Usage

import { SphereSketch } from "@/components/ui/sphere-sketch";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <SphereSketch />
    </div>
  );
}

Props