{"id":15572839,"url":"https://github.com/nadjascodejourney/scrollr3fproject","last_synced_at":"2026-04-27T16:32:44.801Z","repository":{"id":247119021,"uuid":"824317435","full_name":"nadjascodejourney/scrollr3fproject","owner":"nadjascodejourney","description":"animated scroll website with R3F and GSAP ","archived":false,"fork":false,"pushed_at":"2024-07-08T09:28:15.000Z","size":67,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-11T04:51:28.803Z","etag":null,"topics":["gsap","parallax-effect","react-three-drei","react-three-fiber","scrollanimation","tailwindcss","threejs"],"latest_commit_sha":null,"homepage":"https://scrollr3fproject.vercel.app/","language":"JavaScript","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/nadjascodejourney.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}},"created_at":"2024-07-04T21:14:07.000Z","updated_at":"2025-09-18T18:37:52.000Z","dependencies_parsed_at":"2025-03-29T06:40:44.016Z","dependency_job_id":null,"html_url":"https://github.com/nadjascodejourney/scrollr3fproject","commit_stats":null,"previous_names":["nadjascodejourney/scrollr3fproject"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nadjascodejourney/scrollr3fproject","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2Fscrollr3fproject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2Fscrollr3fproject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2Fscrollr3fproject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2Fscrollr3fproject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nadjascodejourney","download_url":"https://codeload.github.com/nadjascodejourney/scrollr3fproject/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadjascodejourney%2Fscrollr3fproject/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32345802,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"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":["gsap","parallax-effect","react-three-drei","react-three-fiber","scrollanimation","tailwindcss","threejs"],"created_at":"2024-10-02T18:07:05.489Z","updated_at":"2026-04-27T16:32:44.783Z","avatar_url":"https://github.com/nadjascodejourney.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animated Scroll Website with React Three Fiber and GSAP\n\nThis project is a simple interactive 3D web application build for selfstudy purposes. \nMy goal is to use 3D web technologies in combination with scroll-based animations to offer an immersive user experience.\nClick the link in the description, to see it live!\n\n## Project Overview\n\nThe application utilizes the following technologies:\n\n- Vite \u0026 React: For fast development and optimized build management.\n- react-three/fiber: Integration of Three.js with React for a reactive 3D rendering environment.\n- react-three/drei: Extension of react-three/fiber with useful helper components (i.e.: \u003cHtml/\u003e, \u003cSparkles/\u003e)\n- Three.js: WebGL based library for 3D graphics on the web.\n- CSS \u0026 Tailwind CSS: For styling and layout.\n- GSAP: For animations.\n\n## Features\n\n- Scroll-Based Animations: Interactive 3D animations controlled by scrolling\n- Including particles with a custom calculated Positions Array and 3D-Objects with scroll-based movements\n- Overlay outside of the Canvas to display HTML in front of the Canvas\n- Responsive Camera Behavior: The camera dynamically responds to mouse movements and scrolling (i.e. parallax effect)\n- It works responsive on different sizes\n\n# Learning Resources:\n\n- React Three Fiber Documentation - Pmndrs.docs\n- Three.js-journey by Bruno Simon\n- Wawa Sensei\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadjascodejourney%2Fscrollr3fproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnadjascodejourney%2Fscrollr3fproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadjascodejourney%2Fscrollr3fproject/lists"}