Glass View

The core styling primitives of Grgurevic UI. Renders a physical block with depth, responsive specular glares, elastic cursor-drag inertia, and satisfying pointer holding.

Preview

Glass Container

Configuration

Variant Backdrop

Internal Padding Size

Magnetic Physics Pulls block towards cursor elastic-wise

Scale Feedback Squeezes on holding and click actions

Specular Highlight Simulates light reflection angles

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/glass-view.json

Svelte Composition Code

<script lang="ts">
	import { GlassView } from "$lib/components/ui/glass-view";
</script>

<GlassView class="w-64 h-24 flex items-center justify-center">
	<span>Glass Container Content</span>
</GlassView>

API & Props Reference

Prop	Type	Default	Description
variant	"prominent" \| "bordered" \| "secondary" \| "translucent" \| "ghost" \| "destructive"	"prominent"	Backdrop filter/opacity configuration.
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Paddings configuration.
magnetic	boolean	true	Pulls the card toward the pointer using spring drag parameters.
scale	boolean	true	Squeezes on holding and click actions.
specular	boolean	true	Projects precise 3D specular light glare onto borders.