Glass Refraction

https://github.com/z1code/glass-refraction
Admin
Glass Refraction is a liquid glass design system providing CSS and React components with SVG...
Tokens:6,015
Snippets:36
Trust Score:5.6
License:MIT
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Run Development Server (Bash)

Source: https://github.com/z1code/glass-refraction/blob/master/CONTRIBUTING.md

This snippet shows how to clone the glass-refraction repository, navigate into the project directory, install necessary dependencies using npm, and start the development server in watch mode.

```bash
git clone https://github.com/moeez-shabbir/glass-refraction.git
cd glass-refraction
npm install
npm run dev   # watch mode
```

--------------------------------

### Install glass-refraction Package

Source: https://github.com/z1code/glass-refraction/blob/master/README.md

This snippet shows the command to install the glass-refraction package using npm. It's a prerequisite for using the library in your project.

```bash
npm install glass-refraction
```

--------------------------------

### Full Application Example with Glass Components (React/TSX)

Source: https://context7.com/z1code/glass-refraction/llms.txt

A comprehensive example demonstrating the integration of various glass-refraction components (GlassFilters, Glass, GlassCard, GlassPill) within a full-page application layout. It showcases navigation, hero sections, feature cards, and tag displays with glass effects.

```tsx
"use client";

import { GlassFilters, Glass, GlassCard, GlassPill } from 'glass-refraction';

export default function GlassDemo() {
  const features = [
    {
      title: 'SVG Refraction',
      description: 'Uses feTurbulence and feDisplacementMap for realistic light bending effects.'
    },
    {
      title: 'Chromatic Dispersion',
      description: 'Rainbow edge tinting simulates light wavelength separation through glass.'
    },
    {
      title: 'Specular Highlights',
      description: 'Animated breathing highlights mimic overhead light reflections.'
    },
  ];

  const tags = ['React', 'CSS', 'SVG Filters', 'Liquid Glass', 'TypeScript'];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 text-slate-200 flex flex-col items-center gap-8 p-8">
      {/* Mount SVG refraction filters once */}
      <GlassFilters />

      {/* Navigation */}
      <Glass as="nav" className="w-full max-w-4xl px-6 py-4 flex justify-between items-center">
        <strong className="text-lg">Glass App</strong>
        <div className="flex gap-4">
          <a href="#features">Features</a>
          <a href="#about">About</a>
        </div>
      </Glass>

      {/* Hero Section */}
      <Glass as="header" className="w-full max-w-4xl px-8 py-12 text-center">
        <h1 className="text-4xl font-bold mb-4">Liquid Glass UI</h1>
        <p className="text-lg opacity-80">
          Beautiful frosted glass effects for modern web applications
        </p>
      </Glass>

      {/* Feature Cards */}
      <section id="features" className="w-full max-w-4xl">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {features.map((feature, index) => (
            <GlassCard key={index} className="p-6">
              <h3 className="font-semibold text-lg mb-3">{feature.title}</h3>
              <p className="text-sm opacity-70 leading-relaxed">
                {feature.description}
              </p>
            </GlassCard>
          ))}
        </div>
      </section>

      {/* Tags Section */}
      <section className="flex gap-3 flex-wrap justify-center">
        {tags.map((tag) => (
          <GlassPill key={tag} className="px-4 py-2 text-sm">
            {tag}
          </GlassPill>
        ))}
      </section>

      {/* Footer */}
      <Glass as="footer" className="w-full max-w-4xl px-6 py-4 text-center text-sm opacity-70">
        Built with glass-refraction — MIT License
      </Glass>
    </div>
  );
}

```

--------------------------------

### GlassPill Component Examples (React/TSX)

Source: https://context7.com/z1code/glass-refraction/llms.txt

Demonstrates the usage of the GlassPill component for rendering tags, badges, and inline elements. It shows basic rendering, creating lists of tags, and using the polymorphic 'as' prop to render pills as buttons or links.

