3D Card Interaction

#Carft, #Interaction #Prototype · 2024. 02

약간의 코드와 Framer 기본 Transform 기능을 활용해서 3D 인터렉션을 작업했습니다.

아쉽지만, PC Web 환경에서 확인해주세요.

3D Hover Interaction

3D Hover Interaction

가장 기본 3D 인터렉션 예제입니다. 인터렉션 요소에 커서를 호버하면 커서의 위치에 따라서 3D Rotation과 Flare Effect가 동작하게 됩니다. 공간감 효과를 위해서 미세한 Transition을 추가했습니다.

직접 마우스를 올려서 작동시켜 보세요!

PC Web 환경에서 확인해주세요.

다양한 Transition 적용을 위해서 이미지 레이어를 분리해서 작업했습니다. 각 레이어는 Interaction 따라서 개별적으로 동작하고, 커서의 위치를 추적하도록 되어있습니다.

background-image-layer

particle-layer

shape-layer

cursor-light-layer

background-image-layer

particle-layer

shape-layer

cursor-light-layer

직접 마우스를 올려서 작동시켜 보세요!

3D Transform

커서를 호버할 경우 3D Transform된 형태를 유지하면서 인터렉션되는 예제입니다.

Glass Effect

Gradient Effect - 01

Liquid Effect - 01

Bubbles Effect

Liquid Effect - 02

Gradient Effect - 02

Glass Effect

Liquid Effect - 02

Gradient Effect - 02

직접 마우스를 올려서 작동시켜 보세요!

Hover Me?

Hover Me?

직접 마우스를 올려서 작동시켜 보세요!

Texture Wallpaper

Action Bar Interaction

Texture Wallpaper

Action Bar Interaction