{"id":13543407,"url":"https://github.com/rikschennink/shiny","last_synced_at":"2025-05-15T02:06:18.241Z","repository":{"id":48025708,"uuid":"165638227","full_name":"rikschennink/shiny","owner":"rikschennink","description":"🌟 Shiny reflections for mobile websites","archived":false,"fork":false,"pushed_at":"2022-12-02T20:45:19.000Z","size":4373,"stargazers_count":2799,"open_issues_count":12,"forks_count":70,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-13T23:54:22.570Z","etag":null,"topics":["css","devicemotion","javascript","light","mobile","motion"],"latest_commit_sha":null,"homepage":"https://pqina.nl/shiny/","language":"JavaScript","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/rikschennink.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-14T10:01:41.000Z","updated_at":"2025-03-15T20:59:07.000Z","dependencies_parsed_at":"2023-01-23T02:30:25.835Z","dependency_job_id":null,"html_url":"https://github.com/rikschennink/shiny","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rikschennink%2Fshiny","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rikschennink%2Fshiny/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rikschennink%2Fshiny/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rikschennink%2Fshiny/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rikschennink","download_url":"https://codeload.github.com/rikschennink/shiny/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254259370,"owners_count":22040819,"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","devicemotion","javascript","light","mobile","motion"],"created_at":"2024-08-01T11:00:31.216Z","updated_at":"2025-05-15T02:06:18.224Z","avatar_url":"https://github.com/rikschennink.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","Tools","前端常用","Other Useful Tools and Libraries"],"sub_categories":["Uncategorized","WebTools"],"readme":"# Shiny, Simulating Reflections for Mobile Websites\n\nAdd shiny reflections to **text**, **backgrounds**, and **borders** on devices that support the `DeviceMotion` event.\n\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rikschennink/shiny/blob/gh-pages/LICENSE)\n[![Still in beta](https://badge.fury.io/js/%40rikschennink%2Fshiny.svg)](https://badge.fury.io/js/%40rikschennink%2Fshiny)\n[![Less than 1kB](https://badgen.net/bundlephobia/minzip/shiny)](https://bundlephobia.com/result?p=shiny)\n\n**⚠️ It looks like iOS 12.2 will [disable use of device sensors](https://twitter.com/rikschennink/status/1090912464403861504) on Safari, so development of Shiny.js is on hold for now**\n\n\u003cimg src=\"https://github.com/rikschennink/shiny/blob/master/demo.gif?raw=true\" width=\"450\" alt=\"\"/\u003e\n\n[Demo](https://pqina.nl/shiny/) \n\n*Use a mobile device, preferably iPhone in portrait mode at the moment*\n\n## Todo\n\n- Fix landscape orientation rendering\n- Test on Android (waiting for test device to arrive)\n- Add option to pass custom handler\n\n\n## Installation\n\nInstall from npm:\n\n```\nnpm install @rikschennink/shiny --save\n```\n\nOr download `dist/shiny.umd.js` and include the script on your page like shown below.\n\n\n## API\n\nThere's currently only one API call to make and it's `shiny()`. You can either pass a selector or an element (or array of elements), the second argument can be a configuration object telling Shiny how to render the special effects. \n\nIf the second argument is not supplied Shiny will render a radial background gradient with a white center and a transparent outer ring.\n\n```js\n// No config supplied, select element by class\nshiny('.my-shiny-element');\n\n// Select multiple elements\nshiny('.my-shiny-element, #my-other-shiny-element');\n\n// Configuration object, see below for details\nshiny('.my-shiny-element', { /* config here */ });\n\n// Pass element object\nconst myElement = document.querySelector('my-shiny-element');\nshiny(myElement, { /* config here */ });\n\n// Pass array of elements\nshiny([myElement, myOtherElement], { /* config here */ });\n```\n\n\n## Usage\n\n```html\n\u003c!-- The element you want to make shiny --\u003e\n\u003cdiv class=\"my-shiny-element\"\u003eHello World\u003c/div\u003e\n\n\u003c!-- Include the library --\u003e\n\u003cscript src=\"shiny.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Initialize the SHINYNESS --\u003e\n\u003cscript\u003e\nshiny('.my-shiny-element', {\n    // type of shiny to render, \n    // 'background', 'border', or 'text'\n    type: 'background',\n    gradient: {\n\n        // type of gradient\n        // 'linear' or 'radial'\n        type: 'radial',\n\n        // angle of gradient when type is linear\n        angle: '110deg',\n\n        // flip axis movement\n        flip: {\n            x: true,\n            y: false\n        },\n\n        // colors to use\n        colors: [\n            // offset, color, opacity\n            // ! don't pass rgba or hsla colors, supply the opacity seperately\n            [0, '#fff', 1], // white at 0%\n            [1, '#fff', 0], // to fully transparent white at 100%\n        ]\n\n    },\n\n    // optional pattern fill\n    pattern: {\n        type: 'noise', // only 'noise' for now\n        opacity: .5\n    }\n});\n\u003c/script\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frikschennink%2Fshiny","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frikschennink%2Fshiny","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frikschennink%2Fshiny/lists"}