Randomize ASCII art mask position on mouse enter

- the ascii pattern should have variation but consistent distribution on each mouse-enter

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── prompt
                        ├── AsciiArtEffect
                        │   ├── AsciiArtEffect.module.scss
                        │   └── AsciiArtEffect.tsx
                        └── TargetButton
                            └── TargetButton.tsx

Author: robertpiosik

packages/ui/src/components/editor/prompt/AsciiArtEffect/AsciiArtEffect.module.scss

@@ -27,4 +27,6 @@
   -webkit-mask-repeat: repeat;
   mask-size: var(--mask-size, 88px 88px);
   -webkit-mask-size: var(--mask-size, 88px 88px);
+  mask-position: var(--mask-offset-x, 0px) var(--mask-offset-y, 0px);
+  -webkit-mask-position: var(--mask-offset-x, 0px) var(--mask-offset-y, 0px);
 }

packages/ui/src/components/editor/prompt/AsciiArtEffect/AsciiArtEffect.tsx

@@ -27,12 +27,19 @@ export const AsciiArtEffect = ({ density = 1 }: Props) => {
       el.style.setProperty('--mouse-y', `${y}px`)
     }
 
+    const handle_mouse_enter = () => {
+      el.style.setProperty('--mask-offset-x', `${Math.floor(Math.random() * 100)}px`)
+      el.style.setProperty('--mask-offset-y', `${Math.floor(Math.random() * 100)}px`)
+    }
+
     parent.addEventListener('mousemove', handle_mouse_move)
     parent.addEventListener('mouseleave', handle_mouse_leave)
+    parent.addEventListener('mouseenter', handle_mouse_enter)
 
     return () => {
       parent.removeEventListener('mousemove', handle_mouse_move)
       parent.removeEventListener('mouseleave', handle_mouse_leave)
+      parent.removeEventListener('mouseenter', handle_mouse_enter)
     }
   }, [])