- 0
- External animation dependencies (pure CSS & vanilla JS)
- 60fps
- Rock-solid frame rate across mobile and low-power devices
- 3
- Core physics archetypes: Tension, Deceleration, Bloom
- <15kb
- Ultralight total footprint for instantaneous loading
01
Pseudo-haptics over physical motors.
Physical vibration engines drain battery and feel artificial. By carefully calibrating pointer drag displacement against visual lag and spring recovery, the user's mind projects physical weight directly into the glass surface.
02
Motion as semantic architecture.
Animation in software is usually added last as decoration. Resona treats motion as an upfront semantic grammar: elements signal their importance, elasticity, and irreversibility before a user reads labels.
03
Zero-fat math curves.
Heavy animation packages introduce frame drops and memory overhead. Resona implements lean spring differential equations directly into requestAnimationFrame loops with automatic fallback for reduced motion.
Application scenarios
- Tactile digital products: Sliders, toggles, and payment confirmations that convey tangible confidence.
- Data visualization friction: Giving mass to data points so anomalies and extremes resist user interaction naturally.
- High-end brand presence: Understated, calm physics conveying luxury and craft without noisy visual tricks.
My Contribution
- Researched and mathematically formulated pseudo-haptic displacement curves
- Designed and coded the interactive Tension and Hanabi motion studies
- Built standalone web demonstration at resonamotion.com
- Architected responsive gestures supporting touch, pointer, and stylus
Philosophy & Reach
- Part of ongoing research into tactile digital interactions at Creativity Is Everywhere LLC
- Informed design systems across enterprise client platforms and consumer apps
- Live laboratory freely accessible to designers and creative engineers globally