{"id":24743422,"url":"https://github.com/layerdynamics/r3f-splashscreen","last_synced_at":"2025-03-22T21:45:19.494Z","repository":{"id":237785351,"uuid":"795240538","full_name":"LayerDynamics/r3f-splashscreen","owner":"LayerDynamics","description":" a visually appealing splash screen to your React applications, utilizing React, Three.js, and React Three Fiber to render an animated, shader-driven blob with customizable text overlay.","archived":false,"fork":false,"pushed_at":"2024-11-22T05:12:56.000Z","size":6021,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T01:38:30.645Z","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/LayerDynamics.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-05-02T21:33:32.000Z","updated_at":"2024-05-03T00:10:44.000Z","dependencies_parsed_at":"2024-05-03T06:31:44.514Z","dependency_job_id":"65cd12f0-b384-4f0a-b1f6-7ad6d14a6f91","html_url":"https://github.com/LayerDynamics/r3f-splashscreen","commit_stats":null,"previous_names":["layerdynamics/r3f-splashscreen"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayerDynamics%2Fr3f-splashscreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayerDynamics%2Fr3f-splashscreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayerDynamics%2Fr3f-splashscreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayerDynamics%2Fr3f-splashscreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LayerDynamics","download_url":"https://codeload.github.com/LayerDynamics/r3f-splashscreen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245026001,"owners_count":20549067,"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-01-28T01:36:08.574Z","updated_at":"2025-03-22T21:45:19.468Z","avatar_url":"https://github.com/LayerDynamics.png","language":"TypeScript","readme":"\n# R3F-SplashScreen\n\nThe `SplashScreen` component adds a visually appealing splash screen to your React applications, utilizing React, Three.js, and React Three Fiber to render an animated, shader-driven blob with customizable text overlay. This component is built for easy integration and customization, perfect for creating an engaging user experience right from the start.\n\n## Installation\n\nTo include the `SplashScreen` in your project, install the package via npm:\n\n```bash\nnpm install r3f-splashscreen\n```\n\nImport and use the component in your application:\n\n```jsx\nimport SplashScreen from 'your-splash-screen-package-name';\n\nfunction App() {\n  return (\n    \u003cSplashScreen\n      name=\"Welcome to Our App\"\n      duration={5000}\n      backgroundColor=\"#000000\"\n      fontColor=\"#FFFFFF\"\n      blobColor=\"#00FFFF\"\n      fontUrl=\"https://example.com/path-to-your-font.ttf\"\n      distortionScale={1.5}\n      waveSpeed={2}\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\n## Visual Demonstration\n\nBelow is a GIF that shows what the `SplashScreen` component looks like in action:\n\n![SplashScreen Example](./assets/example.gif)\n\n## Props\n\nHere's a detailed guide to the props available in the `SplashScreen` component:\n\n- **`name`** (string): The text displayed on the splash screen. This can be your application's name or any greeting.\n- **`duration`** (number): The length of time (in milliseconds) that the splash screen remains visible.\n- **`backgroundColor`** (string): The CSS color value for the splash screen's background.\n- **`fontColor`** (string): The CSS color value for the text, ensuring good contrast with the background for readability.\n- **`blobColor`** (string): The CSS color value for the animated blob.\n- **`fontUrl`** (string): The URL of the custom font file used for the text, enabling typographic consistency with your brand.\n- **`distortionScale`** (number): Adjusts the intensity of the distortion effect on the blob, with higher values resulting in more dramatic effects.\n- **`waveSpeed`** (number): Controls the speed of the wave animations on the blob. Increasing this speeds up the animation, while decreasing it slows it down.\n\n## Internal Mechanics\n\nThe component utilizes key internal elements:\n\n- **`WaveShaderMaterial`**: A custom shader material designed to create dynamic, wavy surface distortions on the blob, influenced by `blobColor`, `distortionScale`, and `waveSpeed`.\n- **`AnimatedBlob`**: A functional component responsible for the real-time frame updates of the blob animation, employing the `useFrame` hook from React Three Fiber to continuously update and animate the blob based on the elapsed time.\n\n## Experimenting with SplashScreen\n\nTo experiment with different configurations of the `SplashScreen`, you can modify the properties directly in the `test/app.tsx` file:\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/LayerDynamics/r3f-splashscreen.git\n   ```\n2. Navigate to the test directory:\n   ```bash\n   cd r3f-splashscreen\n   ```\n3. Open `test/app.tsx` and modify the props such as `name`, `duration`, `backgroundColor`, etc.\n4. Install dependencies and run the project:\n   ```bash\n   npm install\n   npm run dev\n   ```\n5. View the changes in your browser to see how different settings affect the component.\n\n## Best Practices\n\n- **Performance Optimization**: Adjust the geometry detail and shader complexity based on your target platform's capabilities to ensure optimal performance.\n- **Device Compatibility**: Test the component across different devices and screen sizes to ensure consistent behavior and appearance.\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayerdynamics%2Fr3f-splashscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flayerdynamics%2Fr3f-splashscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayerdynamics%2Fr3f-splashscreen/lists"}