UNPKG

@glasnost-ui/vue

Version:

Vue 3 components for Glasnost UI with liquid glass aesthetics

github.com/akashleo/glasnost-ui

akashleo/glasnost-ui

3 lines (2 loc) • 8.01 kB
1
2
3
export declare const liquidGlassFilters = "\n<svg style=\"display: none;\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <!-- Advanced Glass Morphism Filter -->\n <filter id=\"glassDistortion\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feTurbulence baseFrequency=\"0.02\" numOctaves=\"3\" result=\"turbulence\"/>\n <feDisplacementMap in=\"SourceGraphic\" in2=\"turbulence\" scale=\"8\" result=\"displacement\"/>\n <feGaussianBlur in=\"displacement\" stdDeviation=\"4\" result=\"blur\"/>\n <feColorMatrix in=\"blur\" type=\"matrix\" \n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0\"/>\n <feOffset in=\"blur\" dx=\"0\" dy=\"8\" result=\"shadow\"/>\n <feMerge>\n <feMergeNode in=\"shadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Liquid Glass Navbar Filter -->\n <filter id=\"liquidNavbar\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feTurbulence baseFrequency=\"0.01\" numOctaves=\"2\" result=\"noise\"/>\n <feDisplacementMap in=\"SourceGraphic\" in2=\"noise\" scale=\"3\" result=\"distort\"/>\n <feGaussianBlur in=\"distort\" stdDeviation=\"2\" result=\"blur\"/>\n <feColorMatrix in=\"blur\" type=\"matrix\" \n values=\"1.1 0 0 0 0 0 1.1 0 0 0 0 0 1.2 0 0 0 0 0 0.95 0\"/>\n <feOffset in=\"blur\" dx=\"0\" dy=\"4\" result=\"shadow\"/>\n <feMerge>\n <feMergeNode in=\"shadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Frosted Glass Effect -->\n <filter id=\"frostedGlass\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n <feTurbulence baseFrequency=\"0.9\" numOctaves=\"4\" stitchTiles=\"stitch\" result=\"noise\"/>\n <feColorMatrix in=\"noise\" type=\"saturate\" values=\"0\"/>\n <feComponentTransfer in=\"noise\" result=\"morenoise\">\n <feFuncA type=\"discrete\" tableValues=\"0.1 0.15 0.2 0.25 0.3\"/>\n </feComponentTransfer>\n <feComposite in=\"SourceGraphic\" in2=\"morenoise\" operator=\"over\" result=\"composite\"/>\n <feGaussianBlur in=\"composite\" stdDeviation=\"1.5\" result=\"blur\"/>\n <feOffset in=\"blur\" dx=\"0\" dy=\"2\" result=\"offset\"/>\n <feMerge>\n <feMergeNode in=\"offset\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Glass Base Filter -->\n <filter id=\"glassBase\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\" result=\"blur\"/>\n <feColorMatrix in=\"blur\" type=\"matrix\" \n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.85 0\"/>\n <feOffset in=\"blur\" dx=\"0\" dy=\"4\" result=\"shadow\"/>\n <feMerge>\n <feMergeNode in=\"shadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Button Glass Effect -->\n <filter id=\"buttonGlass\" x=\"-25%\" y=\"-25%\" width=\"150%\" height=\"150%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1.5\" result=\"buttonBlur\"/>\n <feColorMatrix in=\"buttonBlur\" type=\"matrix\" \n values=\"1.02 0 0 0 0 0 1.02 0 0 0 0 0 1.05 0 0 0 0 0 0.88 0\"/>\n <feOffset in=\"buttonBlur\" dx=\"0\" dy=\"3\" result=\"buttonShadow\"/>\n <feMerge>\n <feMergeNode in=\"buttonShadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Card Glass Effect -->\n <filter id=\"cardGlass\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2.5\" result=\"cardBlur\"/>\n <feColorMatrix in=\"cardBlur\" type=\"matrix\" \n values=\"1.05 0 0 0 0 0 1.05 0 0 0 0 0 1.1 0 0 0 0 0 0.8 0\"/>\n <feOffset in=\"cardBlur\" dx=\"0\" dy=\"6\" result=\"cardShadow\"/>\n <feMerge>\n <feMergeNode in=\"cardShadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Glow Effect -->\n <filter id=\"cleanGlow\" x=\"-100%\" y=\"-100%\" width=\"300%\" height=\"300%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"4\" result=\"coloredBlur\"/>\n <feColorMatrix in=\"coloredBlur\" type=\"matrix\" \n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.6 0\"/>\n <feOffset in=\"coloredBlur\" dx=\"0\" dy=\"2\" result=\"glowShadow\"/>\n <feMerge> \n <feMergeNode in=\"glowShadow\"/>\n <feMergeNode in=\"coloredBlur\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Subtle Enhancement -->\n <filter id=\"subtleEnhancement\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"0.8\" result=\"subtleBlur\"/>\n <feColorMatrix in=\"subtleBlur\" type=\"matrix\" \n values=\"1.01 0 0 0 0 0 1.01 0 0 0 0 0 1.02 0 0 0 0 0 0.92 0\"/>\n <feOffset in=\"subtleBlur\" dx=\"0\" dy=\"1\" result=\"subtleOffset\"/>\n <feMerge>\n <feMergeNode in=\"subtleOffset\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Shimmer Effect -->\n <filter id=\"shimmerEffect\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1\" result=\"shimmerBlur\"/>\n <feColorMatrix in=\"shimmerBlur\" type=\"matrix\" \n values=\"1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.3 0 0 0 0 0 0.7 0\"/>\n <feOffset in=\"shimmerBlur\" dx=\"0\" dy=\"1\" result=\"shimmerOffset\"/>\n <feMerge>\n <feMergeNode in=\"shimmerOffset\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Navbar Glass Effect -->\n <filter id=\"navbarGlass\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1.5\" result=\"navBlur\"/>\n <feColorMatrix in=\"navBlur\" type=\"matrix\" \n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0\"/>\n <feOffset in=\"navBlur\" dx=\"0\" dy=\"2\" result=\"navShadow\"/>\n <feMerge>\n <feMergeNode in=\"navShadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Profile Glass Effect -->\n <filter id=\"profileGlass\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" result=\"profileBlur\"/>\n <feColorMatrix in=\"profileBlur\" type=\"matrix\" \n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.7 0\"/>\n <feOffset in=\"profileBlur\" dx=\"0\" dy=\"8\" result=\"profileShadow\"/>\n <feMerge>\n <feMergeNode in=\"profileShadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Avatar Glow Effect -->\n <filter id=\"avatarGlow\" x=\"-100%\" y=\"-100%\" width=\"300%\" height=\"300%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"6\" result=\"avatarBlur\"/>\n <feColorMatrix in=\"avatarBlur\" type=\"matrix\" \n values=\"1.1 0 0 0 0 0 1.1 0 0 0 0 0 1.2 0 0 0 0 0 0.6 0\"/>\n <feMerge> \n <feMergeNode in=\"avatarBlur\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n\n <!-- Clean Comment Glass Effect -->\n <filter id=\"commentGlass\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2.5\" result=\"commentBlur\"/>\n <feColorMatrix in=\"commentBlur\" type=\"matrix\" \n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.8 0\"/>\n <feOffset in=\"commentBlur\" dx=\"0\" dy=\"6\" result=\"commentShadow\"/>\n <feMerge>\n <feMergeNode in=\"commentShadow\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n </defs>\n</svg>\n"; export declare function injectLiquidGlassFilters(): void;