{"id":51377230,"url":"https://github.com/anassmdi/ngx-glassy-effect","last_synced_at":"2026-07-05T21:00:35.651Z","repository":{"id":363618222,"uuid":"1263565435","full_name":"anassmdi/ngx-glassy-effect","owner":"anassmdi","description":"Liquid Glassy effect directive for Angular.","archived":false,"fork":false,"pushed_at":"2026-06-27T19:04:10.000Z","size":18952,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-27T19:08:51.268Z","etag":null,"topics":["angular","glassmorphism","liquid-glass"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-glassy-effect","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anassmdi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-09T04:22:14.000Z","updated_at":"2026-06-27T19:04:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/anassmdi/ngx-glassy-effect","commit_stats":null,"previous_names":["anassmdi/ngx-glassy-effect"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anassmdi/ngx-glassy-effect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anassmdi%2Fngx-glassy-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anassmdi%2Fngx-glassy-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anassmdi%2Fngx-glassy-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anassmdi%2Fngx-glassy-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anassmdi","download_url":"https://codeload.github.com/anassmdi/ngx-glassy-effect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anassmdi%2Fngx-glassy-effect/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","glassmorphism","liquid-glass"],"created_at":"2026-07-03T14:00:27.947Z","updated_at":"2026-07-05T21:00:35.644Z","avatar_url":"https://github.com/anassmdi.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Visual Effects"],"readme":"# NGX Glassy Effect\n\n[![npm downloads](https://img.shields.io/npm/dm/ngx-glassy-effect.svg)](https://npmjs.org/ngx-glassy-effect)\n[![npm](https://img.shields.io/npm/l/ngx-glassy-effect.svg)](/LICENSE)\n\nThis project is an Angular directive that applies a glassy effect to your html elements.\n\n## Installation\n\n```shell\nnpm install ngx-glassy-effect --save\n```\n\n## Setup\n\n```ts\nimport { Component } from '@angular/core';\nimport { GlassyEffect } from 'ngx-glassy-effect';\n\n@Component({\n  selector: 'app-root',\n  imports: [GlassyEffect], // Imported as directive into your standalone component\n  templateUrl: './app.html',\n  styleUrl: './app.css'\n})\nexport class App {\n}\n```\n\n```html\n\u003c!-- Use in your html element as a directive, \u0026 configure it as your wish --\u003e\n\u003cdiv class=\"content\"\n     ngxGlassyEffect\n     [blur]=\"1.5\"\n     [scale]=\"50\"\n     [bezel]=\"10\"\n     [profile]=\"'squircle'\"\n     [showBorder]=\"true\"\n     [lensRange]=\"100\"\n     [reflectionMidpoint]=\"0.2\"\u003e\n  Hello - Bonjour - مرحبا\n\u003c/div\u003e\n```\n\n\u003e Tip 1 **: If your div (.content for example) text is white \u0026 the background behind the div is light, give your div a semi-transparent background, like rgba(0, 0, 0, 0.35), to keep your text visible \u0026 readable, all without losing the glassy effect.\n\n```css\n/* Tip 1 */\n.content {\n  /* ... */\n  color: white;\n  background-color: rgb(52 52 52 / 0.2);\n}\n```\n\n\u003e Tip 2 : If the default borders aren't working for you, you can just remove [showBorder] or make it 'false', \u0026 give the element of ngxGlassyEffect the border you like using css.\n\n```css\n/* Tip 2 */\n.content {\n  /* ... */\n  border: turquoise 2px solid;\n}\n```\n\n## Demo\n\n#### First demo that shows how it reflects so well with any border-radius \u0026 any size of the box you're applying it to.\n\n![Default](/about/preview.gif)\n\n\u003e The source code of the demo is in '/projects/glassy-effect-test'\n\n#### [Version 2.0.0 update] Another demo with a real-life example, it shows how close the reflection gets to the real apple's ios liquid glass.\n\n![Default](/about/preview2.gif)\n\n\u003e Note : in this example, the 'lensRange' has been set to 60, since the container has smaller width/height\n\n## Configuration\n\n- If you wish to customize the inputs values, here's a full description of all the variables :\n\n| Input              | Type                  | Default   | Description                                                                                         |\n|--------------------|-----------------------|-----------|-----------------------------------------------------------------------------------------------------|\n| bezel              | number                | 10        | The width of the refractive edge bevel in pixels.                                                   |\n| scale              | number                | 50        | The intensity of the glass refraction distortion map.                                               |\n| blur               | number                | 1.5       | The backdrop blur intensity factor applied to the substrate.                                        |\n| profile            | 'circle' / 'squircle' | 'squircle | The geometric falloff curve used to generate the edge normals.                                      |\n| showBorder         | boolean               | false     | Dynamically injects an anti-aliased pseudo-border running a dynamic light-angle alignment gradient. |\n| lensRange          | number                | 100       | The spatial scope/influence bounding box of the border lens effect.                                 |\n| reflectionMidpoint | number                | 0.2       | The turning midpoint ratio where edge glare achieves peak reflection values.                        |\n\n## Contribute\n\n- Contributions, bug reports, and structural feature requests are welcome! Feel free to open an issue or submit a pull request on the official GitHub repository.\n\n## Author\n\n- Anassmdi\n- GitHub: @anassmdi\n- NPM Package: ngx-glassy-effect\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanassmdi%2Fngx-glassy-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanassmdi%2Fngx-glassy-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanassmdi%2Fngx-glassy-effect/lists"}