Show HN: Apple's new "Liquid Glass" effect as a Svelte component

4 months ago 14

liquid-glass-svelte

TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published 3 hours ago

Banner

liquid-glass-svelte provides a Svelte component that reproduces Apple's Liquid Glass effect.

npm i liquid-glass-svelte
<script lang="ts"> import { LiquidGlass } from "liquid-glass-svelte"; </script> <LiquidGlass> <h1>Content goes here</h1> </LiquidGlass>

Pass a partial options object to tune the effect. Any field you omit falls back to its default value.

<LiquidGlass options={{ mainBackgroundColor: 'hsla(0, 0%, 75%, 0.1)', mainBlur: '1vw', edgeBlur: '0.5vw', edgeBackgroundColor: 'hsla(0, 0%, 100%, 0.1)', edgeWidth: '1vw', edgeGradientWidth: '1vw', sheenBlur: '3vw', sheenBackgroundColor: 'hsla(0, 0%, 100%, 0.2)', sheenWidth: '0.2vw' }} > <p>Your content</p> </LiquidGlass>

Explanation


Since the component forwards additional attributes (...rest), you can attach classes or other props:

<LiquidGlass class="hero"> <!-- content --> </LiquidGlass>

Package Sidebar

Install

npm i liquid-glass-svelte

Weekly Downloads

Collaborators

  • tozaburo

Read Entire Article