Motion Blur
December 2023
import { cn } from "lib/utils";import { useEffect, useState } from "react";export const MotionBlur = () => {const [hasMotionBlur, setToggleMotionBlur] = useState(false);return (<><div className="group container relative h-[300px] w-full p-12"><buttonclassName="absolute left-4 top-2 text-[11px]"onClick={() => setToggleMotionBlur(!hasMotionBlur)}>{hasMotionBlur ? `on` : `off`}</button><divclassName={cn("animate-move h-9 w-9 rounded-full bg-blue-700",hasMotionBlur && "animate-motion-blur")}/></div><style jsx>{`.animate-move {transition: all 0.75s ease-in-out 0ms;position: absolute;top: 50%;bottom: 50%;left: 10%;}.container:hover .animate-move {left: 90%;}.animate-motion-blur {animation: move-out-motion-blur 0.75s ease-in-out 0ms both;}.container:hover .animate-motion-blur {animation: move-in-motion-blur 0.75s ease-in-out 0ms both;}@keyframes move-in-motion-blur {0%,100% {box-shadow: none;filter: blur(0);}50% {box-shadow: -10px 0 1px rgba(29, 78, 216, 0.9),-20px 0 10px rgba(29, 78, 216, 0.8),-30px 0 4px rgba(29, 78, 216, 0.7),-40px 0 10px rgba(29, 78, 216, 0.6);filter: blur(2px);}}@keyframes move-out-motion-blur {0%,100% {box-shadow: none;filter: blur(0);}50% {box-shadow: 10px 0 1px rgba(29, 78, 216, 0.9),20px 0 10px rgba(29, 78, 216, 0.8),30px 0 4px rgba(29, 78, 216, 0.7),40px 0 10px rgba(29, 78, 216, 0.6);filter: blur(2px);}}`}</style></>);};