{"id":29767722,"url":"https://github.com/huozhi/vaso","last_synced_at":"2025-07-27T02:15:18.198Z","repository":{"id":303145992,"uuid":"1010096758","full_name":"huozhi/vaso","owner":"huozhi","description":"Liquid Glass effect for React","archived":false,"fork":false,"pushed_at":"2025-07-19T23:23:08.000Z","size":261,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-19T23:53:25.267Z","etag":null,"topics":["glass","liquid-glass","liquid-glass-effect","react"],"latest_commit_sha":null,"homepage":"https://vaso-react.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huozhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2025-06-28T10:36:26.000Z","updated_at":"2025-07-19T23:23:12.000Z","dependencies_parsed_at":"2025-07-06T00:25:34.713Z","dependency_job_id":"20b66203-e869-4eb0-8aae-865f313bb2cc","html_url":"https://github.com/huozhi/vaso","commit_stats":null,"previous_names":["huozhi/vaso"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/huozhi/vaso","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fvaso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fvaso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fvaso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fvaso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huozhi","download_url":"https://codeload.github.com/huozhi/vaso/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fvaso/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267286508,"owners_count":24064340,"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-07-27T02:00:11.917Z","response_time":82,"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":["glass","liquid-glass","liquid-glass-effect","react"],"created_at":"2025-07-27T02:15:17.277Z","updated_at":"2025-07-27T02:15:18.190Z","avatar_url":"https://github.com/huozhi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vaso\n\nA beautiful liquid glass distortion effect component for React that creates stunning visual magnification and warping effects.\n\nVaso is the React version of [shuding](https://github.com/shuding)'s [Liquid Glass](https://github.com/shuding/liquid-glass) implementation.\n\n![image](./site/app/opengraph-image.png)\n\n## Installation\n\n```bash\nnpm add vaso\n```\n\n## Quick Start\n\n```tsx\nimport { Vaso } from 'vaso'\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eSome content here\u003c/h1\u003e\n      \u003cp\u003eThis text will be distorted by the glass effect\u003c/p\u003e\n      \n      \u003cVaso\n        px={20}\n        py={20}\n        radius={15}\n        depth={1.2}\n        blur={0.5}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## API Reference\n\n### Props\n\n| Prop | Type | Default | Range | Description |\n|------|------|---------|-------|-------------|\n| `children` | `React.ReactNode` | **required** | - | The content to render inside the glass (typically a transparent div for sizing) |\n| `width` | `number` | `undefined` | - | Explicit width of the glass element (overrides child element size) |\n| `height` | `number` | `undefined` | - | Explicit height of the glass element (overrides child element size) |\n| `px` | `number` | `0` | `0-100` | Horizontal padding around the glass effect |\n| `py` | `number` | `0` | `0-100` | Vertical padding around the glass effect |\n| `radius` | `number` | `0` | `0-∞` | Border radius of the glass container |\n| `depth` | `number` | `0.4` | `-2.0 to 2.0` | Distortion scale intensity (negative values create compression) |\n| `draggable` | `boolean` | `false` | - | Whether the glass can be dragged around |\n\n### Negative Values Support\n\nVaso supports negative values for several parameters to create inverted effects:\n\n- **`depth`** (`-2.0 to 2.0`): Negative values create compression instead of magnification\n\n## Examples\n\n\n### Basic Glass Effect\n\n```tsx\n\u003cVaso\n  className=\"w-48 h-36 bg-transparent\"\n  px={20}\n  py={20}\n  radius={12}\n  depth={1.5}\n  blur={0.3}\n/\u003e\n```\n\n### Glass with Explicit Dimensions\n\n```tsx\n\u003cVaso\n  className=\"w-48 h-36 bg-transparent\"\n  width={300}\n  height={200}\n  px={20}\n  py={20}\n  radius={12}\n  depth={1.5}\n  blur={0.3}\n/\u003e\n```\n\n### Draggable Glass with Callbacks\n\n```tsx\nfunction DraggableGlass() {\n  const [position, setPosition] = useState({ x: 100, y: 100 })\n  \n  return (\n    \u003cVaso\n      draggable\n      px={15}\n      py={15}\n      radius={20}\n      depth={1.2}\n      blur={0.4}\n    /\u003e\n  )\n}\n```\n\n### High Distortion Effect\n\n```tsx\n\u003cVaso\n  className=\"w-48 h-36 bg-transparent\"\n  px={30}\n  py={30}\n  depth={2.0}\n  blur={0.6}\n/\u003e\n```\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Fvaso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuozhi%2Fvaso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Fvaso/lists"}