Schedule Matching

Animated Backgrounds

About Schedule Matching

Two circular schedules rotate independently, lock matching free arcs, and bring them together into a central appointment seal before returning to their original tracks. Featuring Two independently rotating schedule dials and Stable hatched occupied sectors, this effect supports live adjustments, instant previews, and reusable exports in Limot.

Features

Two independently rotating schedule dials
Stable hatched occupied sectors
Free arcs converge into an appointment seal
Continuous 14-second return cycle

Use cases

Website heroes and brand landing pages
Product demos and launch pages
Video intros and social media assets

Configuration

Synced with the controls

Appearance

ParameterCode keyCurrent value

Background colorbackgroundColor#111111

Line colorlineColor#f4f3ef

Scalescale100%

Motion

ParameterCode keyCurrent value

Speedspeed1

Integration

Ready to use in your project

JavaScript

Use the downloaded HTML file directly. It includes the canvas, styles, and animation script.

<!-- schedule-matching.html -->
Paste into your page to run

React

Add the JSX file to your project and import it as a component. Override settings with props.

import ScheduleMatching from "./ScheduleMatching.jsx";

<ScheduleMatching />

Vue

Add the Vue single-file component to your project, import it, and use it in your template.

import ScheduleMatching from "./ScheduleMatching.vue";

<ScheduleMatching />

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.