```tsx
import { GlassPill } from 'glass-refraction';

// Basic pill/tag
function BasicPill() {
  return (
    <GlassPill className="px-3 py-1 text-sm">
      React
    </GlassPill>
  );
}

// Tag list
function TagList() {
  const tags = ['React', 'TypeScript', 'Next.js', 'CSS', 'SVG'];

  return (
    <div className="flex gap-3 flex-wrap">
      {tags.map((tag) => (
        <GlassPill key={tag} className="px-3 py-1 text-sm">
          {tag}
        </GlassPill>
      ))}
    </div>
  );
}

// Polymorphic pill as button
function PillButton() {
  return (
    <GlassPill
      as="button"
      onClick={() => console.log('clicked')}
      className="px-4 py-2 cursor-pointer"
    >
      Click me
    </GlassPill>
  );
}

// Pill as link
function PillLink() {
  return (
    <GlassPill as="a" href="/category/react" className="px-3 py-1 text-sm">
      React
    </GlassPill>
  );
}

```

--------------------------------

### Build Project for Production (Bash)

Source: https://github.com/z1code/glass-refraction/blob/master/CONTRIBUTING.md

This command builds the glass-refraction project for production. The output, including compiled CSS and JavaScript, will be placed in the `dist/` directory.

```bash
npm run build
```

--------------------------------

### Apply glass-refraction CSS Classes to HTML Elements

Source: https://github.com/z1code/glass-refraction/blob/master/README.md

Shows how to apply the predefined CSS classes from the glass-refraction library to standard HTML elements to achieve different glass effects.

```html
<nav class="glass">Navbar</nav>
<div class="glass-card">Content card</div>
<span class="glass-pill">Badge</span>
```

--------------------------------

### Import CSS Stylesheet for glass-refraction

Source: https://github.com/z1code/glass-refraction/blob/master/README.md

Demonstrates how to import the glass-refraction CSS stylesheet. This can be done directly in CSS or within JavaScript/TypeScript files to enable the glass effects.

```css
@import 'glass-refraction/css';
```

```javascript
import 'glass-refraction/css';
```

--------------------------------

### React Usage of glass-refraction Components

Source: https://github.com/z1code/glass-refraction/blob/master/README.md

Illustrates how to use the React components provided by the glass-refraction library. It includes importing components and rendering them within a React application. React components automatically handle CSS imports.

```tsx
import { GlassFilters, Glass, GlassCard, GlassPill } from 'glass-refraction';

export default function App() {
  return (
    <>
      <GlassFilters />
      <Glass as="nav" className="px-4 py-3">Navbar</Glass>
      <GlassCard className="p-6">
        <h2>Card title</h2>
        <p>Card content</p>
      </GlassCard>
      <GlassPill className="px-3 py-1">Tag</GlassPill>
    </>
  );
}
```

--------------------------------

### Theming glass-refraction CSS Custom Properties

Source: https://github.com/z1code/glass-refraction/blob/master/README.md

Demonstrates how to theme the glass-refraction components by overriding CSS custom properties. This allows customization of blur, saturation, border radius, background, chromatic dispersion, and animation timings.

```css
:root {
  /* Blur */
  --gr-blur: 26px;
  --gr-blur-card: 20px;
  --gr-blur-pill: 8px;

  /* Saturation */
  --gr-saturation: 1.7;
  --gr-saturation-card: 1.5;
  --gr-saturation-pill: 1.3;

  /* Border radius */
  --gr-radius: 20px;
  --gr-radius-card: 16px;
  --gr-radius-pill: 9999px;

  /* Base background */
  --gr-bg-start: rgba(18, 22, 35, 0.48);
  --gr-bg-end: rgba(12, 16, 28, 0.42);

  /* Chromatic dispersion */
  --gr-chromatic-blue: rgba(0, 180, 255, 0.045);
  --gr-chromatic-violet: rgba(120, 80, 255, 0.04);
  --gr-chromatic-pink: rgba(255, 100, 200, 0.035);
  --gr-chromatic-green: rgba(100, 255, 180, 0.025);

  /* Animation timing */
  --gr-shimmer-duration: 7s;
  --gr-specular-duration: 5s;
}
```

