Animated Scroll Vertical List

View code →

Apple Stock Bottom Sheet Animation

This component demonstrate how we can create the animation in the apple stock app when the bottom sheet is expanded. You can use in your app as a ticker or a cool animation in your landing or onboarding page.

View code →

Audio Waveform

A waveform chart that specialized on audio data visualization. Apart from the visual representation, this component also provides a seekbar functionality to interact with the audio data.

View code →

Battery Indicator

A component to visualize battery life, represented using numbers and bars. This component uses animated counter component to show the number and line on canvas to show the bars.

View code →

Blurred Carousel

A carousel component with blurred version of the selected image. The background transition is triggered by derivation of pager state, so it animate naturally with the pager.

View code →

Animated Blurred Gradient Background

A blurred animated gradient component that can add depth and charm to your app UI. This component can be used in serveral use cases from adding micro-animation to your card component to a background in onboarding UX.

View code →

Button Click Effects

A demonstration of how we can make button press playful and engaging by adding micro animations to the button. And you're right, this can be applied not to just button but every clickable element in the app.

View code →

Call Indicator Animation

An implementation from pulse loading component that adds a fun element to your call to action. This component can become an inspiration and a ready component that you can use in your app.

View code →

Checkable Action Item

An animated UI component that combines an actionable item with a checkbox, enabling users to perform an action with a single interaction, streamlining task completion. This component is best used in an onboarding task feature.

View code →

Circular Progress

Watch as lines, both long and short, form a mesmerizing dance of progress. Plus, enjoy a subtle animation whenever the progress is updated!

View code →

Color Picker

A component to pick a color from a small set of colors, with smooth animation. It uses animateFloatAsState to animate the color item width and animateColorAsState to update the background

View code →

Content with Collapsible Cover

A component that can be used as an intro animation for a scrolling content in your app. It smoothly integrate a cover image content with a long scrollable text content.

View code →

Countdown Screen

A screen to set a timer and then start the countdown. It uses CustomPicker to set minute and second and use AnimatedCounter to show the countdown.

View code →

Custom Picker

A component to show scrollable custom picker that uses LazyColumn with SnapFlingBehavior. It will snap and select the middle item when user scroll through the list.

View code →

Google Fit's Daily Goals Component

This component is a part of the Google Fit app. It shows the user's daily goals for the number of steps, distance, and calories burned. The user can see their progress for each goal and the percentage of the goal they have achieved.

View code →

Double Circular Progress Bar with Content

A component that showcases two concentric circular progress indicators. Providing a unique way to display dual progress metrics or comparisons, with a central area for additional information or icons.

View code →

Double Gallery Carousel

A component that can be used in image gallery feature in OTA app or an image selection feature in wallpaper app

View code →

Download / Loading Indicator with Progress

A download or loading indicator that visually tracks and displays the progress of downloads or loading actions. Enhancing user experience with immediate feedback and give important information on a text inside the progress.

View code →

Expandable FAB

This component is an expandable floating action button that will show additional menu on the expanded layout. It has a fun animation that spins the '+' button into an 'x', making it super easy and intuitive for users to click again and close the expanded layout.

View code →

Flippable Button Animation

A component to toggle between two states with fun animation. This component best suited to give more information from the first content it shown.

View code →

Oura Gauge Progress Bar

A progress bar component that display the progress as an arc, creating something like a gauge. This component is useful for displaying a status of a process that is not linear, like today sleep performance.

View code →

Glowing Loading Indicator

A clean, minimalist, yet futuristic loading indicator that uses a glowing effect to indicate loading progress. This can be used as loading animation for your content.

View code →

Hacker Text Animation

View code →

Hidden Drawer Layout

An alternative pattern for menu drawer layout. Instead of placing the menu drawer in front of the content, in this component we place it on the back of the content make it more playful and not boring.

View code →

Hinge Modal

A sleek, interactive overlay from [Hinge](https://hinge.com/) mobile app. It has a unique and beutiful cutout design in the bottom right of the modal.

View code →

Animated Horizontal Carousel

A dynamic UI component that allows users to smoothly scroll through a collection of items, such as images or cards, horizontally with engaging animations. This interactive element enhances user experience by providing a visually appealing way to explore content in a limited space.

View code →

Horizontal Cube Carousel

View code →

Instagram Stories

View code →

List With Swipeable Action

View code →

Multiplayer Join Animation

This components demonstrate how you can animate layout bound of multiple elements inside one container. This animation only utilize a single animate as int function!

View code →

Onboarding progress

View code →

Overflow Line Carousel

A horizontal carousel with line animation on the transition. This animation utilize the pager state to animate the line.

View code →

PassCode Screen

A components of a pass code screen with delightful animation that ready to use in your project.

View code →

Pausable Countdown Progress

View code →

Peanut Modal

A simple modal component from Peanut mobile application in the referral feature. This component shows how to create an icon in the modal that seemingly outside its box.

View code →

Pulse Loading

An indefinite progress indicator in a form of pulse. This component can be used as a loading indicator for a page or a component or can be used as a highlighter in onboarding or tutorial screens.

View code →

Card with Rounded Label

A rounded card with rounded label on bottom end of the card. This component demonstrate the use of custom shape as your background and how can you correctly draws it.

View code →

Scrolling Onboarding Screen

A onboarding screen that featured an autoscroll list of images that can be used to showcase products. It's created using LazyColumn and LazyListState to animate the scroll.

View code →

Sectioned Vertical List With Tab

View code →

Selectable Donut Chart

A playful donut chart inspired by Revolut app that can display categorical data. This component able to show the label for each slice and also support selection callback too.

View code →

Selectable Labeled Bar Chart

A simple labeled chart component that selectable and support vertical and horizontal orientation. This component is useful for displaying simple data that needs elaboration or goes into detail when the bar is selected.

View code →

Selectable Labeled Stacked Bar Chart

A labeled stacked bar chart component that selectable and support vertical and horizontal orientation. This component is useful for displaying a set of data in a stacked bar chart format that needs more explanation when the user select the bar.

View code →

Step progress

View code →

Stock Line Chart

A line chart component with a gradient to transparent body. This component is usually found and used in showing stock market data.

View code →

Swipe Button Animation

A fun and iconic call-to-action animated component. This component can be an alternative for action that doesn't want to show confirmation dialog. Or you know, unlocking stuff.

View code →

Tab Bar Long Press Shortcut

A pattern that we can use if we want to have a convenience shortcuts in our menu bar. This is very useful in a feature rich application where user can access the feature more quickly.

View code →

Text Type Writer

This is a text type writer animation that you can use in an onboarding page or a static banner in your mobile app.

View code →

ToDo Checklist Animation

A todo check list item UI with added checkmarks and strikethrough animation, adding a playful, satisfying aspect to task completion in to-do list applications.

View code →

Uber BottomSheet

View code →

Animated Vertical Carousel

Here is a Vertical Carousel component!It has a list of contents that contain images and some excerpts. This component is also equipped with a page indicator and a button to manually change the selected page.

View code →