LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- segmented-orbits.html -->
Paste into your page to runSegmented Orbits
About Segmented Orbits
Seven concentric tracks alternate between thick and thin strokes, rotating at varied speeds to create a restrained, layered composition. Featuring Seven-layer reference composition and Alternating thick and thin tracks, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Seven-layer reference composition
- Alternating thick and thin tracks
- Deterministic print texture
- Differential rotation and breathing pulses
Use cases
- Website heroes and brand landing pages
- Product demos and launch pages
- Video intros and social media assets
Configuration
Synced with the controlsSurface
ParameterCode keyCurrent value
Background color
backgroundColor#111111Line color
lineColor#f4f3efLine width
lineWidth2.5pxBand width
bandWidth10pxTexture amount
textureAmount28%Form
ParameterCode keyCurrent value
Scale
scale100%Motion
ParameterCode keyCurrent value
Rotation speed
rotationSpeed6°/sSpeed difference
speedDifference0.24Breathe amount
breatheAmount1.6%Breathe speed
breatheSpeed0.18Pulse amount
pulseAmount12%Integration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import SegmentedOrbits from "./SegmentedOrbits.jsx";
<SegmentedOrbits />Add the Vue single-file component to your project, import it, and use it in your template.
import SegmentedOrbits from "./SegmentedOrbits.vue";
<SegmentedOrbits />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.