LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- infinity-loop.html -->
Paste into your page to runInfinity Loop
About Infinity Loop
Evenly spaced dots flow along a fine infinity-shaped track in a seamless, poster-inspired loop. Featuring Seamless infinity track and Evenly spaced flowing dots, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Seamless infinity track
- Evenly spaced flowing dots
- Stable deterministic animation
- High-DPI Canvas rendering
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#f4f3efDot color
dotColor#f4f3efForm
ParameterCode keyCurrent value
Dot count
dotCount10Accent count
accentCount8Dot size
dotSize3pxHalo size
haloSize12pxLine width
lineWidth1.25pxInner track count
innerTrackCount3Inner track opacity
innerTrackOpacity18%Track inset
trackInset6%Scale
scale72%Height
height78%Motion
ParameterCode keyCurrent value
Duration
duration12sDirection
directionforwardIntegration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import InfinityLoop from "./InfinityLoop.jsx";
<InfinityLoop />Add the Vue single-file component to your project, import it, and use it in your template.
import InfinityLoop from "./InfinityLoop.vue";
<InfinityLoop />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.