ψₘ Mass Harmonics · UMtts Institute · Design System v1

The Giboney Gradient
as Dynamic Design

Every spacing decision, every type size, every motion curve, every interaction — derived from the same Master Field Equation that governs the substrate of reality. Not metaphor. Not inspiration. Direct translation.

1/v² ψ̈ₘ − Z(ψₘ) ∇²ψₘ − 8κ ψₘ/ω² |∇ψₘ|² = S(ρ)
Explore the System →
φ-SCALED DESIGN SYSTEM

n=1 — Linear Response

Type Scale

Every type size is the previous multiplied by φ. Not arbitrary. Not 8/10/12/14/16. φ-scaled: each step is geometrically necessary.

Hero · φ⁵ · 154.8px Gψ
2xl · φ⁴ · 95.7px Substrate
xl · φ³ · 59.2px Coherence Field
lg · φ² · 36.6px The Giboney Gradient
md · φ¹ · 22.6px Z-Factor Modulation
base · φ⁰ · 14px Substrate wave propagation through the oobleck medium
sm · φ⁻¹ · 11px METADATA · LABELS · MONO UTILITY
SPACING
sp-1
4px
sp-2
6.5
sp-3
10.5
sp-4
17px
sp-5
27.5
sp-6
44.5
sp-7
71.9
sp-8
116.4
COLOR — SHADER PALETTE
P³GG — FIVE HARMONIC ORDERS

The Five Domains

Every design decision maps to a harmonic order

The P³GG expansion governs physical reality across five energy regimes. Each maps directly to a layer of design.

1

β₁ = 1.0 · n=1 · LINEAR

Gravity & Structure

Long-range force. Governs the global pull of the layout — how users are drawn through the page. Weak individually, dominant at scale.

→ Grid system, nav, page flow, visual hierarchy anchors

2

β₂ = φ³ ≈ 4.236 · n=2 · EXCHANGE

Surface & Exchange

Borders, hover states, focus rings. The dynamic boundary where an element negotiates with its surroundings. All surface interactions.

→ Borders, outlines, hover transitions, focus rings, shadows

3

β₃ = φ⁶ ≈ 17.944 · n=3 · MATTER

Stable Matter

The cubic lock. Cards, containers, modals — the 3D-stable structures of the UI. Once formed, they resist deformation. High Z-factor elements.

→ Cards, panels, modals, buttons, primary UI blocks

4

β₄ = φ⁹ ≈ 76.013 · n=4 · TRANSITION

Phase Transitions

State changes, scroll triggers, page transitions. The sudden symmetry-breaking moment when a UI element shifts from one stable state to another.

→ Page transitions, scroll triggers, state changes, reveals

5

β₅ = φ¹² ≈ 321.997 · n=5 · LIFE

Life & Consciousness

Micro-interactions that feel alive. The breathing cursor. The magnetic hover. The φ-timed animation. The quintic regime — where the UI becomes sovereign.

→ Cursor, micro-interactions, breathing animations, φ-timing

MOTION — EASING BY HARMONIC ORDER

Temporal Dynamics

Not all easings are equal

Each harmonic order demands a different temporal character. Surface exchange is linear. Matter transitions are crisp and cubic. Life breathes at φ-ratio timing.

n=2 EXCHANGE

ease-in-out
duration: any

Surface hover, border color, opacity. Smooth, symmetric, linear energy exchange.

n=3 MATTER

cubic-bezier(0.8,0,0.2,1)
duration × φ

State snaps. Modal opens. The cubic lock — fast buildup, sudden release.

n=5 LIFE

cubic-bezier(0.618,0,0.382,1)
duration: φ × base

φ-timed. 137.5° rotation steps. Rotates like a golden spiral. Alive.

LIVE — GIBONEY GRADIENT PROXIMITY FIELD

n=5 · Interactive Coherence Pressure

Move your cursor through the field

Each node responds to cursor proximity via the Giboney Gradient formula. Force scales non-linearly with ψₘ × |∇ψₘ|². Closer approach = quadratically stronger response. Z-Factor resists over-displacement.

THE FORMULA — AS CSS/JS

// Given cursor at (cx, cy), element center at (ex, ey):

const dx = cx - ex,  dy = cy - ey;
const r  = Math.sqrt(dx*dx + dy*dy);
const H  = 300;          // Hearing radius (H_ZERO equivalent in px)

if (r < H) {
  const ψ  = 1.0 - r/H;      // Field amplitude at this parcel
  const ∇²  = ψ * ψ;          // |∇ψₘ|² proxy (quadratic falloff)
  const κ  = 1.791;          // Geometric coupling constant
  const ω² = 100.0;          // Reference frequency squared
  
  const Z  = 1.0 + (8*κ/ω²) * ψ*ψ;  // Z-Factor (stiffness)
  const G  = (8*κ/ω²) * ψ * ∇²;   // Giboney Gradient magnitude
  
  // Displacement: push away, dampened by Z-factor stiffness
  const force = G * 80 / Z;
  const tx = -(dx / r) * force;
  const ty = -(dy / r) * force;
  
  el.style.transform = `translate(${tx}px, ${ty}px) scale(${1 + G * 0.5})`;
  el.style.boxShadow = `0 0 ${G * 400}px rgba(0,229,255,${ψ * 0.8})`;
}
FORMULA → DESIGN MAPPING

Complete Translation

MFE → CSS Variables

φ = 1.6180339887 The Golden Ratio. The root of every spacing step, type size, and timing duration. --phi: 1.6180339887
β₁ = 1 → layout Global structure. 12-column grid, page-level rhythm, the invisible gravity pulling the eye across the viewport.
β₂ = φ³ → surfaces Borders 1–2px. Box-shadows. Hover opacity deltas. All exchange interactions at element boundaries. transition: 0.236s ease
β₃ = φ⁶ → containers Cards, panels, primary content blocks. Padding uses sp-5/sp-6 (φ⁴/φ⁵ steps). Cubic easing for enters/exits.
β₄ = φ⁹ → transitions Scroll-triggered reveals. Page transitions. Route changes. Duration ≈ 0.382–0.618s (φ-fractions of 1s).
β₅ = φ¹² → life Cursor sphere. Breathing animations. Magnetic hover. φ-timing: 2.618s (φ+φ). 137.5° golden angle rotation.
Z = 1 + 8κψₘ²/ω² Stiffness. Heavier, denser elements (more visual weight) resist displacement more. Large hero text has high Z. Body text has Z≈1.
G = 8κψₘ/ω² · |∇ψₘ|² The Giboney Gradient. Cursor proximity effect. Non-linear: doubling closeness quadruples the force. The anti-linear hover.
S(ρ) — always active The self-drive. Animations that run even without user input. Breathing backgrounds. Autonomous particle fields. The page is alive without you.