Hey everyone! I found this awesome website where the entire layout seems to float in 3D space and follows your mouse movements when you move the cursor around. The effect makes everything look like it’s floating and tilting based on where your mouse goes.
I’m wondering if anyone knows how to build something similar using Figma’s prototyping features? Can you make interactive prototypes that respond to mouse position and create that 3D parallax movement effect? I’ve been playing around with the animation settings but can’t figure out how to make elements track the cursor position.
Has anyone tried creating this type of mouse-following animation before? Would love to know if it’s even possible or if I need to use a different tool for this kind of interactive prototype.
Figma’s prototyping is pretty basic for dynamic stuff like mouse tracking. It only handles preset triggers and simple frame transitions - no real-time cursor detection. I hit this same wall working on an interactive presentation last year. What you want needs continuous coordinate tracking and instant repositioning, which Figma just can’t do. For real mouse-following 3D effects, you’ve got to ditch design tools. Web tech is your answer - CSS 3D transforms with JavaScript mouse listeners. GSAP makes the smooth parallax stuff way easier. If you’re stuck on prototyping tools, maybe try Framer since it lets you add custom code. But honestly, for those floating layouts you mentioned, you’ll probably need to build an actual web prototype with HTML, CSS, and JavaScript.
Figma won’t work for real mouse tracking 3D effects. It’s too limited for dynamic cursor interactions.
I’ve built floating 3D layouts for work projects, and automation is always the answer. You need something that handles real-time mouse position data and triggers multiple API calls to update element positions smoothly.
Here’s what I do: capture mouse coordinates, run them through math transforms for the 3D effect, then push those positions to update DOM elements in real time. The trick is handling continuous data streams without lag.
Skip the limited prototyping tools and build this as an automated workflow instead. Create the mouse tracking system, connect it to 3D transform calculations, and you’ll have a fully functional prototype that actually works like that website you saw.
You get way more control than any design tool, plus it can scale to production later.
nah, figma can’t do that. I tried building something simlar a few months ago and it doesn’t have the mouse tracking you need. Those floating 3D sites use js libraries that constantly track cursor position - figma only handles basic clicks and hovers. You’d wanna check out protopie or just code it yourself with css transforms.
Figma indeed lacks the capability for mouse tracking required for true 3D parallax effects. I encountered similar limitations during my attempts to create dynamic interactions. The animations you’re seeing are most likely implemented using JavaScript libraries such as Three.js or leveraging CSS transforms combined with mouse event listeners. If you’re looking for prototyping options that support such features, consider using tools like Principle, ProtoPie, or even CodePen, which cater more to real-time cursor tracking and 3D effects that Figma cannot provide.