--------------------------------

### Apply Dense Frosted Glass Effect (CSS)

Source: https://context7.com/z1code/glass-refraction/llms.txt

Applies the dense frosted glass effect using the `.glass` CSS class. This effect is ideal for navigation bars, footers, and hero overlays, providing rich visual depth with animations and chromatic dispersion. It requires importing the library's CSS.

```html
<link rel="stylesheet" href="glass-refraction/css" />

<nav class="glass" style="padding: 1rem 2rem; display: flex; justify-content: space-between;">
  <strong>My App</strong>
  <span>Navigation</span>
</nav>

<footer class="glass" style="padding: 1rem 2rem; text-align: center;">
  © 2025 My Application
</footer>
```

```javascript
import 'glass-refraction/css';
```

--------------------------------

### Apply Lightweight Glass Effect (CSS)

Source: https://context7.com/z1code/glass-refraction/llms.txt

Applies a subtle frosted glass effect with a hover brighten effect using the `.glass-pill` CSS class. This is designed for inline elements like tags and badges, offering minimal blur and a gentle visual enhancement on interaction.

```html
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
  <span class="glass-pill" style="padding: 0.35rem 1rem;">React</span>
  <span class="glass-pill" style="padding: 0.35rem 1rem;">TypeScript</span>
  <span class="glass-pill" style="padding: 0.35rem 1rem;">CSS</span>
  <span class="glass-pill" style="padding: 0.35rem 1rem;">SVG Filters</span>
</div>
```

--------------------------------

### Apply Medium-Density Glass Effect with Hover (.glass-card)

Source: https://github.com/z1code/glass-refraction/blob/master/examples/vanilla/index.html

Implements a medium-density glass effect for cards, including a hover lift effect, a specular top-edge line, and chromatic edges that appear on hover. This CSS is designed for card elements.

```css
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; width: 100%; max-width: 800px; }
.glass-card { padding: 1.5rem; }
.glass-card h3 { margin-bottom: 0.5rem; }
.glass-card p { opacity: 0.7; font-size: 0.9rem; line-height: 1.5; }
```

--------------------------------

### Create Polymorphic Glass Elements (TSX)

Source: https://context7.com/z1code/glass-refraction/llms.txt

A polymorphic wrapper component that renders a `.glass` element, allowing it to be rendered as any HTML element type using the `as` prop. It supports basic usage and various element types like nav, header, section, and footer, along with variant overrides.

```tsx
import { Glass } from 'glass-refraction';

// Basic usage - renders as div by default
function BasicGlass() {
  return (
    <Glass className="p-6">
      Content inside glass container
    </Glass>
  );
}

// Polymorphic usage - render as different elements
function PolymorphicGlass() {
  return (
    <>
      {/* Navigation bar */}
      <Glass as="nav" className="px-6 py-4 flex justify-between items-center">
        <strong>Logo</strong>
        <span>Menu</span>
      </Glass>

      {/* Header element */}
      <Glass as="header" className="px-8 py-6">
        <h1>Welcome</h1>
      </Glass>

      {/* Section */}
      <Glass as="section" className="p-8">
        <p>Section content with glass effect</p>
      </Glass>

      {/* Footer */}
      <Glass as="footer" className="px-6 py-4 text-center">
        © 2025 My App
      </Glass>

      {/* Override variant to use different tier */}
      <Glass variant="glass-card" className="p-6">
        This uses glass-card styling instead
      </Glass>

      <Glass variant="glass-pill" className="px-3 py-1">
        Pill variant
      </Glass>
    </>
  );
}

```

--------------------------------

### Apply Medium-Density Glass Effect (CSS)

Source: https://context7.com/z1code/glass-refraction/llms.txt

Applies a medium-density frosted glass effect with hover lift animation using the `.glass-card` CSS class. This is suitable for content cards and panels, featuring a specular highlight line and chromatic edges on hover. The `.glass-card--no-hover` modifier can disable these animations.

