Key Parameters:

Features:

• Auto-scroll every 4 seconds with infinite loop
• Spring-animated 3D effect (translation, scale, rotationY, alpha)
• Blur on non-centered cards for depth perception
• Gradient highlight on a specific word in the title
• Decorative radial background (purple + blue glows)
• Previous/Next navigation buttons

📸 MultiGesture Photo Grid

A photo grid with multi-selection support, long-press handling, and selection constraints. Perfect for image galleries with selection limits.

val photos = List(40) { ImageModel(image = "https://picsum.photos/id/${it}/600/600") }
val viewModel = remember { PhotoGridViewModel() }

LaunchedEffect(Unit) {
    viewModel.setEvent(
        PhotoGridEvents.OnStart(
            lockedImage = null,
            imageModelList = photos,
            selectedImage = emptyList(),
            selectionConstraints = SelectionConstraints(min = 1, max = 50),
        )
    )
}

PhotoGridMultiSelect(
    imageModelList = photos,
    selectedList = viewModel.uiState.value.selectedImage,
    onImageLongClick = { imageModel, index ->
        // Handle long press (e.g., show zoom modal)
    },
    onSelectionChange = { imageModel ->
        viewModel.setEvent(PhotoGridEvents.OnPhotoTap(imageModel))
    },
    lockedImage = null,  // Optional locked image that can't be deselected
)

Key Parameters:

Features:

• Multi-select with visual feedback (checkmarks)
• Selection limit enforcement with bottom sheet warning
• Long-press gesture support
• Locked image support (always selected)
• Select all / Deselect all functionality
• Adaptive grid layout
• Selection counter in footer

🎞️ DoubleCarousel

A dual-synchronized carousel component with a top full-size image pager and bottom thumbnail strip. Features smooth synchronization, multi-selection, and aspect-ratio-aware borders.

var carouselState by remember {
    mutableStateOf(
        DoubleCarouselState(
            images = List(10) { "https://picsum.photos/id/${it * 10}/800/600" },
            currentIndex = 0,
            selectedIndices = emptySet()
        )
    )
}

DoubleCarousel(
    state = carouselState,
    onStateChange = { carouselState = it },
    config = DoubleCarouselConfig(
        bottomThumbnailSize = 80.dp,
        selectedBorderColor = Color.Cyan,
        selectedBorderWidth = 3.dp,
        spacing = 8.dp,
    )
)

Key Parameters:

DoubleCarouselState Methods:

state.toggleSelection(index)  // Toggle image selection
state.updateCurrentIndex(index)  // Navigate to image
state.isSelected(index)  // Check if image is selected

Features:

• Bidirectional Sync: Swipe top pager ↔️ scroll bottom thumbnails
• Multi-Selection: Tap top image to select/deselect with border indicator
• Aspect Ratio Aware: Borders follow actual image shape (not container)
• Snap Behavior: Bottom carousel snaps to center with smooth animations
• Fast Scroll Handling: Debounced synchronization prevents desync
• Customizable Styling: Thumbnail size, colors, borders, spacing

Configuration Options:

🔥 DeformableCornerItem

A customizable card with deformable corners and a circular cutout for icons.

DeformableCornerItem(
    modifier = Modifier.size(200.dp),
    circleRadius = 24.dp,
    cardColor = Color(0xFFE0E0E0),
    circleColor = Color(0xFFFF5252),
    topLeft = 32.dp,
    bottomLeft = 32.dp,
    bottomRight = 32.dp,
    contentCircle = {
        Icon(
            imageVector = Icons.Default.LocalFireDepartment,
            contentDescription = null,
            tint = Color.White,
            modifier = Modifier.align(Alignment.Center)
        )
    },
    contentRectangle = {
        Text("Your content here", modifier = Modifier.align(Alignment.Center))
    }
)

Key Parameters:

⏱️ TimerWatch

A circular countdown timer with animated progress arc, glow effect, and heartbeat animation.

TimerWatch(
    timerState = TimerState(
        timeRemaining = 45,
        totalTime = 60,
        isRest = false
    ),
    isOvertime = false,
    showHeartbeat = true,
    style = CircularTimerDefaults.style()
)

Key Parameters:

States:

• Work → Green progress
• Rest → Amber progress
• Overtime → Red progress with negative time display
• Heartbeat → Pulsing animation when < 5 seconds

📊 BasicBarChart

A weekly bar chart with striped inactive bars and solid active bar.

val weekData = listOf(
    BarData(label = "Mon", progress = 0.7f),
    BarData(label = "Tue", progress = 0.4f),
    BarData(label = "Wed", progress = 0.6f),
    BarData(label = "Thu", progress = 0f),
    BarData(label = "Fri", progress = 0.5f),
    BarData(label = "Sat", progress = 1.0f),
    BarData(label = "Sun", progress = 0.65f),
)

BasicBarChart(
    chartData = weekData,
    selectedIndex = 2,
    activeBarColor = Color(0xFFF48C46),
    onBarClick = { index -> /* handle click */ }
)

Key Parameters:

🎯 TrackerContainer

A segmented progress tracker with animated fill, glow effects, and completion checkmark.

TrackerContainer(
    fillPercentage = 0.5f,  // 0.0 to 1.0
    isCompleted = false,
    isActive = true,
    isGlobalComplete = false,
    waveDelayMillis = 0,
    rangeStart = 0,
    rangeEnd = 100,
    style = GlowingTrackerDefaults.style()
)

Key Parameters:

MuscleGroupDonutVariant(
    segments = listOf(
        DonutSegment("Chest", 5000f, 0