jellyfab/io.github.iprashantpanwar.jellyfab/JellyFab

JellyFab

@Composable

fun JellyFab(modifier: Modifier = Modifier, state: JellyFabState = rememberJellyFabState(), fabSize: Dp = 72.dp, miniFabSize: Dp = 48.dp, fabColor: Color = Color(0xFFFF7F86), secondLayerFabColor: Color = Color(0xFF6BA5FF), primaryItems: List<JellyFabItem>, secondaryItems: List<JellyFabItem> = emptyList(), showScrim: Boolean = true, config: JellyFabConfig = JellyFabConfig())

Main JellyFab entry point — renders a floating action button with an expandable, jelly-like motion. The main FAB animates with a soft blob effect, primary actions fan out along an arc, and an optional secondary group can chain outward from the first primary action.

Parameters

modifier

Layout modifier for positioning the entire FAB group.

state

External state controller for expand/collapse behavior. Use rememberJellyFabState to create and hoist this state.

fabSize

Diameter of the main (center) FAB. Default is 72.dp which matches Material 3 large FAB sizing.

miniFabSize

Diameter of the small mini-FABs used in primary and secondary layers. Usually 48.dp.

fabColor

Background color of:

The main FAB
Primary layer FABs (except the first one if secondary layer is enabled)

secondLayerFabColor

Background color used for FABs in the secondary layer, including the first primary FAB when secondaryItems is not empty.

primaryItems

The list of actions forming the first fan-out arc around the main FAB. Each JellyFabItem provides an icon + click action.

secondaryItems

Optional list of actions that expand outward in a chained, cascading motion from the first primary FAB. If empty, JellyFab behaves as a single-layer radial menu.

showScrim

When true, a subtle background scrim is shown behind the JellyFab while expanded, helping bring focus to the action menu and visually dimming the underlying UI.

config

Fine-grained control for animation timing, bounce physics, jelly squishiness, spacing, and layer layout geometry.

Example usage:

val state = rememberJellyFabState()
JellyFab(
    state = state,
    primaryItems = listOf(...),
    secondaryItems = listOf(...)
)