Globe

An interactive rotating globe component.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/globe.json"

Install Manually

Install the dependencies

npm
pnpm
bun
yarn
npm install cobe vue-use-spring

Copy and paste the following code

Globe.vue

API

Prop NameTypeDefaultDescription
classstring""Additional CSS classes for custom styling.
configCOBEOptionsN/AConfiguration object for the globe, following COBE(https://cobe.vercel.app/docs/api) library options.
massnumber1Mass parameter for the spring animation controlling rotation inertia.
tensionnumber280Tension parameter for the spring animation, affecting responsiveness.
frictionnumber100Friction parameter for the spring animation, affecting damping.
precisionnumber0.001Precision parameter for the spring animation calculations.

Features

  • Interactive 3D Globe: Provides an interactive 3D globe visualization that users can rotate with mouse or touch interactions.
  • Customizable Markers: Display markers on the globe at specified locations with customizable sizes.
  • Smooth Animations: Utilizes physics-based spring animations for smooth and responsive globe rotations.
  • Configurable Appearance: Customize the globe's appearance and behavior through the config prop using COBE library options.
  • Responsive Design: Automatically adjusts to different screen sizes and resolutions.

Credits

  • Built using the cobe library for WebGL globe visualization.
  • Ported from Magic UI.
Github Globe
A 3D interactive globe visualization with customizable arcs, points, and animation options inspired from Github.
Icon Cloud
An interactive 3D tag cloud component