{"id":14962518,"url":"https://github.com/warningimhack3r/svelte-neomarquee","last_synced_at":"2026-03-01T14:02:32.258Z","repository":{"id":251795167,"uuid":"838469995","full_name":"WarningImHack3r/svelte-neomarquee","owner":"WarningImHack3r","description":"An event-driven and feature-rich marquee component for Svelte","archived":false,"fork":false,"pushed_at":"2025-02-06T03:39:49.000Z","size":61,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T04:27:08.998Z","etag":null,"topics":["component","css","html","marquee","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-neomarquee","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/WarningImHack3r.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}},"created_at":"2024-08-05T17:51:10.000Z","updated_at":"2025-01-12T18:41:31.000Z","dependencies_parsed_at":"2024-08-05T20:57:18.863Z","dependency_job_id":"1369e778-7cb7-4355-a887-63e281ef30b8","html_url":"https://github.com/WarningImHack3r/svelte-neomarquee","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"3fa43babe58a511df393399332a3b50ca788888d"},"previous_names":["warningimhack3r/svelte-neomarquee"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fsvelte-neomarquee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fsvelte-neomarquee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fsvelte-neomarquee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fsvelte-neomarquee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WarningImHack3r","download_url":"https://codeload.github.com/WarningImHack3r/svelte-neomarquee/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238043943,"owners_count":19407117,"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":["component","css","html","marquee","svelte"],"created_at":"2024-09-24T13:29:54.149Z","updated_at":"2025-10-24T22:32:26.496Z","avatar_url":"https://github.com/WarningImHack3r.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-neomarquee\n\n![Static Badge](https://img.shields.io/badge/Svelte-orange?logo=svelte\u0026logoColor=white)\n![NPM Version](https://img.shields.io/npm/v/svelte-neomarquee)\n![NPM Downloads](https://img.shields.io/npm/dw/svelte-neomarquee)\n![NPM Type Definitions](https://img.shields.io/npm/types/svelte-neomarquee)\n![NPM License](https://img.shields.io/npm/l/svelte-neomarquee)\n\nAn event-driven and feature-rich marquee component for Svelte.\n\n## Motivation\n\nExisting marquee libraries either lack of features, customization or ease of use.\nIts goal is to start from [svelte-fast-marquee](https://github.com/abosch19/svelte-fast-marquee) and [svelte-marquee\n](https://github.com/selemondev/svelte-marquee) and leverage the UX and customization possibilities.\n\n## Features\n\n- Highly customizable\n- Strongly typed\n- Event-driven\n- TailwindCSS-compatible\n\n## Installation\n\n```shell\n# pnpm\npnpm i -D svelte-neomarquee\n# npm\nnpm i -D svelte-neomarquee\n# bun\nbun i -D svelte-neomarquee\n# yarn\nyarn add -D svelte-neomarquee\n```\n\n## Usage\n\n### Props\n\n|          Name          |                 Type                  | Description                                                                                                     | Mandatory | Default value |\n| :--------------------: | :-----------------------------------: | :-------------------------------------------------------------------------------------------------------------- | :-------: | :-----------: |\n|         `play`         |                boolean                | Whether the marquee should play                                                                                 |    No     |    `true`     |\n|      `playsCount`      |                number                 | The number of times the marquee should play (0 = infinite)                                                      |    No     |      `0`      |\n|        `speed`         |                number                 | The speed of the marquee, relative to its width/height                                                          |    No     |     `100`     |\n|      `direction`       | `\"left\" \\| \"right\" \\| \"up\" \\| \"down\"` | The direction of the marquee                                                                                    |    No     |   `\"right\"`   |\n|         `mode`         |       `\"single\" \\| \"multiple\"`        | Whether to repeat the slot content once or multiple times                                                       |    No     | `\"multiple\"`  |\n|     `showGradient`     |                boolean                | Whether to show a gradient on both ends; takes precedence over `showLeadingGradient` and `showTrailingGradient` |    No     |    `false`    |\n| `showLeadingGradient`  |                boolean                | Whether to show a gradient on the first edge; overwritten by `showGradient`                                     |    No     |    `false`    |\n| `showTrailingGradient` |                boolean                | Whether to show a gradient on the last edge; overwritten by `showGradient`                                      |    No     |    `false`    |\n\nYou can also pass:\n\n- `style` to add inline styles to the marquee container\n- `class` to add classes to the marquee container\n- any other prop, which will be passed to the marquee container\n\nAdditionally, you can bind `clientWidth` and `clientHeight` to get the width and height of the marquee container.\n\n### CSS variables\n\nYou can pass the following CSS variables through the `style` prop (or through `class` with TailwindCSS) to customize the\nmarquee:\n\n| Variable           |  Type  | Description                             | Mandatory |    Default value    |\n| :----------------- | :----: | :-------------------------------------- | :-------: | :-----------------: |\n| `--gap`            | string | The gap between elements in the marquee |    No     |         `0`         |\n| `--gradient-width` | string | The width of the gradient on both sides |    No     |        `10%`        |\n| `--gradient-color` | string | The color of the gradient               |    No     | `black` (`#000000`) |\n\n### Events\n\n| Name         | Description                                                                          | Event `detail`'s parameters                                     |\n| :----------- | :----------------------------------------------------------------------------------- | :-------------------------------------------------------------- |\n| `playstart`  | The marquee starts playing                                                           | None                                                            |\n| `playpause`  | The marquee pauses playing (`play` set to `false` but animation not ended)           | `progress`: the current progress, between 0 and 1 for each play |\n| `playend`    | The marquee ends its animation (only triggered on animation end if `playsCount` \u003e 0) | None                                                            |\n| `progress`   | The current progress of the marquee, live-updated                                    | `progress`: the current progress, between 0 and 1 for each play |\n| `hoverstart` | The mouse enters the marquee                                                         | None                                                            |\n| `hoverend`   | The mouse leaves the marquee                                                         | None                                                            |\n\n### Slots\n\n| Name | Description                         |\n| :--: | :---------------------------------- |\n|  -   | Elements to show inside the marquee |\n\n## Examples\n\n### Basic\n\n```svelte\n\u003cscript\u003e\n\timport Marquee from \"svelte-neomarquee\";\n\u003c/script\u003e\n\n\u003cMarquee\u003e\n\t{#each Array(10) as _, i}\n\t\t\u003cspan\u003eElement {i + 1}\u003c/span\u003e\n\t{/each}\n\u003c/Marquee\u003e\n```\n\n### Pause on hover\n\n```svelte\n\u003cscript\u003e\n\timport Marquee from \"svelte-neomarquee\";\n\n\tlet play = true;\n\u003c/script\u003e\n\n\u003cMarquee bind:play on:hoverstart={() =\u003e (play = false)} on:hoverend={() =\u003e (play = true)}\u003e\n\t...\n\u003c/Marquee\u003e\n```\n\n### Custom speed\n\n```svelte\n\u003cscript\u003e\n\timport Marquee from \"svelte-neomarquee\";\n\u003c/script\u003e\n\n\u003cMarquee speed={200}\u003e...\u003c/Marquee\u003e\n```\n\n### Custom gradient\n\n```svelte\n\u003cscript\u003e\n\timport Marquee from \"$lib\";\n\u003c/script\u003e\n\n\u003cMarquee showGradient style=\"--gradient-color: red; --gradient-width: 200px\"\u003e...\u003c/Marquee\u003e\n\u003c!-- or with TailwindCSS --\u003e\n\u003cMarquee showGradient class=\"[--gradient-color:_red] [--gradient-width:_200px]\"\u003e...\u003c/Marquee\u003e\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarningimhack3r%2Fsvelte-neomarquee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarningimhack3r%2Fsvelte-neomarquee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarningimhack3r%2Fsvelte-neomarquee/lists"}