{"id":33096514,"url":"https://bigspaceship.github.io/shine.js/","last_synced_at":"2025-11-14T23:00:49.593Z","repository":{"id":15641190,"uuid":"18378216","full_name":"bigspaceship/shine.js","owner":"bigspaceship","description":"A library for pretty shadows.","archived":false,"fork":false,"pushed_at":"2016-12-16T17:57:03.000Z","size":696,"stargazers_count":2180,"open_issues_count":4,"forks_count":180,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-11-11T07:41:11.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bigspaceship.github.io/shine.js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"isteven/angular-multi-select","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigspaceship.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}},"created_at":"2014-04-02T19:16:23.000Z","updated_at":"2025-10-19T11:42:31.000Z","dependencies_parsed_at":"2022-07-14T01:00:34.479Z","dependency_job_id":null,"html_url":"https://github.com/bigspaceship/shine.js","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/bigspaceship/shine.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigspaceship%2Fshine.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigspaceship%2Fshine.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigspaceship%2Fshine.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigspaceship%2Fshine.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigspaceship","download_url":"https://codeload.github.com/bigspaceship/shine.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigspaceship%2Fshine.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284476937,"owners_count":27011771,"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-11-14T02:00:06.101Z","response_time":56,"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":[],"created_at":"2025-11-14T20:00:27.829Z","updated_at":"2025-11-14T23:00:49.585Z","avatar_url":"https://github.com/bigspaceship.png","language":"JavaScript","funding_links":[],"categories":["Utilities","JavaScript Graphics"],"sub_categories":["React Components"],"readme":"# shine.js\n\nA library for pretty shadows.\n\nSee the working demo at [http://bigspaceship.github.io/shine.js/](http://bigspaceship.github.io/shine.js/).\n\n## Get Started [![Inline docs](http://inch-ci.org/github/bigspaceship/shine.js.svg?branch=master)](http://inch-ci.org/github/bigspaceship/shine.js)\n\nInstall using bower: `bower install shine` or [download as zip](https://github.com/bigspaceship/shine.js/archive/master.zip) or [fork on GitHub](https://github.com/bigspaceship/shine.js).\n\nCreate a Shine.js instance for each DOM element you'd like to shine:\n\n```javascript\nvar shine = new Shine(document.getElementById('my-shine-object'));\n```\n\nChange the light position and make sure to redraw:\n\n```javascript\nshine.light.position.x = window.innerWidth * 0.5;\nshine.light.position.y = window.innerHeight * 0.5;\nshine.draw(); // make sure to re-draw\n```\n\n## Configuration\n\nEach shine instance has a property pointing to an instance of `shinejs.Config`. One config can be shared amongst multiple shine instances.\n\nWhen a config value changes, `shine.draw()` needs to be called to re-draw with the new settings.\n\nChange the shadow of a shine instance:\n\n```javascript\nshine.config.opacity = 0.1;\nshine.config.blur = 0.2;\nshine.draw(); // make sure to re-draw\n```\n\nCreate a shared `shinejs.Config` instance:\n\n```javascript\n// all parameters are optional and can be changed later\nvar config = new shinejs.Config({\n  numSteps: 4,\n  opacity: 0.2,\n  shadowRGB: new shinejs.Color(255, 0, 0)\n});\n\n// pass the config in the constructor\nvar shineA = new Shine(document.getElementById('my-shine-object-a'), config);\nvar shineB = new Shine(document.getElementById('my-shine-object-b'), config);\n\n// or assign it to an instance later\nvar shineC = new Shine(document.getElementById('my-shine-object-c'));\nshineC.config = config;\nshineC.draw(); // make sure to re-draw\n\n```\n\n## Shine API\n\n*Note: `Shine` is also mapped to `shinejs.Shine`. Use the long version if `Shine` is already defined.*\n\n### Shine(domElement, optConfig, optClassPrefix, optShadowProperty)\n\nThe Shine constructor. Instantiate as `new Shine(...)` to create a new instance.\n\n| Parameter | Type | Description\n| --- | --- | ---\n| **domElement** | `!HTMLElement` | The DOM element to apply the shine effect to.\n| **optConfig** | `?shinejs.Config=` | Optional config instance. If no instance is passed it a new instance with default values will be stored in the `config` property.\n| **optClassPrefix** | `?string=` | Optional class prefix that will be applied to all shine DOM elements. Defaults to `shine-`.\n| **optShadowProperty** | `?string=` | Optional property name that the shadow will be applied to. Overrides the automatic detection for use of either `textShadow` or `boxShadow`. The value will be applied as `element.style[shadowProperty] = '...'` and automatically prefixed for legacy browsers (e.g. `MozBoxShadow`).\n\n### Shine.prototype.draw()\n\nDraws all shadows based on the current light position. Call this method whenever a shine parameter is changed.\n\n### Shine.prototype.destroy()\n\nReleases all resources and removes event listeners. Destroyed instance can't be reused and must be discarded.\n\n### Shine.prototype.updateContent(optText)\n\nRe-initializes all shadows. Use this when you want to change the text or the domElement's contents have changed.\n\n| Parameter | Type | Description\n| --- | --- | ---\n| **optText** | `?string=` | If defined, will replace the DOM element's textContent. If omitted, the content will be read from the DOM element.\n\n### Shine.prototype.enableAutoUpdates()\n\nAdds DOM event listeners to automatically update all properties.\n\n### Shine.prototype.disableAutoUpdates()\n\nRemoves DOM event listeners to automatically update all properties.\n\n### Shine Properties\n\n| Property | Type | Description\n| --- | --- | ---\n| **domElement** | `HTMLElement` | The DOM element to apply the shine effect to.\n| **config** | `shinejs.Config` | Stores all config parameters.\n| **light** | `shinejs.Light` | Stores the light position and intensity.\n\n## shinejs.Config API\n\n### shinejs.Config(optSettings)\n\nThe shine config constructor. Pass an optional settings object from which to read values.\n\n| Parameter | Type | Description\n| --- | --- | ---\n| **optSettings** | `?Object=` | An optional object containing config parameters.\n\n### shinejs.Config Properties\n\n| Property | Type | Default | Description\n| --- | --- | --- | ---\n|**numSteps** | `number` | `8` | The number of steps drawn in each shadow\n|**opacity** | `number` | `0.1` | The opacity of each shadow (range: 0...1)\n|**opacityPow** | `number` | `1.2` | The exponent applied to each step's opacity (1.0 = linear opacity).\n|**offset** | `number` | `0.15` | Larger offsets create longer shadows\n|**offsetPow** | `number` | `1.8` | The exponent applied to each step's offset (1.0 = linear offset).\n|**blur** | `number` | `40` | The strength of the shadow blur.\n|**blurPow** | `number` | `1.4` | The exponent applied to each step's blur (1.0 = linear blur).\n|**shadowRGB** | `shinejs.Color` | `new shinejs.Color(0, 0, 0)` | The shadow color in r, g, b (0...255)\n\n## shinejs.Light API\n\n### shinejs.Light(optPosition)\n\nThe light constructor. Pass an optional position to apply by default.\n\n| Parameter | Type | Description\n| --- | --- | ---\n| **optPosition** | `?shinejs.Point=` | An position. Defaults to `new shinejs.Point(0, 0)`.\n\n### shinejs.Light Properties\n\n| Property | Type | Default | Description\n| --- | --- | --- | ---\n|**position** | `shinejs.Point` | `new shinejs.Point(0, 0)` | The position of this light.\n|**intensity** | `number` | `1.0` | The intensity of this light. Gets multiplied with shadow opacity.\n\n## shinejs.Point API\n\n### shinejs.Point(x, y)\n\nA 2D point class.\n\n| Parameter | Type | Description\n| --- | --- | ---\n| **x** | `number=` | The x-coordinate. Defaults to `0`.\n| **y** | `number=` | The y-coordinate. Defaults to `0`.\n\n### shinejs.Point Properties\n\n| Property | Type | Default | Description\n| --- | --- | --- | ---\n|**x** | `number` | `0` | The x-coordinate.\n|**y** | `number` | `0` | The y-coordinate.\n\n### shinejs.Point.prototype.delta(p)\n\nReturns a new instance of `shinejs.Point` with the x- and y-distance between this instance and the point `p`.\n\n| Parameter | Type | Description\n| --- | --- | ---\n| **p** | `shinejs.Point` | The point to which to calculate the distance to. Distance will be expressed as `this.x - p.x` and `this.y - p.y`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/bigspaceship.github.io%2Fshine.js%2F","html_url":"https://awesome.ecosyste.ms/projects/bigspaceship.github.io%2Fshine.js%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/bigspaceship.github.io%2Fshine.js%2F/lists"}