Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/charityeverett/fluidframe
FluidFrame is a comprehensive toolkit for creating adaptive and responsive WebXR experiences using A-Frame. It enables developers to build immersive 3D and VR content that seamlessly adjusts to various devices and screen sizes, from mobile phones to high-end VR headsets.
https://github.com/charityeverett/fluidframe
Last synced: about 1 month ago
JSON representation
FluidFrame is a comprehensive toolkit for creating adaptive and responsive WebXR experiences using A-Frame. It enables developers to build immersive 3D and VR content that seamlessly adjusts to various devices and screen sizes, from mobile phones to high-end VR headsets.
- Host: GitHub
- URL: https://github.com/charityeverett/fluidframe
- Owner: CharityEverett
- License: mit
- Created: 2024-11-11T05:47:13.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-11T06:03:18.000Z (about 1 month ago)
- Last Synced: 2024-11-11T06:31:22.464Z (about 1 month ago)
- Language: JavaScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FluidFrame
FluidFrame is a responsive design toolkit for A-Frame, enabling developers to create adaptive WebXR experiences that seamlessly adjust across various devices and screen sizes.
## Features
- Responsive scaling of A-Frame entities based on screen size and device type
- Device detection for optimized experiences on mobile, tablet, desktop, and VR
- Easy integration with existing A-Frame projects
- Performance-focused design for smooth experiences across platforms
## Installation
1. Clone this repository or download the ZIP file.
2. Copy `fluid-frame.js` and `device-detection.js` from the `components` folder into your project's directory.
## Usage
1. Include the scripts in your HTML file:
```html
```
2. Add the device-detector component to your A-Frame scene:
```html
```
3. Use the fluid-frame component on entities you want to be responsive:
```html
```
## Configuration
The 'fluid-frame' component accepts the following properties:
* 'minScale': Minimum scale factor (default: 0.5)
* 'maxScale': Maximum scale factor (default: 2)
* 'scaleThreshold': Width threshold for scaling (default: 1000)
* 'mobileScale': Scale factor for mobile devices (default: 0.7)
* 'tabletScale': Scale factor for tablet devices (default: 0.85)
* 'desktopScale': Scale factor for desktop devices (default: 1)
* 'vrScale': Scale factor for VR mode (default: 1)
## Examples
Check out the examples folder for sample implementations of FluidFrame.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Support
If you encounter any issues or have questions, please file an issue on the GitHub repository.
This README provides an overview of FluidFrame, its features, installation instructions, usage examples, and configuration options. It also includes sections on contributing and support.
Remember to:
1. Adjust any paths or versions as necessary.
2. Add or modify sections based on any additional features or changes you've made.
3. Include any specific examples or use cases you want to highlight.
4. Update the license information if you're using a different license.
After making these changes, commit and push the updated README to your GitHub repository.