Kinetic Text Globe

Bold display type wraps around a high contrast sphere that rotates in place.

Components / Kinetic Text Globe

Feedbackmotiontexttypographysphere

Bold display type wraps around a rotating, high contrast sphere.

Preview

Loading preview…

Usage

Bold display type wraps around a high contrast sphere that rotates in place.

<KineticTextGlobe>HELLO</KineticTextGlobe>
<KineticTextGlobe direction="counterclockwise" pauseOnHover durationMs={24000}>
  KEEP MOVING
</KineticTextGlobe>

Files

components/steez/KineticTextGlobe.tsxcomponent

components/steez/KineticTextGlobe.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { KineticTextGlobe } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/kinetic-text-globe.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { KineticTextGlobe } from "<project-root>/components/steez/KineticTextGlobe";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/kinetic-text-globe.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Kinetic Text Ring

A looping, curved type ring built with SVG and CSS motion.

Kinetic Text Ramp

Oversized type scrolls across a receding perspective plane with a hard shadow edge.

Kinetic Glyph

Nested contour animation for a letter, number, or icon with a soft displacement ripple.