{"id":30694159,"url":"https://github.com/harshmandan/svelte-overflow-fade","last_synced_at":"2025-09-02T06:04:16.486Z","repository":{"id":311082029,"uuid":"1038463885","full_name":"harshmandan/svelte-overflow-fade","owner":"harshmandan","description":"Svelte attachment and action to enable overflow fade for slick looking effect ✨","archived":false,"fork":false,"pushed_at":"2025-08-16T11:57:52.000Z","size":520,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-31T03:03:55.461Z","etag":null,"topics":["css","library","svelte","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"https://harshmandan.github.io/svelte-overflow-fade/","language":"Svelte","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/harshmandan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2025-08-15T08:43:20.000Z","updated_at":"2025-08-27T20:55:08.000Z","dependencies_parsed_at":"2025-08-22T02:54:35.397Z","dependency_job_id":"38883f91-4ea4-4313-b494-7725ca39fb41","html_url":"https://github.com/harshmandan/svelte-overflow-fade","commit_stats":null,"previous_names":["harshmandan/svelte-overflow-fade"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/harshmandan/svelte-overflow-fade","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Fsvelte-overflow-fade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Fsvelte-overflow-fade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Fsvelte-overflow-fade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Fsvelte-overflow-fade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harshmandan","download_url":"https://codeload.github.com/harshmandan/svelte-overflow-fade/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harshmandan%2Fsvelte-overflow-fade/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273238762,"owners_count":25069762,"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","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"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":["css","library","svelte","sveltejs","sveltekit"],"created_at":"2025-09-02T06:04:15.932Z","updated_at":"2025-09-02T06:04:16.443Z","avatar_url":"https://github.com/harshmandan.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"./static/logo.png\" alt=\"Svelte Overflow Fade\" width=\"100\" height=\"100\" /\u003e\n  \u003ch1\u003esvelte-overflow-fade\u003c/h1\u003e\n  \u003ca href=\"https://www.npmjs.com/package/svelte-overflow-fade\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/svelte-overflow-fade\"/\u003e\n  \u003c/a\u003e\n  \u003cp\u003e\n    \u003cstrong\u003eA Svelte action and attachment for adding beautiful fade effects to overflowing content\u003c/strong\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./static/preview.png\" alt=\"Svelte Overflow Fade Preview\" width=\"100%\" style=\"width: 600px;\" /\u003e\n\u003c/div\u003e\n\n## 🖼️ Demo\n\n[Live Demo →](https://harshmandan.github.io/svelte-overflow-fade/)\n\n## ✨ Features\n\n- 🎨 **Two fade modes**: CSS mask-based or DOM element-based\n- 🔄 **Dual API support**: Actions for all Svelte versions, Attachments for Svelte 5.29+\n- 📏 **Directional scrolling**: Supports both horizontal and vertical overflow\n- 🎯 **Smart detection**: Automatically shows/hides fades based on scroll position\n- ⚡ **Performant**: Throttled scroll events and optimized animations\n- 🌗 **Dark mode ready**: Works seamlessly with any color scheme\n- 📦 **Zero dependencies**: Lightweight and self-contained\n\n## 📦 Installation\n\n```bash\nnpm install svelte-overflow-fade\n```\n\n```bash\npnpm add svelte-overflow-fade\n```\n\n```bash\nyarn add svelte-overflow-fade\n```\n\n## 🚀 Quick Start\n\n### Using the Action API (All Svelte versions)\n\n```svelte\n\u003cscript\u003e\n\timport { overflowFadeAction } from 'svelte-overflow-fade';\n\u003c/script\u003e\n\n\u003cdiv\n\tclass=\"overflow-auto max-h-64\"\n\tuse:overflowFadeAction={{\n\t\taxis: 'y',\n\t\tfade: { type: 'mask', fadePercent: 10 }\n\t}}\n\u003e\n\t\u003c!-- Your scrollable content --\u003e\n\u003c/div\u003e\n```\n\n### Using the Attachment API (Svelte 5.29+)\n\n```svelte\n\u003cscript\u003e\n\timport { overflowFade } from 'svelte-overflow-fade';\n\u003c/script\u003e\n\n\u003cdiv\n\tclass=\"overflow-auto max-h-64\"\n\t{@attach overflowFade({\n\t\taxis: 'y',\n\t\tfade: { type: 'mask', fadePercent: 10 }\n\t})}\n\u003e\n\t\u003c!-- Your scrollable content --\u003e\n\u003c/div\u003e\n```\n\n## ⚙️ Configuration Options\n\n| Option                 | Type                  | Description                                   |\n| ---------------------- | --------------------- | --------------------------------------------- |\n| `axis`                 | `'x' \\| 'y'`          | Direction of scroll (horizontal or vertical)  |\n| `fade.type`            | `'mask' \\| 'element'` | Fade implementation method                    |\n| `fade.fadePercent`     | `number`              | Size of fade as percentage (mask mode only)   |\n| `fade.size`            | `string`              | Size of fade in CSS units (element mode only) |\n| `fade.backgroundColor` | `string`              | Fade color (element mode only)                |\n| `fade.zIndex`          | `number`              | Z-index for fade elements (element mode only) |\n\n## 🎨 Fade Modes\n\n### CSS Mask Mode (Recommended)\n\n- Uses CSS `mask-image` for smooth, native fading\n- Perfect for gradient backgrounds\n- Better performance\n- Preserves background effects\n\n```javascript\nfade: {\n  type: 'mask',\n  fadePercent: 10\n}\n```\n\n### Element Mode\n\n- Creates DOM elements with gradient backgrounds\n- Compatible with older browsers\n- Customizable fade color\n- Good for solid backgrounds\n\n```javascript\nfade: {\n  type: 'element',\n  size: '60px',\n  backgroundColor: 'white',\n  zIndex: 10\n}\n```\n\n## 🔄 Events\n\nThe action dispatches an `overflow` event with the current overflow state:\n\n```svelte\n\u003cscript\u003e\n\tfunction handleOverflow(event) {\n\t\tconst { overflowTop, overflowBottom, overflowLeft, overflowRight } = event.detail;\n\t\t// React to overflow changes\n\t}\n\u003c/script\u003e\n\n\u003cdiv use:overflowFadeAction={{ axis: 'y' }} on:overflow={handleOverflow}\u003e\n\t\u003c!-- Content --\u003e\n\u003c/div\u003e\n```\n\n## 📄 License\n\nMIT © Harsh Mandan\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshmandan%2Fsvelte-overflow-fade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharshmandan%2Fsvelte-overflow-fade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharshmandan%2Fsvelte-overflow-fade/lists"}