vue-glassmorphism-component

A Vue 3 component that creates a macOS Docker-like glassmorphism effect with hover animations.

Installation

npm install vue-glassmorphism-component

# or

yarn add vue-glassmorphism-component

# or

pnpm add vue-glassmorphism-component

Usage

Basic Usage

<template>
  <Glassmorphism color="white">
    <!-- Your items here -->
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </Glassmorphism>
</template>

<script setup>
import Glassmorphism from 'vue-glassmorphism-component';
</script>

<style>
.item {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

With Custom Options

<template>
  <Glassmorphism
    color="blue"
    range="250"
    maxScale="1.8"
  >
    <!-- Your items here -->
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </Glassmorphism>
</template>

Props

| Prop Name | Type | Default | Description | | --------- | ---- | ------- | ----------- | | color | String | 'white' | The base color for the glassmorphism effect | | range | Number | 200 | The range (in pixels) within which the hover effect is active | | maxScale | Number | 1.5 | The maximum scale factor for the hovered items | | opacity | Number | 0.1 | The opacity of the glassmorphism background | | blur | Number | 10 | The blur radius (in pixels) for the glassmorphism effect | | itemSide | Number | 60 | The size of each item (in pixels) |

Browser Compatibility

This component works in all modern browsers that support:

• CSS Grid
• CSS Variables
• CSS backdrop-filter (for glassmorphism effect)

Development

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint

License

MIT