Interaction design
Framer
AI & code
Type
Cursor interaction experiment
Status
On my homepage hero
Output
Reusable Framer component with 16 editable properties
Role
Design direction
Interaction design
Decision making
AI direction
Tools
Pinterest (reference)
Claude Code
Framer
Hover to take control
From a Pinterest loop to my portfolio's cursor
From Pinterest Animation to Custom Cursor -Built with Claude Code
Overview
This project started with a short animation I saved on Pinterest and ended as a live cursor interaction on my Framer portfolio. The animation was a grid of dots on a black screen, with a small white node drifting around and pulling thin threads out to the dots near it.
It only played on its own, and you could not touch it. While watching it, I kept asking one question:
What if that node followed the visitor's mouse instead?
Claude Code wrote the code. My role was to make the decisions: what this component should do, how much of it goes into the user's hands, how it behaves, where it switches off, and where it belongs on my portfolio.
The box above is the result. It drifts like the original until you move your cursor over it.
The Pinterest animation
Plays on its own, nobody can touch it
My hero today
The visitor's mouse drives it
The goal
Turn something people watch into something they play with
The Pinterest clip was beautiful, but it was a loop. On my portfolio, I wanted the same feeling to respond to every visitor's hand. I set myself four rules before starting:
It should feel like the original.
Same grid, same glowing node, same threads, same way the dots grow near the node and fade away from it.
The mouse should drive it.
The node follows the cursor, and the effect appears where the visitor is looking.
It should be mine to shape.
No fixed copy. Every visual part had to be adjustable from Framer, without touching code again.
It should not get in the way.
The effect has to stay smooth, sit behind my content, and never make links harder to find.
If I could check all four, the experiment was a success.
My role
Designer as decision maker
On this project I did not write code or draw screens. Claude Code did the building, and my role moved to a strategic one: deciding what this component should be and how it should serve my portfolio. Those decisions turned one looping animation into something useful, while keeping the same feeling.
Control
What goes in the user's hands
I decided which parts the person using it in Framer can change, and how far that goes. My test: what would someone actually want to change to fit their page?
What I left fixed is the core of the feeling. Dots grow near the node and fade away from it, and the threads always start at the node.
Behaviour
How it moves
The node follows with a soft lag, so it feels alive instead of glued to the mouse.
When the mouse leaves, it can return to the centre, stay, fade out, or drift. On my hero it fades out.
On the hero the node replaces the cursor, and the arrow comes back over links.
Restraint
Where it switches off
Inside the Framer editor it shows a still, centred version.
When nobody moves the mouse, it stops drawing completely.
With reduced motion on, the soft glide is removed.
On phones it rests and only follows a finger while dragging.
In sections full of text and cards, the normal cursor stays.
Use cases
Where I can use it
As the cursor on my hero, floating over my portrait.
As a background in dark sections, tested in "What I love to do".
As a quiet texture, with the faint grid always showing.
In any colour theme, since every colour can change.
Everything a user can customise
Group
Controls
What it changes
Colour
Background, dots, threads, node
The full palette, so it can match any section or brand
Size
Node, largest dot, smallest dot
How bold or delicate the effect feels
Grid
Gap, reveal area, faint grid
How dense the pattern is and how much of it lights up
Threads
Width, opacity, reach
How thick the threads are and how far they stretch
Motion
Follow speed, idle, hide cursor
How lazily the node follows and what it does when the mouse leaves
Process
From a saved clip to a live hero
01
Studying the reference
I watched the clip again and again to understand what made it feel good. The node is the brightest point, the dots swell as it gets close, and the threads give everything a sense of connection.
02
Breaking the video down
Claude Code took the clip apart frame by frame and turned a feeling into real numbers:
Dots sit on a fixed grid, 73px apart.
The node is about 28px wide.
Dots shrink from about 15px to 3px before fading out.
Dots show within about three grid cells of the node.
Threads reach about two and a half cells.
03
Deciding how a mouse changes things
An animation decides its own path. A cursor effect has to react to a person, so I decided how the node follows, what happens when the mouse leaves, and whether it replaces the normal cursor.
04
Building the component
Claude Code wrote it as a Framer code component drawn on one canvas. Its first version used a format Framer does not accept, so I gave it a template of a cursor component already working in my project, and it rewrote the code to match.
05
Testing against the original
I placed my version next to a frame from the video. The first pass faded the outer dots and threads too early, so I tightened the edges until they matched.
06
Making it customisable
I decided which parts belong in the user's hands and how far customisation should go. Each became a control in Framer's right panel.
07
Placing it on the site
I connected Claude to my Framer project and placed the component on my homepage hero with a see-through background, so it floats over my portrait.
Constraints
Where it got stuck, and how I moved it
One constraint really blocked the work: getting the code into a format Framer accepts. The rest were small bumps, and each one taught me something.
Hiccup
Framer would not accept the code
Claude's first version was written in a format Framer does not support, so the component would not work in my project.
Decision
Teach it with a template
I gave Claude a cursor component already working in my Framer project. It followed that structure and rewrote the code in a way Framer accepts.
What I worked within
Framer has its own rules.
A code component has to look right in the editor, where there is no mouse, and its settings have to appear as clean controls.
My hero was already busy.
It had my portrait and a liquid hover effect on top of it.
Speed matters on a portfolio.
A heavy effect on the first screen would hurt the first impression.
Phones have no hover.
The effect needed a sensible fallback for touch screens.
Friction at each step
Step
Friction
What I did
Making it work in Framer
The first version used a code format Framer does not accept
Gave Claude a template of a working cursor component from my project
Building
Framer stores colours in a format the canvas cannot read
Added a small helper that pulls out the real colour
Building
No mouse inside the editor, so the effect looked empty
Made it show a still, centred version there
Connecting to Framer
The plugin needed my own Google sign in
Signed in myself, then let Claude continue
Choosing a spot
Two cursor effects in the hero would fight
Tested it in another section first, then moved it to the hero and hid the liquid hover
Hiding the cursor
Over text and cards, the cursor flickered between node and arrow
Kept the arrow on there; on the hero the arrow returns over links
Placing the layer
Framer dropped it 60px to the left and pushed cards above their heading
Fixed the order and wrapped it in a transparent full size frame
Final testing
Smooth scroll blocked automated scrolling in preview
Did the final check by hand
Output
A reusable component on my homepage
The result is a Framer component called Constellation Cursor, living on my homepage hero. Move your mouse over the hero and a glowing node follows you, the dots around it light up, and threads reach out to connect them.
How it behaves on my hero
The background is see-through, so the dots and threads float over my portrait.
The node replaces the normal cursor, and the arrow comes back over my navigation and links.
When the mouse leaves the hero, the effect fades out softly.
On phones, the node rests in place and follows your finger while you drag.
Reflection
What this project taught me
The most valuable part of this project was the question, more than the code. The Pinterest clip was finished work by someone else. Handing its node to the visitor's mouse is what made it mine.
Inspiration is a starting point.
I save a lot of references, and most of them stay on the board. Asking what this one could become gave the project its direction.
A feeling can be measured.
Grid spacing, dot sizes and thread reach turned taste into something I could rebuild, compare and tune.
My role shifted from making to deciding.
Claude Code wrote every line. My work was deciding what goes into the user's hands, how far customisation goes, how it behaves, where it switches off, and where else it can live.
Context changes the interaction.
The same effect felt playful in the hero and distracting in a section full of text. People still need the arrow over anything clickable.
Flexibility pays off.
Making every part adjustable took more thought up front. Now I can reuse it anywhere and change its mood in a few clicks.
Thank you : )