```html
<div class="glass-card" style="padding: 1.5rem;">
  <h3>Card Title</h3>
  <p>Card content with hover lift effect and chromatic edge highlighting.</p>
</div>

<div class="glass-card glass-card--no-hover" style="padding: 1.5rem;">
  <h3>Static Card</h3>
  <p>No hover animation on this card.</p>
</div>
```

--------------------------------

### Customize Glass Appearance with CSS Variables

Source: https://context7.com/z1code/glass-refraction/llms.txt

Allows customization of the glass effect's appearance by overriding CSS custom properties defined on the `:root`. Properties control blur intensity, color saturation, border radius, background gradients, chromatic edge colors, and animation timings. Custom themes can be applied by creating new CSS classes.

```css
:root {
  /* Blur intensity for each tier */
  --gr-blur: 26px;
  --gr-blur-card: 20px;
  --gr-blur-pill: 8px;

  /* Color saturation boost */
  --gr-saturation: 1.7;
  --gr-saturation-card: 1.5;
  --gr-saturation-pill: 1.3;

  /* Border radius */
  --gr-radius: 20px;
  --gr-radius-card: 16px;
  --gr-radius-pill: 9999px;

  /* Base background gradient colors */
  --gr-bg-start: rgba(18, 22, 35, 0.48);
  --gr-bg-end: rgba(12, 16, 28, 0.42);

  /* Chromatic dispersion edge colors */
  --gr-chromatic-blue: rgba(0, 180, 255, 0.045);
  --gr-chromatic-violet: rgba(120, 80, 255, 0.04);
  --gr-chromatic-pink: rgba(255, 100, 200, 0.035);
  --gr-chromatic-green: rgba(100, 255, 180, 0.025);

  /* Animation timing */
  --gr-shimmer-duration: 7s;
  --gr-specular-duration: 5s;
}

/* Example: Custom theme with faster animations and more blur */
.my-custom-glass {
  --gr-blur: 32px;
  --gr-shimmer-duration: 4s;
  --gr-bg-start: rgba(30, 40, 60, 0.5);
  --gr-bg-end: rgba(20, 30, 50, 0.45);
}
```

--------------------------------

### Apply Dense Frosted Glass Effect (.glass)

Source: https://github.com/z1code/glass-refraction/blob/master/examples/vanilla/index.html

Applies a dense frosted glass effect to an element, featuring an animated shimmer, specular highlights, and chromatic edge dispersion. This CSS is intended for direct use in HTML.

```css
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body { min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #e2e8f0; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem; }
/* SVG refraction filters (inline for vanilla usage) */
.sr-only { position: absolute; width: 0; height: 0; overflow: hidden; }
nav.glass { width: 100%; max-width: 800px; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; width: 100%; max-width: 800px; }
.glass-card { padding: 1.5rem; }
.glass-card h3 { margin-bottom: 0.5rem; }
.glass-card p { opacity: 0.7; font-size: 0.9rem; line-height: 1.5; }
.pills { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.glass-pill { padding: 0.35rem 1rem; font-size: 0.85rem; }
footer.glass { width: 100%; max-width: 800px; padding: 1rem 2rem; text-align: center; font-size: 0.85rem; opacity: 0.7; }
```

--------------------------------

### Apply Lightweight Frosted Pill Effect (.glass-pill)

Source: https://github.com/z1code/glass-refraction/blob/master/examples/vanilla/index.html

Provides a lightweight frosted glass effect suitable for tags, badges, or inline elements. This CSS styles elements with the class 'glass-pill' for a subtle frosted appearance.

```css
.pills { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.glass-pill { padding: 0.35rem 1rem; font-size: 0.85rem; }
```

--------------------------------

### Applying SVG Refraction Filters (React/TSX)

Source: https://context7.com/z1code/glass-refraction/llms.txt

Shows how to apply SVG refraction effects to HTML elements using the `<GlassFilters />` component and CSS `filter` property. It demonstrates subtle and strong refraction effects on images and div elements.

