Fifteen experiments in making the web less ordinary, without forgetting the people using it.
There is a moment on a good interactive website when you stop scrolling on autopilot.
Not because something shouted at you. Not because a modal interrupted you.
Something simply responded in a way you did not expect.
A word leaned toward your hand. An image opened into another world. A product came apart, and suddenly its construction made sense.
For a second, the website stopped feeling like a stack of rectangles.
It felt like a place.
That moment is what I wanted to explore with MOTIONFORGE.
The Problem Wasn’t a Lack of Animation
We already have animation everywhere.
Headings arrive. Cards lift. Buttons grow. Sections drift into view. Somewhere, a line of text is moving endlessly across the screen.
None of that is inherently bad. These techniques solve real problems.
But useful motion and memorable interaction are not always the same thing.
The question I kept coming back to was more interesting:
What would a motion library look like if the goal wasn’t to decorate a website, but to give it a physical character?
I didn’t want another drawer full of interchangeable entrance animations.
I wanted systems with behavior.
Systems you could push, pull, interrupt, and reshape.
Start With a Feeling. Then Choose the Technology.
The first temptation in creative development is to reach for the biggest tool available.
WebGL can look extraordinary. Three.js can build entire worlds. A shader can make a flat image appear to have material properties.
But technology is not the idea.
For MOTIONFORGE, the more useful question became:
What is the simplest mechanism that can make this interaction feel convincing?
Magnetic typography doesn’t need a 3D scene.
It needs individual glyphs with positions, velocities, a spatial force field, and springs that know how to settle.
A liquid button doesn’t need a game engine.
It needs a deformable boundary, SVG turbulence, real displacement, and a stable native button underneath.
A product explosion does need three dimensions.
Without actual depth, camera perspective, and component separation, the illusion falls apart as soon as you look closely.
Choosing the technology became part of the art direction.
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Press enter or click to view image in full size
Three Interactions That Changed the Shape of the Project
Liquid Reality Reveal
The idea started with a simple question:
What if an image had another reality underneath it?
The obvious implementation would be a circular mask following the cursor.
It would work.
It would also look exactly like a circular mask following the cursor.
The more interesting version uses turbulence and radial displacement. The boundary refracts. Movement creates a wake. Pointer velocity influences the distortion. An alternate image isn’t simply placed on top; it is sampled through a responsive lens.
The result is less about revealing content and more about making the surface feel uncertain.
Magnetic Typography
Typography normally behaves itself.
It sits on a baseline, follows a grid, and waits for you to read it.
In this experiment, the word becomes a collection of small physical bodies.
Each glyph reacts according to where your pointer is. Each one carries velocity. When you move away, it doesn’t teleport back to its original position.
It resolves the force that moved it.
That distinction is relatively small in code and surprisingly large in feel.
The text stops being decoration.
It becomes an object.
Scroll-Scrubbed 3D Product Explosion
This is the practical side of the same idea.
There is a difference between telling someone that a product is carefully engineered and allowing them to see its construction separate in space.
The example uses a procedural headphone assembly.
As scroll progression changes, individual components move from stable origins along defined explosion vectors.
The scene isn’t a sequence of pre-rendered frames.
It is a construction that can be explored.
And that makes the motion useful.
It explains something.
Fifteen Different Ways to Respond
Those experiments eventually became a collection of fifteen systems:
Liquid image refraction
Magnetic typography
Melting text
Cinematic image disintegration
Infinite 3D product carousel
Dimensional image trail
Scroll-scrubbed product explosion
Liquid magnetic button
Portal image transition
Holographic glass cards
Scroll tunnel
Procedural aurora field
Physics-based navigation
Controlled signal glitch
Geometry morphing
The variety matters, but it isn’t the point.
The point is that every effect has a different relationship with input.
Some follow velocity.
Some respond to proximity.
Some use scroll as a narrative timeline.
Some create atmosphere without demanding attention.
Become a Medium member
Some are deliberately playful.
Others are designed to communicate how something works.
A good collection shouldn’t give every website the same signature.
It should give developers enough room to find their own.
A Beautiful Demo Is the Easy Part
The less photogenic work starts after the first successful interaction.
What happens when the viewport changes?
What happens when the user is touching a screen instead of holding a mouse?
What happens when a component mounts twice?
What happens when an image finishes loading after the component has already been destroyed?
What happens when the browser cannot create another WebGL context?
And what happens when the user has explicitly asked the operating system for less motion?
Those aren’t cleanup questions.
They’re part of the creative work.
MOTIONFORGE uses a shared lifecycle so effects can be configured, paused, resumed, and destroyed consistently.
The gallery initializes effects near the viewport and releases scenes when they leave it.
Pixel ratio is bounded.
Mobile rendering can be reduced.
Late texture requests are guarded.
Scroll effects own their triggers instead of blindly deleting someone else’s.
The goal is smooth performance on suitable modern hardware.
That is deliberately different from promising a universal frame rate.
The final implementation still needs to be profiled against the browsers and devices that actually matter for a project.
I’d rather make that boundary explicit than turn an aspiration into a marketing statistic.
Reduced Motion Isn’t a Second-Class Experience
One of the most important design decisions was deciding what remains when movement is removed.
The answer cannot be:
Nothing.
Text should remain readable.
Images should remain available.
Navigation should still work.
A button should still be a button.
Under reduced motion, decorative behavior can stop or become a static composition. The underlying content and functionality remain intact.
This turned out to be more than an accessibility requirement.
It became a useful creative constraint.
If an interaction only makes sense while it is moving, perhaps the underlying design needs more thought.
Let People Explore Before They Read the Source
I wanted the public experience to feel more like an exhibition than a documentation dashboard.
The demo opens with a large MOTIONFORGE wordmark and a liquid-metal composition.
From there, the collection becomes a series of live experiments.
There is no wall of code competing with the motion.
No source-download buttons.
No pricing table interrupting the gallery.
Visitors can explore an effect, open a larger preview, adjust parameters, and save a preset locally.
The developer experience is deliberately separate.
The purchased project can be run locally, where the same collection becomes something different:
Actual source code.
Copyable examples.
Documentation.
Architecture-aware customization prompts.
Two contexts.
Two different jobs.
The public demo helps you decide whether the motion belongs in your idea.
The local edition helps you make it belong in your codebase.
Reusability Shouldn’t Mean Removing the Personality
There is a familiar tradeoff in creative tools:
The more reusable something becomes, the more generic it can feel.
I tried to avoid that by making the behavior configurable without flattening its character.
Intensity isn’t simply a larger scale.
Timing isn’t just a slower fade.
A spring can become tighter or more languid.
A liquid field can become quieter or more viscous.
Geometry can change its phase and material while remaining part of the same underlying system.
The API is intentionally small.
Every effect has a target, a clear configuration surface, and a lifecycle that can be reasoned about.
That predictability is what makes the unusual behavior usable.
The Web Doesn’t Need to Be Louder
It needs to be more intentional.
Not every page should melt.
Not every navigation bar needs inertia.
Not every product deserves an exploded view.
But when an idea calls for something expressive, the interaction should feel designed rather than borrowed.
That’s the ambition behind MOTIONFORGE:
Production-ready animations for websites that refuse to look ordinary.
Not motion for the sake of filling a timeline.
Motion that gives a website a little gravity.
A little materiality.
A reason to pause.
Explore the live playground
https://motionforge-2.vercel.app/
Move slowly.
Then quickly.
Pull a word apart.
Open a portal.
Take a product apart and put it back together.
The interesting part isn’t watching an animation.
It’s discovering what happens when the animation responds to you.
Get MOTIONFORGE
https://boukataya.gumroad.com/l/ybyvxk
Top comments (0)