unravel

Inspiration

I often receive greeting messages on Whatsapp. But most of the time, they are just static images. Hence, i wanted to make the greeting card experience more fun!

What it does

Users interact using hand gestures to go to the next stage of the animation until they reveal the message

How we built it

Animated animations with Davinci resolve Built with a web frontend using NextJS and tailwind Used MediaPipe for hand tracking and Lottie/video for controlled animations.

Challenges we ran into

Precise timing between gestures and animations. Dealing with transparency, video formats, and performance tradeoffs. ( it was rly rly hard to make video background transparent ) Time constraints

Accomplishments that we're proud of

Successfully integrated real-time gestures with animation state control. Built a smooth, responsive interaction flow on the web. UI

What we learned

Gesture-based UX requires tight state management and timing control. Lottie and video formats have real limitations for interactive use.

What's next for unravel

Polish interactions and timing. Optimize performance and cross-device support. More greeting card templates

Built With

• lottie
• mediapipe
• mongodb
• nextjs
• tailwind