{"id":29628995,"url":"https://github.com/lightinn/special-card","last_synced_at":"2025-10-07T11:40:03.388Z","repository":{"id":206069148,"uuid":"715722457","full_name":"LightInn/special-card","owner":"LightInn","description":"special-card npm lib for react","archived":false,"fork":false,"pushed_at":"2025-07-02T11:47:56.000Z","size":49427,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-13T21:37:53.482Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LightInn.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-07T17:46:25.000Z","updated_at":"2025-06-28T19:48:37.000Z","dependencies_parsed_at":"2024-06-09T13:28:48.946Z","dependency_job_id":"f3e83c97-7fb3-4348-92d5-e7f417c2443c","html_url":"https://github.com/LightInn/special-card","commit_stats":null,"previous_names":["lightinn/special-card"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LightInn/special-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LightInn%2Fspecial-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LightInn%2Fspecial-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LightInn%2Fspecial-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LightInn%2Fspecial-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LightInn","download_url":"https://codeload.github.com/LightInn/special-card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LightInn%2Fspecial-card/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266270600,"owners_count":23902739,"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":[],"created_at":"2025-07-21T09:07:30.482Z","updated_at":"2025-10-07T11:39:58.323Z","avatar_url":"https://github.com/LightInn.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Special Card\n\n⚡ *Elegant React components for displaying cards with dynamic and interactive visual effects.* ⚡\n[![Build Status](https://img.shields.io/travis/LightInn/special-card/master.svg?style=flat)](https://travis-ci.org/LightInn/special-card)\n[![npm version](https://img.shields.io/npm/v/special-card.svg?style=flat)](https://www.npmjs.com/package/special-card)\n[![npm downloads](https://img.shields.io/npm/dm/special-card.svg?style=flat)](https://www.npmjs.com/package/special-card)\n[![license](https://img.shields.io/github/license/LightInn/special-card.svg?style=flat)](https://github.com/LightInn/special-card/blob/master/LICENSE.md) \n\n![Special Card Holo](/public/holo.gif \"HoloCard Effect\")\n![Special Card Pop](/public/pop.gif \"PopCard Effect\")\n\n## Description\n\nThe `special-card` library offers a unique visual touch to your React.js projects. With its `HoloCard` and `PopCard` components, create stylized interactive cards that are sure to engage your users.\n\n## Installation\n\nTo install the latest version:\n\n```sh\nnpm install special-card\n```\n\n## Usage\n\nImport and use the components in your project:\n\n```jsx\nimport { HoloCard, PopCard } from 'special-card';\n\nfunction App() {\n  return (\n    \u003cdiv style={{ display: 'flex' }}\u003e\n      \u003cPopCard \n        height={300}\n        titleImage=\"/path/to/title.png\"\n        hoverImage=\"/path/to/hover.png\"\n        backgroundImage=\"/path/to/background.png\"\n        link=\"https://your-link.com\"\n      /\u003e\n      \u003cHoloCard\n        height={300}\n        width={300}\n        radius={30}\n        imageSrc=\"/path/to/image.png\"\n        imageShineSrc=\"/path/to/shine-image.png\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Documentation\n\n### HoloCard\n\n| Prop           | Type   | Description                           | Default       |\n| -------------- | ------ | ------------------------------------- | ------------- |\n| `imageSrc`     | string | Path to the card image                | Required      |\n| `imageShineSrc`| string | Path to the shine effect image        | Required      |\n| `width`        | number | Width of the card                     | Required      |\n| `height`       | number | Height of the card                    | Required      |\n| `hyp`          | number | Intensity of the holographic effect   | `0.8`         |\n| `o`            | number | Opacity of the shine effect           | `0.4`         |\n| `radius`       | number | Radius of the card corners            | `16`          |\n\n### PopCard\n\n| Prop             | Type   | Description                        | Default         |\n| ---------------- | ------ | ---------------------------------- | --------------- |\n| `backgroundImage`| string | Path to the background image       | `/bg.png`       |\n| `titleImage`     | string | Path to the title image            | `/title.png`    |\n| `hoverImage`     | string | Path to the hover image            | `/hover.png`    |\n| `link`           | string | URL link on card click             | `https://brev.al`|\n| `height`         | number | Height of the card                 | `300`           |\n| `width`          | number | Width of the card                  | `height / 1.5`  |\n\n## Complete Example\n\nBelow is an example of how to integrate the library:\n\n```jsx\n// index.js\nimport React from 'react';\nimport { render } from \"react-dom\";\nimport { HoloCard, PopCard } from \"special-card\";\n\nconst App = () =\u003e (\n  \u003cdiv style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }}\u003e\n    \u003cPopCard \n      height={300} \n      titleImage=\"/path/to/title.png\"\n      hoverImage=\"/path/to/hover.png\"\n      backgroundImage=\"/path/to/background.png\"\n      link=\"https://your-link.com\"\n    /\u003e\n    \u003cHoloCard\n      height={300}\n      width={300}\n      radius={30}\n      imageSrc=\"/path/to/image.png\"\n      imageShineSrc=\"/path/to/shine-image.png\"\n    /\u003e\n  \u003c/div\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## Contributing\n\nContributions are always welcome. Please clone the repository and submit your pull requests here:\n\n```sh\ngit clone https://github.com/LightInn/special-card.git\n```\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n---\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightinn%2Fspecial-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flightinn%2Fspecial-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightinn%2Fspecial-card/lists"}