54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { Box, createStyles, useMantineTheme } from '@mantine/core';
|
|
import { useMouse } from '@mantine/hooks';
|
|
|
|
import { PolkaElement } from './PolkaElement';
|
|
|
|
export const FloatingBackground = () => {
|
|
const { classes } = useStyles();
|
|
return (
|
|
<Box className={classes.noOverflow} pos="absolute" w="100%" h="100%" top={0} left={0}>
|
|
<MouseBackdrop />
|
|
<Box pos="relative" h="100%">
|
|
<PolkaElement rotation={95} top={0} left={100} />
|
|
<PolkaElement rotation={10} top={50} right={20} />
|
|
<PolkaElement rotation={-4} bottom={20} left={20} />
|
|
<PolkaElement rotation={-10} bottom={0} right={0} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const MouseBackdrop = () => {
|
|
const { x, y } = useMouse();
|
|
const radius = 40;
|
|
return (
|
|
<Box pos="absolute" top={0} left={0} w="100%" h="100%">
|
|
<Box
|
|
sx={(theme) => {
|
|
const dropColor =
|
|
theme.colorScheme === 'dark'
|
|
? theme.fn.rgba(theme.colors.red[8], 0.05)
|
|
: theme.fn.rgba(theme.colors.red[2], 0.4);
|
|
const boxShadow = `0px 0px ${radius}px ${radius}px ${dropColor}`;
|
|
return {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: '5rem',
|
|
boxShadow: boxShadow,
|
|
backgroundColor: dropColor,
|
|
};
|
|
}}
|
|
top={y - 25}
|
|
left={x - 25}
|
|
pos="absolute"
|
|
></Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const useStyles = createStyles(() => ({
|
|
noOverflow: {
|
|
overflow: 'hidden',
|
|
},
|
|
}));
|