{"id":18563270,"url":"https://github.com/compulim/react-scrolling-background","last_synced_at":"2026-02-11T17:34:21.025Z","repository":{"id":209780331,"uuid":"724929251","full_name":"compulim/react-scrolling-background","owner":"compulim","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-24T02:18:19.000Z","size":900,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-25T15:27:13.588Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/react-scrolling-background/","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/compulim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-29T04:33:04.000Z","updated_at":"2025-12-24T02:18:22.000Z","dependencies_parsed_at":"2024-05-30T04:47:47.798Z","dependency_job_id":"fa328a07-d862-4509-9b98-846f1d0019bc","html_url":"https://github.com/compulim/react-scrolling-background","commit_stats":null,"previous_names":["compulim/css-scrolling-background","compulim/react-scrolling-background"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/compulim/react-scrolling-background","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-scrolling-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-scrolling-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-scrolling-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-scrolling-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/compulim","download_url":"https://codeload.github.com/compulim/react-scrolling-background/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/compulim%2Freact-scrolling-background/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29339672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T16:14:43.024Z","status":"ssl_error","status_checked_at":"2026-02-11T16:14:15.258Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-06T22:12:13.347Z","updated_at":"2026-02-11T17:34:20.990Z","avatar_url":"https://github.com/compulim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-scrolling-background`\n\nGPU-based subtle scrolling background, support [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), reduced motion, sub-pixel movement, and auto stop.\n\n## Background\n\nCheck out the [live demo](https://compulim.github.io/react-scrolling-background/).\n\nThis component is a fancy scrolling background to enhance simple projects.\n\nNote: despite the scrolling effect is purely based on CSS with GPU support, a large portion of the website will need to be updated frequently. Inevitably, this is putting a huge toll on CPU. Please use this component with care.\n\n## How to use\n\nThe background component is a standalone component. It can be configured using React props and CSS custom properties.\n\n### Configuring using React props\n\n```tsx\nimport { ScrollingBackground } from 'react-scrolling-background';\n\nrender(\n  \u003cScrollingBackground\n    backgroundColor=\"red\"\n    backgroundImage={`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...`}\n  /\u003e\n);\n```\n\n### Configuring using CSS custom properties\n\n```tsx\nimport { ScrollingBackground } from 'react-scrolling-background';\n\nrender(\n  \u003cScrollingBackground\n    style={{\n      '--react-scrolling-background__background-color': 'red',\n      '--react-scrolling-background__background-image': `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...`\n    }}\n  /\u003e\n);\n```\n\n## API\n\n### React component\n\n```ts\nconst ScrollingBackground = ({\n  backgroundColor?: string;\n  backgroundImage?: string;\n  className?: string;\n  duration?: number;\n  nonce?: string;\n  speed?: number;\n  style?: CSSProperties;\n}) =\u003e ReactElement;\n```\n\n### CSS custom properties\n\nWhen setting custom properties via CSS stylesheet, sets the CSS custom properties under the `react-scrolling-background__vars` element.\n\n```css\n.react-scrolling-background__vars {\n  --react-scrolling-background__background-color: \u003ccolor\u003e;\n  --react-scrolling-background__background-image: \u003cimage\u003e;\n  --react-scrolling-background__duration: \u003ctime\u003e;\n  --react-scrolling-background__speed: \u003cnumber\u003e;\n}\n```\n\n### Options\n\n| Props name        | Type                                                                               | Description                                                                                                                                                                                                                                                                                                                                                                               |\n| ----------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `backgroundColor` | `string`/[`\u003ccolor\u003e`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | [Background color CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color).\u003cbr /\u003e\u003cbr /\u003eCan also specify via CSS custom property `--react-scrolling-background__background-color`.                                                                                                                                                                                 |\n| `backgroundImage` | `string`/[`\u003cimage\u003e`](https://developer.mozilla.org/en-US/docs/Web/CSS/image)       | [Background image CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image).\u003cbr /\u003e\u003cbr /\u003eCan also specify via CSS custom property `--react-scrolling-background__background-image`.                                                                                                                                                                                 |\n| `className`       | `string`                                                                           | CSS class to apply to the background container element.                                                                                                                                                                                                                                                                                                                                   |\n| `duration`        | `number`/[`\u003ctime\u003e`](https://developer.mozilla.org/en-US/docs/Web/CSS/time)         | Durations (in milliseconds) to scroll the background. Defaults to 10 minutes.\u003cbr /\u003e\u003cbr /\u003eCan also specify via CSS custom property `--react-scrolling-background__duration`.                                                                                                                                                                                                              |\n| `nonce`           | `string`                                                                           | Nonce for allowlisting specific elements under content security policy.\u003cbr /\u003e\u003cbr /\u003eThis package requires `script-src` and `style-src`.                                                                                                                                                                                                                                                    |\n| `speed`           | `string`/[`\u003cnumber\u003e`](https://developer.mozilla.org/en-US/docs/Web/CSS/number)     | Speed of the scrolling defined by number of full rotations done within the duration. Defaults to 3, meaning 3 full rotations in 10 minutes.\u003cbr /\u003e\u003cbr /\u003eNote: Speed will change depends on the container width. Narrower container will have its background scroll slower than wider container.\u003cbr /\u003e\u003cbr /\u003eCan also specify via CSS custom property `--react-scrolling-background__speed`. |\n| `style`           | [`CSS.Properties`](https://www.npmjs.com/package/csstype)                          | CSS properties to apply to the main element.                                                                                                                                                                                                                                                                                                                                              |\n\n### CSS selectors\n\n| Selector                             | Description                                            |\n| ------------------------------------ | ------------------------------------------------------ |\n| `.react-scrolling-background__image` | Background image element.                              |\n| `.react-scrolling-background__vars`  | Content element for storing all CSS custom properties. |\n\n## Behaviors\n\n### Setting CSS custom property to `initial` is not working in Firefox\n\nAs of this writing, Firefox 120 does not support [`CSS.registerProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty_static) and [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) rule yet. Setting a custom property to `initial` will not reset it back to the default value.\n\n### Should I use React props or CSS custom properties?\n\n`react-scrolling-background` supports 2 ways to configure: React props and CSS custom properties.\n\nUnless certain effect is required, we recommend using React props. Compare to CSS custom properties, props provides best type-safety features.\n\n### How can I modify `background-size` and other CSS properties of the background image?\n\nYou can use the CSS selector `.react-scrolling-background__image` to select the image element and set `background-size` and various CSS properties. Additional CSS selectors can be found in [this section](#css-selectors).\n\n## Credits\n\n[\"Hero Patterns\"](https://heropatterns.com/) by [Steve Schoger](https://twitter.com/steveschoger) is licensed under [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/).\n\n## Contributions\n\nLike us? [Star](https://github.com/compulim/react-scrolling-background/stargazers) us.\n\nWant to make it better? [File](https://github.com/compulim/react-scrolling-background/issues) us an issue.\n\nDon't like something you see? [Submit](https://github.com/compulim/react-scrolling-background/pulls) a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Freact-scrolling-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcompulim%2Freact-scrolling-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulim%2Freact-scrolling-background/lists"}