Kinetic States

Client

Independent Study

Category

Interaction Design + Creative Coding

Year

2026

Back to Portfolio

Blue Voice community dashboard interface

Overview

Kinetic States is a set of small interaction experiments about what a pointer can communicate before a person clicks anything.

I explored inertia, attraction, resistance, dwell time, velocity and spatial distortion as ways of making interface elements feel heavier, more intentional or more responsive to approach.

Role & Scope

I designed the interaction concepts, visual system and working prototype, then built each behavior as its own responsive interaction state.

Rather than treating motion as decoration after the interface was finished, the project starts with movement itself: how something should resist, follow, attract, avoid or wait for the cursor.

What I Built

The study contains ten behaviors ranging from magnetic attraction and repulsion to elastic deformation, selection gravity, delayed activation and velocity-sensitive movement.

Each uses the same basic visual language but changes the relationship between pointer and interface. Some help acquire a target, some deliberately resist interaction, and others use time or motion to distinguish intentional engagement from simply passing through an area.

Implementation

React · TypeScript · Motion · Vite · Tailwind

Summary

Each state is implemented as its own interaction component, with pointer position, distance, velocity or time becoming input to the motion system.

The behaviors aren't all variations on the same hover animation. Magnetic attraction calculates proximity and pulls a target toward the pointer; Selection Gravity reshapes a field of nearby targets; Temporal Hover only commits after sustained presence; Velocity Shift derives movement from pointer speed.

Springs are used throughout to keep those relationships from feeling directly cursor-locked. Changing stiffness, damping and mass becomes part of designing how much weight or resistance an interface seems to have.

src/app/components/SelectionGravityZone.tsx

const dx = latestX - nodeCX
const dy = latestY - nodeCY
const dist = Math.sqrt(dx * dx + dy * dy)

if (dist < 150) {
  const pullFactor = (150 - dist) / 150

  targetScale.set(
    1 + pullFactor * 0.5
  )

  targetX.set(
    dx * pullFactor * 0.3
  )

  targetY.set(
    dy * pullFactor * 0.3
  )
} else {
  targetScale.set(1)
  targetX.set(0)
  targetY.set(0)
}

const dx = latestX - nodeCX
const dy = latestY - nodeCY
const dist = Math.sqrt(dx * dx + dy * dy)

if (dist < 150) {
  const pullFactor = (150 - dist) / 150

  targetScale.set(
    1 + pullFactor * 0.5
  )

  targetX.set(
    dx * pullFactor * 0.3
  )

  targetY.set(
    dy * pullFactor * 0.3
  )
} else {
  targetScale.set(1)
  targetX.set(0)
  targetY.set(0)
}

const dx = latestX - nodeCX
const dy = latestY - nodeCY
const dist = Math.sqrt(dx * dx + dy * dy)

if (dist < 150) {
  const pullFactor = (150 - dist) / 150

  targetScale.set(
    1 + pullFactor * 0.5
  )

  targetX.set(
    dx * pullFactor * 0.3
  )

  targetY.set(
    dy * pullFactor * 0.3
  )
} else {
  targetScale.set(1)
  targetX.set(0)
  targetY.set(0)
}

pointer approaches node → distance decreases → pull increases → node grows and shifts toward the pointer.

Project State

Kinetic States is a finished interaction study rather than a product interface. The ten states are intentionally exaggerated so the differences between attraction, resistance, inertia, timing and velocity are easy to feel.

Some of these behaviors could be reduced into much subtler interface interactions; others are more useful as experiments in their own right. The project became a way of treating cursor behavior as a design material rather than just an input method.

Other Work

Product + Music Technology

Music Mood Identification System

Product + Music Technology

Music Mood Identification System

Product + Front-End

Family Storytelling Platform

Product + Front-End