This attribute activates the floating island, enabling all associated animations and interactions.

Marks a section within the island as content that only appears when the island is expanded. To use it, add the data-expanded-content attribute to a div inside your main island div. When the island expands, this content becomes visible and interactive, providing additional information or controls only accessible in the expanded view. The attribute initially keeps the content hidden with opacity: 0 and visibility: hidden, but once expanded, the area smoothly fades in.

Sets the initial position of the island on the screen, allowing flexible placement based on user preference.

Default: top-center

Determines the margin between the island and the screen edges, helping you adjust its distance from the viewport’s sides.

Default: 20

Sets the breakpoint in pixels for switching to a mobile layout, optimizing the island's appearance on smaller screens.

Default: 768

Adjusts the width of the island when expanded, creating a more prominent display.

Default: 0.2

Controls the height increase when the island expands, offering more vertical space for additional content.

Default: 0.5

Sets the expansion height specifically for mobile devices, allowing you to customize for smaller screens.

Specifies the transition duration for the overlay effect when the island is expanded, creating a smooth background dimming effect.

Default: 0.5

Controls the opacity of the background overlay during expansion, increasing or reducing the dim effect.

Default: 0.5

Sets the blur effect for the background overlay, creating a subtle depth effect.

Default: 5

Defines the color of the progress circle on the island, allowing brand alignment or design flexibility.

Sets the color of the percentage text displayed as the user scrolls, ensuring visibility and consistency with other UI elements.