{"id":31663588,"url":"https://github.com/aryprogrammer/subcomponent-threejs-edubox","last_synced_at":"2025-10-07T20:06:09.747Z","repository":{"id":315135353,"uuid":"1058253225","full_name":"ARYPROGRAMMER/subcomponent-threejs-edubox","owner":"ARYPROGRAMMER","description":"This is a subcomponent for edubox","archived":false,"fork":false,"pushed_at":"2025-09-16T21:00:42.000Z","size":272,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-16T23:48:17.350Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ARYPROGRAMMER.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-16T20:49:28.000Z","updated_at":"2025-09-16T21:11:48.000Z","dependencies_parsed_at":"2025-09-16T23:48:20.826Z","dependency_job_id":"c6e9d39b-69e5-4a8b-925c-154cca084018","html_url":"https://github.com/ARYPROGRAMMER/subcomponent-threejs-edubox","commit_stats":null,"previous_names":["aryprogrammer/subcomponent-threejs-edubox"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ARYPROGRAMMER/subcomponent-threejs-edubox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ARYPROGRAMMER%2Fsubcomponent-threejs-edubox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ARYPROGRAMMER%2Fsubcomponent-threejs-edubox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ARYPROGRAMMER%2Fsubcomponent-threejs-edubox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ARYPROGRAMMER%2Fsubcomponent-threejs-edubox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ARYPROGRAMMER","download_url":"https://codeload.github.com/ARYPROGRAMMER/subcomponent-threejs-edubox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ARYPROGRAMMER%2Fsubcomponent-threejs-edubox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278838434,"owners_count":26054720,"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-10-07T02:00:06.786Z","response_time":59,"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-10-07T20:02:20.512Z","updated_at":"2025-10-07T20:06:09.735Z","avatar_url":"https://github.com/ARYPROGRAMMER.png","language":"TypeScript","readme":"\u003c!-- @format --\u003e\n\nFull Credits to the original author: Yuki Kojima \n\n# This version is modified by Arya Singh for EduBox due to some issues in the original code. Compatibility with Nextjs and React is added and some performance improvements are done. Moreover can be used as a submodule in other projects.\n\n```js\nimport { useEffect, useRef } from 'react';\nimport { startDroplets } from \"@/interactive-droplets/src/scripts\";\n\n\nexport function Page() {\n  const containerRef = useRef\u003cHTMLDivElement\u003e(null);\n  const { scrollYProgress } = useScroll({\n    target: containerRef,\n    offset: [\"start start\", \"end end\"],\n  });\n  \n  const webglRef = useRef\u003cHTMLDivElement\u003e(null);\n\n  useEffect(() =\u003e {\n    if (typeof window === 'undefined') return;\n    const isMobile = window.matchMedia('(max-width: 640px)').matches;\n    if (!isMobile \u0026\u0026 webglRef.current) {\n      startDroplets(webglRef.current);\n    }\n  }, []);\n\n  in some return ()\n \u003cdiv id=\"webgl\" className=\"w-full h-full\" /\u003e;\n);\n}    \n```\n\n# Interactive, Droplet-like Metaballs with Three.js and GLSL\n\nDemo for the tutorial on how to create interactive, droplet-like metaballs using Three.js and GLSL.\n\n![Interactive, droplet-like metaballs](./public/droplet.png)\n\n[Article on Codrops](https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/)\n\n[Demo](https://tympanus.net/Tutorials/InteractiveBubbleMetaballs/)\n\n## Installation\n\n1. **Clone this repository:**\n\n    ```bash\n    git clone https://github.com/koji014/interactive-droplets.git your-project-name\n    cd your-project-name\n    ```\n\n2. **Install the dependencies:**\n\n    ```bash\n    npm install\n    ```\n\n3. **Start the development server:**\n\n    ```bash\n    npm run dev\n    ```\n\n4. **Create the build:**\n    ```bash\n    npm run build\n    ```\n\n## Credits\n\n### Signed Distance Functions\n\n-   [Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/distfunctions/)\n\n### Metaball Effect\n\n-   [wgld.org | GLSL: オブジェクト同士を補間して結合する](https://wgld.org/d/glsl/g016.html)\n-   [Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/smin/)\n\n### Value Noise\n\n-   [The Book of Shaders: Random](https://thebookofshaders.com/10/)\n-   [The Book of Shaders: Noise](https://thebookofshaders.com/11/)\n-   [Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/morenoise/)\n\n## Misc\n\nFollow Yuki Kojima: [Twitter](https://x.com/_koji014), [GitHub](https://github.com/koji014)\n\nFollow Codrops: [Bluesky](https://bsky.app/profile/codrops.bsky.social), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/), [X](http://www.x.com/codrops)\n\n## License\n\nThis resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource \"as-is\" and sell it, redistribute, re-publish it, or sell \"pluginized\" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryprogrammer%2Fsubcomponent-threejs-edubox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faryprogrammer%2Fsubcomponent-threejs-edubox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryprogrammer%2Fsubcomponent-threejs-edubox/lists"}