The Feel
of Things.
An interaction design system built on friction, warmth, and the weight of real materials. This is how I believe interfaces should feel — not frictionless and invisible, but textured, weighted, and alive. Nine pillars, organised into three acts, that define the space between a click and a feeling.
The foundation: interaction design begins with the material properties of the interface itself. Before anything moves, before anything responds, there is a surface. And that surface has qualities — texture, temperature, history. The screen is not glass. It is paper, linen, stone.
01 — Grain
Surfaces have texture
Screens aren't glass — they're paper, linen, stone. The noise overlay, the parchment warmth, the multiply blend — these make the screen a material, not a void. Grain is the first thing you feel before you touch anything. It sets the emotional register of every interaction that follows.
A smooth, textureless surface feels clinical. A surface with grain feels crafted. The difference between a hospital wall and a hand-thrown ceramic bowl — both functional, but one has a soul.
02 — Warmth
Interfaces have temperature
Parchment (#F0EDE6) feels different from clinical white (#FFFFFF). Burnt orange feels different from electric blue. The palette is a thermostat. Warmth is not a visual property — it's an emotional one. The same content, the same layout, the same typography — but change the temperature and you change the feeling.
Cold interfaces demand efficiency. Warm interfaces invite lingering. Neither is wrong, but the choice must be deliberate. Temperature is the first emotional signal an interface sends, before a single word is read.
Sunday Morning
A quiet moment with coffee and light through the window.
3 min read
Drag the temperature slider. Same card, completely different emotional response.
03 — Patina
The best objects improve with use
Patina is the accumulation of time and touch — a brass door handle worn smooth, a book with cracked spine, a leather wallet that moulds to your pocket. Digital surfaces should feel well-worn and loved, not factory-fresh.
Most interfaces reset every time you visit. Nothing remembers your presence. But what if the interface accumulated traces of your interaction? What if hover marks left faint impressions, edges softened with repeated touch? Not gimmick — memory.
Hover and click across the surface. Watch it accumulate the traces of your presence. This demo develops patina as you read.
The physics: how elements behave when you push, pull, drag, and release them. Movement in interfaces is not decoration — it is information. The way something moves tells you what it is, how heavy it is, and how much it matters.
04 — Weight
Digital objects have mass
A heavy element overshoots differently than a light one. The cursor trails because it has weight. Cards settle because they've been dropped, not placed. Weight is an interaction property, not a visual one — two objects can look identical but feel completely different.
Weight communicates importance. A notification that slides in like a feather feels dismissible. One that lands with a thud demands attention. The physics of arrival is the first word in the conversation.
Heavy
High inertia, deep overshoot
Light
Snappy, quick, minimal overshoot
Drag both objects. Same size, same appearance — completely different feel. Weight is invisible until you touch it.
05 — Friction
Not all movement should be frictionless
Friction is the difference between sliding on ice and walking on grass. Deliberate friction slows you down where slowing down matters — it makes the action feel considered, not careless. The design industry's obsession with "frictionless" has made everything feel like skating on ice: fast, but precarious.
The right amount of friction is the difference between a disposable gesture and a meaningful action. A little resistance says: this matters, so take a moment.
Drag the handle and release. Adjust the friction coefficient to feel the difference between weightless and intentional.
06 — Fluid
Some interactions should flow like water
Continuous, uninterruptible, responsive to the shape of their container. Scroll, gesture, parallax — these are fluid dynamics, not state changes. A fluid interaction never snaps; it pours. It responds to the velocity and direction of your intent, not just the binary of start and stop.
The difference between a light switch and a dimmer. Between a doorbell and a theremin. Fluid interactions acknowledge that human movement is continuous, and the interface should honour that continuity.
Move your mouse through the canvas. Elements pour and settle, demonstrating continuous interaction — not state changes.
The soul: what the interface communicates through what it doesn't do. Presence is the quality of being there — of an interface that listens, breathes, and waits. It is found in the gaps, the pauses, the deliberate absences that give weight to what surrounds them.
07 — Tactility
The difference between pressing a key and pressing a button on a coat
Interactions should have the feedback quality of physical contact — pressure, give, response. Not just "click happened" but "you pressed something real." The difference between a membrane keyboard and a mechanical one. Between a touchscreen and a piano key.
Tactility is honesty. When you press a button that depresses, shadows shift, and springs back — your body trusts the interface. When you press a flat rectangle and a spinner appears, you're guessing.
Press and hold the button. Press lightly and it yields softly. Press firmly and it responds with conviction. Feel the difference between a dead click and a tactile press.
08 — Resistance
Some doors should be heavy
Resistance is intentional friction at decision points — moments where the interface asks "are you sure?" not with a modal, but with physical weight. Swiping to delete should feel like tearing paper, not flicking a switch. The heaviness of the action communicates the weight of the consequence.
A door to a vault is heavy for a reason. A confirmation dialog is the digital equivalent of a heavy door, but most are weightless — just another tap. Resistance replaces words with physics.
Drag the element past the threshold. Feel it resist, pull back, demand commitment — then release with a satisfying snap.
09 — Silence
The authored absence
The gap in the divider. The empty about page. The pause between animations. Silence is the negative space of interaction — it gives weight to what surrounds it. An interface that never pauses never breathes. And something that doesn't breathe isn't alive.
Music without rests is noise. Motion without stillness is chaos. The most powerful moment in a conversation is the pause before the answer. Silence is not the absence of design — it is the most deliberate design decision of all.
Play both sequences. One continuous, one with intentional pauses. The pauses make it feel authored, not automated.
The system is the feeling
These nine pillars are not rules. They are observations about what makes the difference between an interface you use and an interface you feel. Grain gives a surface its soul. Warmth sets the emotional temperature. Patina rewards return. Weight communicates importance. Friction makes actions considered. Fluidity honours continuous intent. Tactility builds trust. Resistance protects decisions. And silence gives everything else room to breathe.
This system lives in the work. In Letterboxd Live's spring-animated cards and haptic invite craftsmanship. In the parchment grain and cursor weight of this portfolio itself. In every interaction where I've chosen deliberate feeling over frictionless efficiency.
The future of interaction design is not about making things easier. It is about making things matter.
Nine live demos running on Canvas 2D with per-pixel noise generation, spring-based drag physics via lerp interpolation and friction coefficients, and CSS custom properties driving real-time temperature shifts. Patina accumulates interaction traces through composite blending on a persistent canvas buffer. Weight and resistance demos use velocity tracking with configurable damping. GSAP ScrollTrigger orchestrates reveal timing. No frameworks — vanilla JS reading mouse position, requestAnimationFrame, and getImageData at 60fps.