LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- orbital-text-rings.html -->
Paste into your page to runOrbital Text Rings
About Orbital Text Rings
Orbital text animation with sparse circular typography tracks counter-rotating around a wireframe globe. Blinking characters create an animated editorial-poster composition. Featuring Sparse concentric text tracks and Counter-rotating adjacent rings, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Sparse concentric text tracks
- Counter-rotating adjacent rings
- Central wireframe globe
- Seeded character blinking
Use cases
- Website heroes and brand landing pages
- Product demos and launch pages
- Video intros and social media assets
Configuration
Synced with the controlsBackground
ParameterCode keyCurrent value
Background color
backgroundColor#111111Text color
textColor#f4f3efLine color
lineColor#f4f3efOpacity
opacity0.94Content
ParameterCode keyCurrent value
Text
textWORLD HEALTH · SHARED RESPONSIBILITY · HEALTHY EQUITY · CLIMATE CHANGE · GLOBALIZATIONFont size
fontSize15pxFont growth
fontGrowth0.8pxLetter spacing
letterSpacing4pxGeometry
ParameterCode keyCurrent value
Horizontal position
x50%Vertical position
y53%Ring count
ringCount5Inner radius
innerRadius118pxRing gap
ringGap54pxArc coverage
arcCoverage0.64Line width
lineWidth1pxMotion
ParameterCode keyCurrent value
Speed
speed2.2°/sSpeed difference
speedDifference0.08Reverse
reverseOffCharacter blinking
blinkEnabledOnBlink count
blinkCount5Blink interval
blinkInterval1600msBlink duration
blinkDuration520msGlobe
ParameterCode keyCurrent value
Show globe
showGlobeOnGlobe radius
globeRadius52pxGlobe speed
globeSpeed5°/sGlobe lines
globeLines4Integration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import OrbitalTextRings from "./OrbitalTextRings.jsx";
<OrbitalTextRings />Add the Vue single-file component to your project, import it, and use it in your template.
import OrbitalTextRings from "./OrbitalTextRings.vue";
<OrbitalTextRings />Exports include your current settings. React and Vue components also accept the configuration keys below as props.
Customize in real time, copy standalone code, or export MP4, GIF, and PNG with optional transparency.