Prag Design Tooling

Viscoelastic UI Physics Lab & Universal Primitive Showcase
PHYSICAL UI LAB Return to Homepage
Design System Profile Presets Sovereign Executive · Active Standard
Sovereign Executive · Canonical CTA Juxtaposition
Primary: Flat Anchor • Secondary: 3D Gummy Lens • Global Light: Active

Material Restraint Mandate: Never make all buttons in a group 3D gummy. Primary actions remain flat, crisp obsidian bedrock (data-fluid-density="dense") to ensure uncompromised typographical contrast and navigational anchor. Secondary actions use 3D soft-body gummy transmission (data-gummy-3d) as a tactile optical lens, unified by a global pointer radiance field.

k = 220 ζ = 18 m = 1.0 ν = 0.35 IOR = 1.38 Transmission = 0.92 Light = 180px
Live Viscoelastic Tuning Cockpit Real-Time Harmonic Solver
Stiffness (k) 220
Damping (ζ) 18
Mass (m) 1.0
Volume Ratio (ν) 0.35
Web Audio Haptics ON
3D Atmospheric Background & Optical Refraction 82 Master Realms
3D Environment Scene
Glass Blur Refraction 20px
Surface Glass Opacity 0.72
3D Camera Drift ACTIVE
Pointer Water Ripples & Stiff Magnetic Jelly Controls Continuous Hydrodynamic Solver
Jelly Stiffness (k) 0.12
Jelly Pull Limit 9px
Water Wake Intensity 1.0×
Pointer Water Droplet OFF

01 · Viscoelastic Hydro-Gel Cards

Spring-damped 3D tilt tracking cursor velocity, elastic snapback jiggle on mouse exit, and compressive volume conservation on press.

NODE TELEMETRY

Autonomous Swarm Core

Damped harmonic oscillations simulate optical silica with physical mass. Press down to test volume conservation depth.

<div class="card" data-phys-card>
HIGH SENSITIVITY

Cryptographic Vault

Dynamic Fresnel specular catchlights shift across the top bevel as you tilt, accentuating the physical boundary.

<div data-phys-card data-tilt-max="9">
TRANSACTION BUS

ACID Ledger Engine

Zero-latency GPU matrix transform with automatic sleep state when kinetic energy drops below threshold.

<div class="card" data-phys-card>

02 · Liquid Mercury Segmented Tabs

Metaball droplet stretching during tab transit, magnetic cursor guide, and settling fluid ripple on arrival.

<nav data-mercury-tabs> <button class="mercury-tab is-active">Overview</button> <button class="mercury-tab">Architecture</button> </nav>

03 · Bistable Leaf-Spring Switches

Non-linear drag resistance with violent center snap-over, boundary impact micro-shudder, and procedural Web Audio haptic click.

Sovereign Telemetry Relay Continuous stream reporting on Port 3204
Metal Compute Acceleration Direct Apple Silicon GPU pipeline routing
<button role="switch" aria-checked="true" data-phys-switch></button>

04 · Capacitive Membrane Inputs

Pressurized fluid membrane border with localized click wave ripple and typing specular micro-flashes.

<div class="input-wrap" data-phys-input><input type="text"></div>

05 · Pneumatic Chamber Modal

Enters with high initial velocity, encounters air compression resistance in the final 15% of travel, and settles with a soft-stop suction lock.

06 · Kinetic Odometer Counters

Replaces instantaneous number shifts with physical rolling mechanical cylinder reels with motion-blur transitions.

842 Active Telemetry Packets
<span data-kinetic-counter data-value="842">842</span>

07 · 3D Soft-Body Gummy Buttons

Scott Sun Three.js physical transmission engine with volumetric IOR 1.38 refraction, viscoelastic spring-mass lattice dynamics, and explosive release jiggle.

Click and hold to compress the gelatinous capsule mesh. Release to trigger damped harmonic reverberations across the vertex lattice.

Design System Standard · Material Restraint & Visual Hierarchy

Never make all buttons in a group 3D gummy. Primary actions remain crisp, solid, and flat to provide an authoritative navigational anchor with uncompromised typographical contrast. 3D gummy capsules (data-gummy-3d) are reserved for exploratory or secondary actions, functioning as a tactile optical lens. This deliberate juxtaposition creates a luxury dialogue between solid engineering bedrock and optical fluidity.

<!-- Flat Primary Anchor --> <a class="btn btn-primary" data-fluid-density="dense" href="#doctrine">Explore Platforms</a> <!-- 3D Gummy Optical Lens --> <a class="btn btn-ghost" data-gummy-3d href="/store/">View App Store</a>

08 · Magnetically Attracted Stiff Jelly Buttons

Taut cohesive surface tension with magnetic pointer pull, transform-origin anchoring, organic corner-radius morphing, and content parallax.

Move the cursor within proximity (~135px) to feel the cohesive magnetic pull stretch the button membrane toward the pointer.

<button class="btn btn-primary has-magnetic-jelly" data-fluid-density="dense">High-Tension Gel</button>

09 · Pointer Water Droplet & Hydrodynamic Liquid Substrate

Active pointer meniscus bead, continuous 16px hydrodynamic wakes, and caustic screen-space refraction across the 3D scene.

Glide pointer across screen to generate continuous refractive wakes.
<!-- Drop-in water ripple canvas overlay --> <canvas id="water-ripple-canvas" class="water-ripple-canvas" aria-hidden="true"></canvas> <script type="module"> import { initWaterRipple } from "/js/water-ripple.js"; initWaterRipple({ showPointerBead: false, spacing: 16 }); </script>

10 · Universal Drop-In Integration

Drop these lightweight, modular files into any web project to enable the entire physical interaction system.

<!-- 1. Physical UI Primitives --> <link rel="stylesheet" href="/css/prag-physics-ui.css"> <script src="/js/prag-physics-ui.js" defer></script> <!-- 2. Water Pointer & Stiff Magnetic Jelly --> <link rel="stylesheet" href="/css/fluid-interface.css"> <script type="module"> import { initWaterRipple } from "/js/water-ripple.js"; import { initMagneticJelly } from "/js/magnetic-jelly.js"; import { initGummyButtons3D } from "/js/gummy-button-3d.js"; initWaterRipple({ showPointerBead: false, spacing: 16 }); initMagneticJelly(".has-magnetic-jelly"); initGummyButtons3D("[data-gummy-3d]"); </script>