Building 3D Web Experiences: Drag-to-Unlock Magic with Webflow + Spline

This post walks step-by-step through exactly how that interaction was built — the tools, the assets, the animation logic, and how to embed and scale it on a real website.

Websites don’t have to be static or predictable. Recently, I built a site for a videographer where tucked away in the footer sits an unexpected moment:a 3D key you can drag into a lock, and when it snaps into place, it unlocks a whole microsite where users can record a message and say hi to Will, the creator the site was designed for.

This post walks step-by-step through exactly how that interaction was built — the tools, the assets, the animation logic, and how to embed and scale it on a real website.

🎯 Why Add This Kind of Interaction?

Let’s be clear up front:
A draggable key isn’t necessary for a website to succeed.
You still need good content, a clear story and sound SEO.
This feature is purely an extra layer — but one designed to give users a small moment of delight and surprise.

And for brands where personality matters — creatives, makers, storytellers — that little spark can make the site memorable.

🧩 The Three Tools Working Together

1. Webflow

The main site structure and page layout

2. Spline

All the 3D visuals, physics, cursor tracking and interaction triggers

3. Lovable

The unlocked landing page — built using text prompts without touching code

Three tools, three roles — working together cleanly.

🛠️ Building the Key + Lock Scene 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.

🌐 Building the Page That Unlocks

The destination site is built in Lovable, which:

lets you generate functioning pages using prompts
helps iterate layouts with text input
supports publishing (paid plans may be required for launching)

It’s ideal for a small microsite that doesn’t need full CMS structure.

🧭 Embedding the Interaction in Webflow

From Spline:

Click Export
Select Viewer
Copy the embed link

In Webflow:

Add a footer section
Paste the embed code
Set the Spline block to 100vh and fixed
All content above should sit at relative positioning with higher z-indexes
This creates the effect that the website scrolls normally while the interactive scene stays locked to the viewport background.

Every section floats on top — the Spline scene is always there, quietly waiting at the bottom.