질문사항
빛이 마우스를 따라 움직이며 원을 비추는 야매 3D 인터랙션을 만들어봅시다!
답변
Radial Gradient를 이용해서 hover 할 때 빛이 따라다니는 느낌을 만들 수 있어요! 아래 순서대로 따라 만들어 보세요!
마우스를 올릴 영역과 빛이 비추는 원을 배치할 프레임을 세트로 한쌍 만들어주세요. 저는 16세트 만들었지만 더 많이 만들수록 더 자연스럽습니다!
왼쪽 프레임(마우스 호버 영역)을 16칸으로 나눠서 칸마다 사각형 하나씩 배치해주세요
마우스 호버 위치에 맞춰 radial gradient를 넣어서 빛이 비춘 것 같은 이미지를 만들어주세요.
완성된 호버사각형 프레임과 구체를 각각 컴포넌트로 만든 후 한 세트씩 베리언츠로 묶어주세요! 
호버 사각형에 아래 그림처럼 인터랙션을 걸어주세요 16개 모두 해주세요. ( while hovering / smart animation)
호버사각형 색과 호버영역의 배경색을 모두 지워주세요!
프로토타입을 만들 원본 프레임을 하나 복사해서 라이트박스의 인스턴트를 모두 넣은 후 프로토타입을 실행해 보세요!
추가로 알면 좋을 팁
아래 피그마 파일에 작업파일을 직접 보면 더욱 이해가 쉬울 것 같아요! 저는 16개 + 5개 (상하좌우중앙) 21개의 호버 영역만 만들었지만 더 쪼갤 수록 더 부드럽고 자연스러운 인터랙션을 만들 수 있습니다!
실제로 3D는 아니지만 마치 3D처럼 보이는 인터랙션을 간단하게 만들 수 있습니다!
