Interaction
In the catalog, enter the preview to play and leave to stop. Repetition follows the loop setting. In detail, loading effects start automatically; the toolbar pauses and resumes their current clocks. The detail toolbar pauses and resumes the same forward cycle without a reverse return.
States
[data-part="face"] / rotate: 0 → -360; [data-part="dot0"] / scale: 1 → 1 (41 keyframes); [data-part="dot1"] / scale: 1 → 1 (41 keyframes); [data-part="root"] / x: 0 → 0; [data-part="root"] / y: 0 → 0; [data-part="root"] / scale: 1 → 1.
Timing
Total duration 3000 ms; trigger delay 0 ms; cubic-bezier(0, 0, 1, 1). Each track follows its configured start / span and times.
Enter and exit
Rotate at a constant speed while both dots pulse together. Hover deepens the shadow over 300 ms. Pause holds rotation and dot scale; Play resumes the same cycle. Repeat the complete rotation and pulse cycle continuously.
Repeated input and interruption
Pause preserves cycle progress; Play resumes it. Parameter edits restart a complete cycle using the new configuration without queuing.
Reduced motion
Follow prefers-reduced-motion: skip delay, loops and animation and show the target state immediately. Preview speed is observation state and is never saved in the configuration.
Default configuration
These values come from the maintained default configuration. Editor drafts and exported changes can differ.
{
"schemaVersion": 2,
"recipeId": "yin-yang",
"durationMs": 3000,
"delayMs": 0,
"easing": [
0,
0,
1,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": true,
"interruption": "retarget",
"tracks": [
{
"part": "face",
"property": "rotate",
"values": [
0,
-360
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "dot0",
"property": "scale",
"values": [
1,
1.000483,
1.001972,
1.004521,
1.008166,
1.012916,
1.01874,
1.025549,
1.033188,
1.041434,
1.05,
1.058566,
1.066812,
1.074451,
1.08126,
1.087084,
1.091834,
1.095479,
1.098028,
1.099517,
1.1,
1.099517,
1.098028,
1.095479,
1.091834,
1.087084,
1.08126,
1.074451,
1.066812,
1.058566,
1.05,
1.041434,
1.033188,
1.025549,
1.01874,
1.012916,
1.008166,
1.004521,
1.001972,
1.000483,
1
],
"times": [
0,
0.025,
0.05,
0.075,
0.1,
0.125,
0.15,
0.175,
0.2,
0.225,
0.25,
0.275,
0.3,
0.325,
0.35,
0.375,
0.4,
0.425,
0.45,
0.475,
0.5,
0.525,
0.55,
0.575,
0.6,
0.625,
0.65,
0.675,
0.7,
0.725,
0.75,
0.775,
0.8,
0.825,
0.85,
0.875,
0.9,
0.925,
0.95,
0.975,
1
],
"start": 0,
"span": 1
},
{
"part": "dot1",
"property": "scale",
"values": [
1,
1.000483,
1.001972,
1.004521,
1.008166,
1.012916,
1.01874,
1.025549,
1.033188,
1.041434,
1.05,
1.058566,
1.066812,
1.074451,
1.08126,
1.087084,
1.091834,
1.095479,
1.098028,
1.099517,
1.1,
1.099517,
1.098028,
1.095479,
1.091834,
1.087084,
1.08126,
1.074451,
1.066812,
1.058566,
1.05,
1.041434,
1.033188,
1.025549,
1.01874,
1.012916,
1.008166,
1.004521,
1.001972,
1.000483,
1
],
"times": [
0,
0.025,
0.05,
0.075,
0.1,
0.125,
0.15,
0.175,
0.2,
0.225,
0.25,
0.275,
0.3,
0.325,
0.35,
0.375,
0.4,
0.425,
0.45,
0.475,
0.5,
0.525,
0.55,
0.575,
0.6,
0.625,
0.65,
0.675,
0.7,
0.725,
0.75,
0.775,
0.8,
0.825,
0.85,
0.875,
0.9,
0.925,
0.95,
0.975,
1
],
"start": 0,
"span": 1
}
]
}Source code and reuse
The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.
Using it in your own project
Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.
Catalog provenance label: Uiverse.io · fthisilak. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.