Documentation
v1.8
GETTING STARTED
DYNAMIC ISLAND
Library
Button effects
Portal effect
The Portal Effect is an engaging, animated UI feature that creates the illusion of a glowing, swirling portal surrounding an element.
Preview
Quick Setup
data-portal
Required
Activates the Portal Effect on the element.
Advanced configuration
data-portal-rim-color
Optional
Defines the color of the portal's outer rim.
Default: #4a0e8c
data-portal-glow-color
Optional
Sets the glow color around the portal rim.
Default: #8a2be2
data-portal-swirl-color
Optional
Specifies the color of the swirling effect inside the portal.
Default: rgba(138, 43, 226, 0.2)
data-portal-bg-start
Optional
Defines the starting color for the portal's background gradient.
Default: rgba(26, 0, 42, 0.7)
data-portal-bg-end
Optional
Defines the ending color for the portal's background gradient.
Default: rgba(58, 0, 90, 0.7)
data-portal-rim-width
Optional
Specifies the thickness of the portal's outer rim.
Default: 5
data-portal-swirl-density
Optional
Controls the density of the swirling effect inside the portal.
Default: 20
data-portal-duration
Optional
Sets the animation duration for the portal's rotation and transformations (in seconds).
Default: 10
data-portal-size
Optional
Determines the maximum size of the portal when hovered (as a percentage of the element).
Default: 150%
data-portal-text-glow
Optional
specifies the glow color applied to the text when the portal is active.
Default: #ffffff
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours