{"id":13479803,"url":"https://github.com/d2phap/fluent-reveal-effect","last_synced_at":"2025-04-05T17:09:25.124Z","repository":{"id":41583768,"uuid":"116904044","full_name":"d2phap/fluent-reveal-effect","owner":"d2phap","description":"Fluent Reveal Effect JavaScript library for web","archived":false,"fork":false,"pushed_at":"2024-05-02T08:53:13.000Z","size":828,"stargazers_count":220,"open_issues_count":3,"forks_count":23,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-29T16:05:55.582Z","etag":null,"topics":["css-framework","fluent-design","fluent-design-system","fluent-interface","fluent-ui","javascript","javascript-plugin","reveal-effect","ui-components","ui-kit"],"latest_commit_sha":null,"homepage":"https://d2phap.github.io/fluent-reveal-effect","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d2phap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["d2phap"],"patreon":"d2phap","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://donate.stripe.com/6oE15Kab3740du828a","https://www.paypal.me/d2phap"]}},"created_at":"2018-01-10T03:38:38.000Z","updated_at":"2025-02-15T12:14:47.000Z","dependencies_parsed_at":"2024-03-03T00:32:12.017Z","dependency_job_id":"abd95bc5-f961-4d31-874e-df267c7032a0","html_url":"https://github.com/d2phap/fluent-reveal-effect","commit_stats":{"total_commits":65,"total_committers":5,"mean_commits":13.0,"dds":"0.27692307692307694","last_synced_commit":"39b7d557e9b26b94182f29f45f6b787dbb393902"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Ffluent-reveal-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Ffluent-reveal-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Ffluent-reveal-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d2phap%2Ffluent-reveal-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d2phap","download_url":"https://codeload.github.com/d2phap/fluent-reveal-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css-framework","fluent-design","fluent-design-system","fluent-interface","fluent-ui","javascript","javascript-plugin","reveal-effect","ui-components","ui-kit"],"created_at":"2024-07-31T16:02:23.233Z","updated_at":"2025-04-05T17:09:25.081Z","avatar_url":"https://github.com/d2phap.png","language":"TypeScript","funding_links":["https://github.com/sponsors/d2phap","https://patreon.com/d2phap","https://donate.stripe.com/6oE15Kab3740du828a","https://www.paypal.me/d2phap"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Reveal Effect library (Fluent Design System)\nApply reveal effect to border and background of elements.\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_shield)\n\n![Screenshot](https://github.com/d2phap/fluent-ui/raw/master/docs/screenshot.png)\n\n\n### Demo\n- https://imageglass.org/\n- https://d2phap.github.io/fluent-reveal-effect/\n\n## Install\nRun the command\n```\nnpm i fluent-reveal-effect@latest\n```\n\nNPM package: https://www.npmjs.com/package/fluent-reveal-effect\n\n## Usage\n\n### Import the library\n```js\nimport { applyEffect } from \"fluent-reveal-effect\"\n```\n\n\n### Basic CSS\n```css\n.btn {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\n  padding: 1rem 2rem;\n  background-color: #333;\n  color: #fff;\n  border: 0;\n\n  transition: all 200ms ease;\n}\n.btn-border {\n  display: inline-block;\n  margin: 5px;\n}\n.btn-border .btn {\n  display: block;\n  margin: 2px;\n}\n```\n\n\n### Apply background effect\n#### HTML mockup\n```html\n\u003cbutton class=\"btn\"\u003eButton 1\u003c/button\u003e\n```\n#### JavaScript\n```js\napplyEffect('.btn', {\n  lightColor: 'rgba(255,255,255,0.1)',\n  gradientSize: 150,\n});\n```\n\n#### Enable Ripple click effect\n````js\napplyEffect('.btn', {\n  clickEffect: true,\n});\n````\n\n### Apply border and background effect\n#### HTML mockup\n```html\n\u003cdiv class=\"effect-group-container\"\u003e\n  \u003cdiv class=\"btn-border\"\u003e\n    \u003cbutton class=\"btn\"\u003eButton 2\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-border\"\u003e\n    \u003cbutton class=\"btn\"\u003eButton 3\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-border\"\u003e\n    \u003cbutton class=\"btn\"\u003eButton 4\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### JavaScript\n```js\napplyEffect('.effect-group-container', {\n  clickEffect: true,\n  lightColor: 'rgba(255,255,255,0.6)',\n  gradientSize: 80,\n  isContainer: true,\n  children: {\n    borderSelector: '.btn-border',\n    elementSelector: '.btn',\n    lightColor: 'rgba(255,255,255,0.3)',\n    gradientSize: 150\n  }\n})\n```\n\n## Donate\nIf you feel this little library useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it.\n\nThanks for your gratitude and finance help!\n\n\u003ca href=\"https://www.paypal.me/d2phap\" target=\"_blank\" title=\"Buy me a beer?\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/PayPal-Donate%20$10%20-009be1.svg?maxAge=3600\" height=\"30\" alt=\"Buy me a beer?\"\u003e\n\u003c/a\u003e\n\n\n\n## License\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Ffluent-reveal-effect?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd2phap%2Ffluent-reveal-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd2phap%2Ffluent-reveal-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd2phap%2Ffluent-reveal-effect/lists"}