import React from "react";
import "./Flowvatar.scss";
import MagniteMouse from "./components/MagniteMouse";
const Flowvatar = () => {
return (
);
};
export default Flowvatar;
import React, { useEffect } from 'react';
import gsap from 'gsap';
export default function MagniteMouse({ children }) {
useEffect(() => {
const target = document.querySelector('.flowvatar-wrapper');
const eyes = document.querySelectorAll('.flowvatar-eye');
const mouth = document.querySelector('.flowvatar-mouth');
if (!target || !eyes || !mouth) return;
let boundingRect = target.getBoundingClientRect();
const resizeHandler = () => {
boundingRect = target.getBoundingClientRect();
};
const mouseMoveHandler = (e) => {
const mousePosX = e.x - boundingRect.left;
const mousePosY = e.y - boundingRect.top;
gsap.to(target, {
x: (mousePosX - boundingRect.width / 2) * 0.1,
y: (mousePosY - boundingRect.height / 2) * 0.1,
duration: 0.8,
ease: 'power3.out',
});
eyes.forEach((eye) => {
gsap.to(eye, {
x: (mousePosX - boundingRect.width / 2) * 0.1,
y: (mousePosY - boundingRect.height / 2) * 0.1,
duration: 0.8,
ease: 'power3.out',
});
});
gsap.to(mouth, {
x: (mousePosX - boundingRect.width / 2) * 0.1,
y: (mousePosY - boundingRect.height / 2) * 0.1,
duration: 0.8,
ease: 'power3.out',
});
};
const mouseLeaveHandler = () => {
gsap.to(target, {
x: 0,
y: 0,
duration: 0.8,
ease: 'elastic.out(1,0.3)',
});
eyes.forEach((eye) => {
gsap.to(eye, {
x: 0,
y: 0,
duration: 0.8,
ease: 'elastic.out(1,0.3)',
});
});
gsap.to(mouth, {
x: 0,
y: 0,
duration: 2,
ease: 'elastic.out(1,0.3)',
});
};
gsap.to(".flowvatar-eye", {
duration: 10,
rotation: 360,
repeat: -1,
ease: "none"
});
gsap.to('.flowvatar-mouth', {
duration : 3,
scale : (1.3, 0.4),
repeat : -1,
ease: 'none',
yoyo : true,
delay : 3,
})
window.addEventListener('resize', resizeHandler);
window.addEventListener('mousemove', mouseMoveHandler);
window.addEventListener('mouseleave', mouseLeaveHandler);
return () => {
window.removeEventListener('resize', resizeHandler);
window.removeEventListener('mousemove', mouseMoveHandler);
window.removeEventListener('mouseleave', mouseLeaveHandler);
};
}, []);
return
{children}
;
}
img {
border: 0
}
@font-face {
font-family: webflow-icons;
src: url(data:application/x-font-ttf;charset=utf-8;base64,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)format("truetype");
font-weight: 400;
font-style: normal
}
[class*=\ w-icon-] {
speak: none;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-weight: 400;
line-height: 1;
font-family: webflow-icons !important
}
* {
box-sizing: border-box
}
html {
height: 100%
}
body {
color: #333;
background-color: #fff;
min-height: 100%;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px
}
img {
vertical-align: middle;
max-width: 100%;
display: inline-block
}
:root {
--black: #1c1c1c;
--white: white;
--slate-blue: #5546ff;
--hot-pink: #ff7bca;
--green-yellow: #bfff0a
}
body {
color: var(--black);
background-color: #000;
font-family: Helvetica Neue, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1
}
.hero-parent {
background-color: var(--slate-blue);
justify-content: center;
align-items: center;
width: 100%;
height: 100svh;
display: flex;
position: sticky;
top: 0;
overflow: hidden
}
.flowvatar-wrapper {
z-index: 10;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: absolute
}
.flowvatar {
background-color: rgb(158, 20,45);
border-radius: 50%;
width: 20rem;
height: 20rem;
position: relative;
overflow: hidden
}
.flowvatar-lights {
z-index: 5;
opacity: .6;
object-fit: cover;
width: 100%;
height: 100%;
display: block;
position: absolute
}
.flowvatar-face {
position: absolute;
inset: 0%
}
.flowvatar-eye {
width: 18%;
height: auto;
display: block;
position: absolute;
filter: brightness(0) invert(1);
top: 26%
}
.flowvatar-eye.right {
transform: rotate(360deg);
right: 24%
}
.flowvatar-eye.left {
left: 24%
}
.flowvatar-mouth {
background-color: rgb(255, 255,255);
border-radius: 100vw;
width: 13%;
height: 23%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%)
}
.wrapper {
width: 100%;
height: 100%
}
.faq-wrap:focus-visible {
outline-offset: 0px;
outline: 3px solid #252532
}
@media screen and (max-width:991px) {
.flowvatar {
width: 16rem;
height: 16rem
}
}
@media screen and (max-width:479px) {
.flowvatar-wrapper {
padding-top: 0;
padding-bottom: 6rem
}
.flowvatar {
width: 17rem;
height: 17rem
}
}
@font-face {
font-family: 'Bodoni itc book';
src: url('https://cdn.prod.website-files.com/63bf3e1c32ea7ba16d1bdf88/63bf3e1c32ea7b80ef1bdf9f_bodoni-seventytwo-itc-book-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Humane Bold';
src: url('https://cdn.prod.website-files.com/63bf3e1c32ea7ba16d1bdf88/63bf3e1c32ea7b2c3d1bdf93_Humane-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helvetica Neue';
src: url('https://cdn.prod.website-files.com/63bf3e1c32ea7ba16d1bdf88/63bf3e1c32ea7b11e01bdf94_HelveticaNeue-Light.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Humane Medium';
src: url('https://cdn.prod.website-files.com/63bf3e1c32ea7ba16d1bdf88/63bf3e1c32ea7bb19e1bdfad_Humane-Medium.otf') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Helveticaneue';
src: url('https://cdn.prod.website-files.com/63bf3e1c32ea7ba16d1bdf88/6424a686b2ea50f7e9bba605_HelveticaNeue-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}