Package Exports

liquid-glass-mk
liquid-glass-mk/dist/index.cjs.js
liquid-glass-mk/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (liquid-glass-mk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Liquid Glass MK

A beautiful React library for creating liquid glass effects with customizable animations and cursor effects.

Features

Beautiful liquid glass effects with backdrop blur
Smooth hover animations with customizable scaling
Highly customizable with props
Responsive and mobile-friendly
TypeScript support
Zero dependencies (except React)
Cursor effect utility for enhanced user experience

Installation

npm install liquid-glass-mk

Usage

LiquidGlass Component

Basic Usage

import { LiquidGlass } from "liquid-glass-mk";

function App() {
  return (
    <LiquidGlass>
      <p>Your content here</p>
    </LiquidGlass>
  );
}

Advanced Usage

import { LiquidGlass } from "liquid-glass-mk";

function App() {
  return (
    <LiquidGlass
      glassRadius="2rem"
      glassBlur={15}
      glassSaturate="180%"
      glassBrightness={1.2}
      glassBorder={2}
      glassAlpha={0.2}
      glassBg="255, 255, 255"
      className="p-6 text-white"
      style={{ margin: "20px" }}
    >
      <h2>Advanced liquid glass effect</h2>
      <p>This has custom styling and effects</p>
    </LiquidGlass>
  );
}

Custom Styling with Tailwind CSS

import { LiquidGlass } from "liquid-glass-mk";

function App() {
  return (
    <LiquidGlass
      glassAlpha={0.3}
      glassBlur={20}
      glassRadius="1rem"
      className="bg-red-500 text-white p-4 rounded-lg shadow-lg"
      onClick={() => console.log("Clicked!")}
    >
      <h2>Custom Styled Glass</h2>
    </LiquidGlass>
  );
}

LiquidGlass Cursor Effect

Basic Cursor Effect

import { useLiquidGlassCursor } from "liquid-glass-mk";

function App() {
  useLiquidGlassCursor();

  return (
    <div>
      <h1>Move your mouse to see the cursor effect!</h1>
    </div>
  );
}

Advanced Cursor Effect

import { useLiquidGlassCursor } from "liquid-glass-mk";

function App() {
  useLiquidGlassCursor({
    size: 120,
    blur: 15,
    intensity: 0.3,
    zIndex: 9999,
  });

  return (
    <div>
      <h1>Custom cursor effect</h1>
    </div>
  );
}

API Reference

LiquidGlass Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to display inside the glass effect
`glassRadius`	`number \| string`	`"md"`	Border radius (px, rem, em, vh, vw, %)
`glassBg`	`string`	`"255, 255, 255"`	RGB background color (format: "r,g,b")
`glassAlpha`	`number`	`0.16`	Background opacity (0-1)
`glassBlur`	`number \| string`	`2`	Backdrop blur amount (px, rem, em, vh, vw)
`glassSaturate`	`number \| string`	`1.8`	Color saturation (number or "180%")
`glassBrightness`	`number`	`1.05`	Color brightness multiplier
`glassBorder`	`number \| string`	`1`	Border width (px, rem, em, vh, vw)
`className`	`string`	-	Additional CSS classes (Tailwind CSS supported)
`style`	`React.CSSProperties`	-	Custom inline styles
`ref`	`React.Ref<HTMLDivElement>`	-	Ref to the glass element
`onClick`	`(event: MouseEvent) => void`	-	Click handler
`onMouseEnter`	`(event: MouseEvent) => void`	-	Mouse enter handler
`onMouseLeave`	`(event: MouseEvent) => void`	-	Mouse leave handler
...	`React.HTMLAttributes<HTMLDivElement>`	-	All standard HTML div attributes

useLiquidGlassCursor Options

Option	Type	Default	Description
`size`	`number`	`100`	Size of the cursor effect in pixels
`blur`	`number`	`20`	Blur amount for the cursor effect
`intensity`	`number`	`0.1`	Opacity intensity (0-1)
`zIndex`	`number`	`9999`	Z-index of the cursor element

Examples

Complete Example with Both Components

import { LiquidGlass, useLiquidGlassCursor } from "liquid-glass-mk";
import { useEffect } from "react";

function App() {
  useLiquidGlassCursor({
    size: 80,
    blur: 10,
    intensity: 0.2,
  });

  return (
    <div
      style={{
        background: "linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1)",
        minHeight: "100vh",
        padding: "20px",
      }}
    >
      <LiquidGlass
        glassAlpha={0.2}
        glassBlur={25}
        glassRadius="2rem"
        glassSaturate={2.0}
        className="p-8 text-white mb-6"
        onClick={() => console.log("Glass clicked!")}
      >
        <h1>Welcome to Liquid Glass</h1>
        <p>Move your mouse to see the cursor effect!</p>
      </LiquidGlass>

      <LiquidGlass
        glassAlpha={0.2}
        glassBlur={15}
        glassRadius="1rem"
        glassBg="255, 0, 0"
        className="p-6 text-white"
      >
        <h2>Custom Styled Glass</h2>
        <p>This glass has custom background color</p>
      </LiquidGlass>
    </div>
  );
}

Development

This repository includes a development environment for testing and showcasing the library features.

Running the Development Server

# Clone the repository
git clone https://github.com/93minki/liquid-glass-mk.git
cd liquid-glass-mk

# Install dependencies
npm install

# Start the development server
npm run dev

The development server will start at http://localhost:5173 and you can see various examples of the LiquidGlass component and cursor effects in action.

Note: The development files (App.tsx, main.tsx, etc.) are not included in the published npm package. They are only used for development and testing purposes.

License

MIT