# Liquid Glass

> 💧 LiquidGlass Interactive Control Panel  This project is an elegant interactive UI simulation inspired by iOS-style control centers — built with React, Tailwind CSS, and Lucide Icons. It showcases advanced liquid glass morphism, ripple effects, and drag/stretch interactions to deliver a futuristic, fluid interface experience.  ✨ Core Components  🔹 LiquidGlass Component A highly customizable glassmorphism container that simulates a liquid, jelly-like surface.  Supports variants like button, card, panel, and floating.  Includes smooth drag and wobble effects, ripple animations, and cursor tracking.  Mimics liquid elasticity with realistic motion physics on drag and release.  Configurable intensity levels (subtle, medium, strong) control the blur and transparency.  Can optionally disable stretching and ripples for static use cases.  🔸 LiquidButton Component Built upon LiquidGlass, this is an interactive button element featuring responsive motion and color states.  Supports multiple variants (primary, secondary, danger, ghost) and sizes (sm, md, lg, xl).  Integrates ripple effects and scale animations for tactile feedback.  Designed for toggle-based UIs or standalone actions.  🔹 App Component (Main UI) The main screen displays a floating glass control panel containing four animated circular toggle buttons:  ✈️ Airplane Mode  📶 Wi-Fi  🔊 AirDrop  🌙 Do Not Disturb  Each button dynamically toggles its state with:  A vivid gradient background when active.  A soft glowing border that reflects its function color (orange, blue, or purple).  Subtle ripple and glass motion effects for realistic interactivity.  🌈 Visual & UX Highlights  Glassmorphic Aesthetic: Frosted-glass background with glowing gradients and soft blurs.  Interactive Depth: Elements respond to mouse position, drag, and clicks with natural elastic physics.  Dynamic Ripples: Click interactions generate light ripples across the glass surface.  Ambient Lighting: Background includes pulsating blurred lights for an atmospheric 3D feel.  Fully Responsive: Adapts well to different screen sizes with grid layout flexibility.  🧠 Tech Stack  React (functional components with hooks)  Tailwind CSS for utility-first styling  Lucide-react for high-quality icons  Custom CSS animations for ripple and pulse effects  🧩 Ideal Use Cases  Control panels or dashboards with tactile feedback.  Smart home or IoT interfaces.  Creative portfolios showcasing animation and UI motion design.  Futuristic or experimental UI concept demos.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@uniquesonu/components/liquid-glass

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/liquid-glass?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt