A Collection of iOS Inspired Liquid Glass Components and Much More with Fluid Animations and Refractions
Create a Xin chà o and Hello writing effect inspired by Apple using Motion for React.
A customizable command palette/search box with keyboard shortcuts and footer logo customization.
Hook for components that can be either controlled or uncontrolled.
An iOS Dynamic Island-style scroll progress indicator with expandable TOC navigation.
Cycles through a list of sentences with a smooth flip transition built with Motion.
Display GitHub repository star count with formatted numbers and a tooltip showing the full count.
An iOS 26-inspired liquid glass searchbox with focus animations and SVG refraction effects.
A liquid glass searchbox with a controlled value and a clear button.
A liquid glass searchbox with a custom width and placeholder.
An iOS 26-inspired liquid glass slider with draggable thumb and SVG refraction effects.
A liquid glass slider with a default value and a change handler.
A liquid glass slider with custom fill, track and thumb colors.
A liquid glass slider with tuned glass refraction settings.
Shared refraction and displacement utilities for iOS 26-inspired liquid glass effects.
A React component that adds a fade effect to content as you scroll.
A vertical scroll fade over a long list of tags.
A horizontal scroll fade over a row of artwork.
A vertical scroll fade applied to the shadcn scroll area.
A horizontal scroll fade applied to the shadcn scroll area.
Smooth shimmering text animation built with Motion.
Shimmering text at a larger size.
Shimmering text with custom colors for a loading message.
An iOS 26-inspired liquid glass slide-to-unlock switch with refraction effects.
The default slide-to-unlock switch.
A slide-to-unlock switch with custom thumb, track and toast colors.
A slide-to-unlock switch with tuned glass refraction settings.
A disabled slide-to-unlock switch.
Custom React hook to load and play a sound from a given URL using the Web Audio API.
A stateful button with animated transitions between normal, loading, success, and error states.
A toast notification that displays animated status transitions using Sonner.
A theme switcher component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.
Animates theme changes with the View Transitions API, expanding from the clicked element.
Displays a list of work experiences with role details and durations.
A work experience list with expandable roles, using sample data.