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.