May differ slightly from the actual interface.
This setting applies to the animation
Default
May differ slightly from the actual interface.
Key Point:
Set the animation applied in the default (non-Hover) state. Controls the intensity of the always-on effect.
What this changes:
Because the motion is always visible, it has a significant impact on brand tone.
Adjustment tips:
Assuming extended viewing, use a gentle setting that does not impair readability or cause visual fatigue.
Settings
- Animation Preset selection: Select the effect pattern for the frame lines. Since this plays continuously, a setting with low visual load is recommended. Options include
none(off) and various always-on animation patterns.
Frame Animation plays continuously regardless of Hover state, which differs from Text Animation and Icon Animation. Because it begins immediately on page load, it effectively draws the user's eye — however, excessive effects can cause visual fatigue. If no icon frame is set, this setting has no effect (the DOM element itself is not output).
Overflow restriction:
Theneon-01andglow-01Frame Animations usebox-shadow, sooverflow: visibleis automatically applied to the frame element. Other animations remain atoverflow: hidden. Withoverflow: visible, the glow effect may extend beyond the button area, so pay attention to spacing with adjacent elements.
Transition
May differ slightly from the actual interface.
Key Point:
Set the playback speed and Loop Interval for the Frame Animation. Adjusts the presence of the decorative effect.
What this changes:
Because this is nearly always visible, it influences the impression of the entire page.
Adjustment tips:
Outside of sections where you want maximum attention, use a longer interval to keep focus on the main label.
Settings
Animation Duration (ms): Playback time per cycle. Too short feels busy, so start at a moderate value and adjust.Easing: Speed curve for the frame motion. A smooth curve helps reduce visual distraction.Loop Interval (ms): Interval before the next playback cycle. A longer interval helps maintain focus on the main content. A default value is pre-configured.
Frame Animation does not have Delay / Custom Value settings for its Transition. It is controlled with three parameters: Duration, Easing, and Loop Interval. Because the design philosophy differs from Text and Icon Animations (which are Hover-based), the Transition settings structure also differs.