Building 3D Web Experiences: Drag-to-Unlock Magic with Webflow + Spline
New year, old me.
Howdy compadres,
It’s the old jackosnack back in your inbox ready to rain down some minorly intriguing interactive website shindigarooney weekly that might well tickle your devsigner pickles.
What am I on about?
I’m on about web goodness.
No likey, go unsubscribey (at the bottom of this email if helpful).
Today’s web blast, I’m talking easter eggs.
Cheeky little delightful interactions with the user.
Something that’s a bit weird but a bit fun.
And that is a key in a lock opening a virtual polaroid website.
If interested in the whole break down, read the article and watch the video here!
Or just try out the animation live in Spline here:
The main part of this in in Spline:
Find or Clone Assets
Inside Spline, the library has loads of clonable scenes, so you don’t have to start from scratch. The project key and lock will be shared as a clonable asset so anyone can remix it in their own sites.
You may swap a:
key + lock
pirate chest + treasure
envelope + mailbox
…whatever supports your concept.
Constructing the Objects
The visuals were surprisingly straightforward:
The key is built from ellipses, rectangles and a long thin cylinder
The lock here is simply a flat image, made dynamic through motion — no need for full 3D, though Spline supports both approaches
You could model more complex assets if you wanted, but the example proves you don’t have to.
🎮 Adding Behaviours: Dragging, Snapping, Looking, Triggering
This interaction is made of three main behaviours layered together.
1️⃣ Drag & Drop (The Core Movement)
Once you select the object (the key), you enable:
Drag
Drop
Cursor styling
From the UI:
Choose Drag and Drop
Change the cursor to a grab to signal interactivity
Adjust damping (smoothness of motion)—higher = slower and more fluid
Set behaviour relative to World, not Parent, so the movement respects the whole scene
When the user lets go, snap-to-position determines:
whether the object jumps into place
how long the easing takes
Snap speed of 5 gives the subtle floating delay; 0 makes movement instant.
2️⃣ Look-At Motion (Make Objects React to the Mouse)
Both the key and the lock are animated to follow cursor movement while idle.
This creates a sense of physical material and presence.
To enable:
Add Look At
Set Align With Camera
Leave the camera as Personal Camera unless you’ve changed scene cameras
Tune damping again for smoothness
Adjust plane direction (XY / XZ / YZ) — in this project, Z movement felt most natural
Changing axes completely changes how objects behave in perspective
Hover out behaviour determines how objects reset:
With speed > 0, they drift back slowly to neutral
With speed = 0, they snap home instantly
That tiny choice makes the scene feel playful rather than robotic.
3️⃣ Trigger Area (Where the “Magic” Happens)
The invisible green “trigger zone” is where snapping becomes unlocking.
Draw the Trigger Area around the lock
Adjust its bounding box depending on how precise you want the user to be
Keep Show Helper on while designing
Turn on Open Link for the triggered event
Paste the Lovable microsite link
Set it to open in new tab
The zone decides when the link fires — it won’t trigger unless the dragged object enters that field.
To top it off, you can layer:
Sound effects (here: a click downloaded or exported from CapCut)
Triggered by Start when key hits zone
These touches reinforce feedback loops — motion + light tilt + audible confirmation.
Read the full article here or watch the video to learn about embedding!
Cheers ma dears!
Next week, I’ll be sharing an update on this puppy.
What are you working on?
Reply to this email. V intrigued xx