@aslanonur/liquid-glass-vue
Version:
Apple's Liquid Glass effect implementation for Vue 3 + Nuxt 3. A liquid glass component with real-time displacement mapping, chromatic aberration, and glassmorphism effects.
29 lines (28 loc) • 743 B
TypeScript
export interface MousePosition {
x: number;
y: number;
}
export interface GlassSize {
width: number;
height: number;
}
export type DisplacementMode = "standard" | "polar";
export type PositioningMode = "fixed" | "relative";
export interface LiquidGlassProps {
displacementScale?: number;
blurAmount?: number;
saturation?: number;
aberrationIntensity?: number;
elasticity?: number;
cornerRadius?: number;
overLight?: boolean;
mode?: DisplacementMode;
positioning?: PositioningMode;
globalMousePos?: MousePosition;
mouseOffset?: MousePosition;
mouseContainer?: HTMLElement;
className?: string;
padding?: string;
style?: Record<string, any>;
onClick?: () => void;
}