Everything Solid Is Just Slow Liquid
The story behind The Melt
Inspired by Phase transition on Wikipedia
Built with GSAP · SVG Filter (feGaussianBlur, feColorMatrix)
Techniques DOM Particle System · Goo Filter Effect · CSS Color Interpolation · Shape-Point Mapping
Direction Literalize a phase transition by letting users melt the word SOLID into FLUID through hover-triggered gooey drip particles that follow letter contours
Result An interactive typography loop where hovering melts each letter into gravity-driven drips that reform below, and hovering FLUID pops it back — matter endlessly reorganizing between states
The Story
Phase transition is the physics of becoming.
When ice melts to water, or water boils to steam, the substance does not change. H2O remains H2O. What changes is the arrangement: how the molecules relate to each other, how much they move, how tightly they hold their formation.
A solid holds its shape. Molecules locked in lattice, vibrating in place but never leaving their position. Structure. Rigidity. Form.
A liquid takes the shape of its container. Molecules sliding past each other, maintaining proximity but not position. Flow. Adaptation. Movement.
The transition between them is not gradual. It happens at a precise temperature, a threshold where the old order becomes unsustainable and a new order emerges. The moment of melting is a moment of fundamental reorganization.
And here is the strange part: at the phase boundary, matter is both things at once. Neither fully solid nor fully liquid. Caught in transformation.
The Take
We think of identity as solid.
“I am this kind of person. I have these traits. I hold these beliefs.” We speak of ourselves in fixed terms, as if personality were a crystal lattice, molecules locked in place.
But identity is more like matter at the phase boundary. We are always in transition. The beliefs we held at twenty have melted and reformed by forty. The person we were in grief is not the person we are in joy. We flow into containers and take their shape.
The word SOLID contains the word FLUID, not literally, but conceptually. One implies the other. Definition requires its opposite.
What would it mean to watch SOLID become FLUID? To see rigidity dissolve into flow, letter by letter, dripping from one state into another?
The Tech
The Melt is an interactive typography experience built with GSAP animations, CSS, and DOM particle systems.
The core mechanic is letter-by-letter transformation:
- Letter shape mapping: Each letter (S, O, L, I, D, F, L, U, I, D) has a defined set of normalized coordinate points describing its visual outline
- Gooey drip particles: When you hover over a SOLID letter, 14-24 drip particles spawn at the source letter’s shape points
- Gravity-driven animation: Drips fall with
power2.ineasing, accelerating as they descend, mimicking real liquid physics - Color interpolation: Each drip transitions from the SOLID color (#364F6B, steel blue) to the FLUID color (#FC5185, vibrant pink) as it falls
- Shape morphing: Drips spawn from the source letter’s shape points and land at corresponding points in the target letter, creating a sense of matter conservation
- Pop and reform: Hovering over a FLUID letter causes it to inflate and explode in splatter particles, which fade as the SOLID letter reforms
- CSS goo filter: A subtle SVG filter creates the blobby, merged appearance of the drips
- Touch support: Swiping across letters triggers the same melt/pop interactions for mobile
The bidirectional nature of the interaction, SOLID melts down, FLUID pops back up, creates an endless cycle of transformation. Matter cannot be destroyed, only reorganized.
The Experience
Hover over SOLID. Watch it dissolve.
Each letter you touch triggers a cascade of gooey drips that fall from SOLID to FLUID. The drips follow the letter’s shape, falling from the S’s curves, the O’s circle, the rigid lines of L, I, D.
As they fall, they change color. Steel blue becomes hot pink. Rigidity becomes flow.
The drips land and absorb into FLUID, filling each letter like pouring liquid into a mold. Once a letter is filled, it holds its new form.
But hover over FLUID, and it pops. An explosion of splatter, particles flying outward, and the letter reforms above in SOLID. Ready to melt again.
This is not destruction. This is not creation. This is phase transition: the same matter, reorganizing itself endlessly between states.
On mobile, swipe across the letters to trigger the transformation. Drag your finger through SOLID and watch it follow your touch downward.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.