```tsx
import { GlassFilters } from 'glass-refraction';

function RefractionDemo() {
  return (
    <>
      <GlassFilters />

      {/* Subtle refraction on images */}
      <img
        src="/background.jpg"
        alt="Background"
        style={{ filter: 'url(#glass-refract)' }}
      />

      {/* Strong refraction for hero elements */}
      <div
        className="hero-section"
        style={{ filter: 'url(#glass-refract-strong)' }}
      >
        <h1>Hero Content</h1>
      </div>
    </>
  );
}

/* CSS approach */
/*
.refracted {
  filter: url(#glass-refract);
}

.refracted-strong {
  filter: url(#glass-refract-strong);
}
*/

```

--------------------------------

### Apply SVG Refraction Filters using CSS

Source: https://github.com/z1code/glass-refraction/blob/master/README.md

This CSS snippet shows how to apply the SVG refraction filters generated by the `<GlassFilters />` React component to elements. It uses the `filter` property with URLs pointing to the filter IDs.

```css
.refracted { filter: url(#glass-refract); }
.refracted-strong { filter: url(#glass-refract-strong); }
```

--------------------------------

### Render Glass Refraction Filters (TSX)

Source: https://context7.com/z1code/glass-refraction/llms.txt

Provides two SVG refraction filters (`#glass-refract` and `#glass-refract-strong`) that can be placed once at the application root. It accepts custom configuration props for scale, base frequency, octaves, and seed.

```tsx
import { GlassFilters } from 'glass-refraction';

export default function App() {
  return (
    <>
      {/* Mount filters once at app root */}
      <GlassFilters />

      {/* Your app content */}
      <main>
        <img
          src="/hero-image.jpg"
          style={{ filter: 'url(#glass-refract)' }}
          alt="Refracted hero"
        />
        <img
          src="/featured.jpg"
          style={{ filter: 'url(#glass-refract-strong)' }}
          alt="Strong refraction"
        />
      </main>
    </>
  );
}

// With custom configuration
function CustomFilters() {
  return (
    <GlassFilters
      scale={12}              // Displacement scale for subtle refraction (default: 8)
      strongScale={24}        // Displacement scale for strong refraction (default: 16)
      baseFrequency="0.02 0.015" // Turbulence frequency (default: "0.015 0.012")
      numOctaves={3}          // Noise octaves (default: 2)
      seed={123}              // Turbulence seed (default: 42)
    />
  );
}

```

--------------------------------

### Create Glass Content Cards (TSX)

Source: https://context7.com/z1code/glass-refraction/llms.txt

A medium-density glass component designed for content cards and panels, featuring a default hover lift effect that can be disabled. It supports polymorphic rendering as other HTML elements and can be used in various layouts like grids.

```tsx
import { GlassCard } from 'glass-refraction';

// Basic card with hover effect
function BasicCard() {
  return (
    <GlassCard className="p-6">
      <h2 className="font-semibold mb-2">Card Title</h2>
      <p className="text-sm opacity-70">
        Card content with automatic hover lift and chromatic edge effects.
      </p>
    </GlassCard>
  );
}

// Card grid layout
function CardGrid() {
  const items = [
    { title: 'Feature 1', description: 'First feature description' },
    { title: 'Feature 2', description: 'Second feature description' },
    { title: 'Feature 3', description: 'Third feature description' },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {items.map((item, index) => (
        <GlassCard key={index} className="p-6">
          <h3 className="font-semibold mb-2">{item.title}</h3>
          <p className="text-sm opacity-70">{item.description}</p>
        </GlassCard>
      ))}
    </div>
  );
}

// Static card without hover effects
function StaticCard() {
  return (
    <GlassCard hoverable={false} className="p-6">
      <h2>Static Card</h2>
      <p>This card does not lift on hover.</p>
    </GlassCard>
  );
}

// Polymorphic card as article element
function ArticleCard() {
  return (
    <GlassCard as="article" className="p-8">
      <h2>Blog Post Title</h2>
      <time>January 15, 2025</time>
      <p>Article excerpt goes here...</p>
    </GlassCard>
  );
}

```
Tokens:
Raw