├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.css
├── App.js
├── final.JPG
├── index.css
└── index.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | 
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn install`
10 |
11 | Instal All dependencies in this project
12 |
13 | ### `yarn start`
14 |
15 | Runs the app in the development mode.
16 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
17 |
18 | ### Link
19 |
20 | Reactjs: https://reactjs.org/docs/create-a-new-react-app.html
21 | Framer Motion: https://www.framer.com/motion/
22 |
23 | ### Video Tutorial
24 |
25 | You can see my youtube video for this project in [here](https://youtu.be/nr3U-RpaQuM)
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "custom-cursor",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.14.1",
7 | "@testing-library/react": "^13.0.0",
8 | "@testing-library/user-event": "^13.2.1",
9 | "framer-motion": "^6.3.1",
10 | "react": "^18.0.0",
11 | "react-dom": "^18.0.0",
12 | "react-scripts": "5.0.1",
13 | "web-vitals": "^2.1.0"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/custom-cursor-react-framer-motion/d1fe6cf87b7fc408097d0e72d8e6394a13c909b8/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/custom-cursor-react-framer-motion/d1fe6cf87b7fc408097d0e72d8e6394a13c909b8/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/custom-cursor-react-framer-motion/d1fe6cf87b7fc408097d0e72d8e6394a13c909b8/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | cursor: none;
3 | }
4 |
5 | .App {
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | height: 100vh;
10 | background-color: yellow;
11 | }
12 |
13 | .title {
14 | font-size: 10rem;
15 | }
16 |
17 | .cursor {
18 | background-color: #111;
19 | height: 32px;
20 | width: 32px;
21 | border-radius: 50%;
22 | position: fixed;
23 | top: 0;
24 | left: 0;
25 | pointer-events: none;
26 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { motion } from 'framer-motion';
3 | import './App.css';
4 |
5 | function App() {
6 | const [mousePosition, setMousePosition] = useState({
7 | x: 0,
8 | y: 0
9 | });
10 | const [cursorVariant, setCursorVariant] = useState("default");
11 |
12 |
13 | useEffect(() => {
14 | const mouseMove = e => {
15 | setMousePosition({
16 | x: e.clientX,
17 | y: e.clientY
18 | })
19 | }
20 |
21 | window.addEventListener("mousemove", mouseMove);
22 |
23 | return () => {
24 | window.removeEventListener("mousemove", mouseMove);
25 | }
26 | }, []);
27 |
28 | const variants = {
29 | default: {
30 | x: mousePosition.x - 16,
31 | y: mousePosition.y - 16,
32 | },
33 | text: {
34 | height: 150,
35 | width: 150,
36 | x: mousePosition.x - 75,
37 | y: mousePosition.y - 75,
38 | backgroundColor: "yellow",
39 | mixBlendMode: "difference"
40 | }
41 | }
42 |
43 | const textEnter = () => setCursorVariant("text");
44 | const textLeave = () => setCursorVariant("default");
45 |
46 |
47 | return (
48 |
49 |
Hello World
50 |
55 |
56 | );
57 | }
58 |
59 | export default App;
60 |
--------------------------------------------------------------------------------
/src/final.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/candraKriswinarto/custom-cursor-react-framer-motion/d1fe6cf87b7fc408097d0e72d8e6394a13c909b8/src/final.JPG
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 |
6 | const root = ReactDOM.createRoot(document.getElementById('root'));
7 | root.render(
8 |
9 |
10 |
11 | );
12 |
13 |
--------------------------------------------------------------------------------