AthletiSpin
Name
AthletiSpin
Year
2025
Course
Speculative Futures Course – University of Europe
AthletiSpin is an experimental data visualisation project developed while exploring Three.js and React Three Fiber. Inspired by the traditional spinning top—a toy used across Iran and many Asian cultures—the project visualises the physical condition of athletes during exercise through a three-dimensional digital object. The speed of the spinning top is directly connected to the athlete's heart rate. As the heart rate increases, the top rotates faster and becomes more stable. When the athlete slows down or rests, the spinning speed decreases, visually showing the loss of momentum. Body temperature data controls the color spectrum, shifting from cool blue at rest to deep red during warm-up, and bright yellow at peak intensity.
Visualisation
The Inspiration
A spinning top is a small traditional toy, commonly used in Iran and many Asian countries. It is usually made of wood and consists of a rounded body and a sharp central axis. When the top is spun quickly, it balances and stands upright on its tip. As its rotational speed decreases, it begins to wobble, lose stability, and eventually falls. Children often compete with each other to see whose spinning top can remain balanced and spinning for the longest time. The spinning top is the main inspiration behind this concept.
Translating Physiology into Motion
Just as a traditional spinning top loses stability when it slows down, AthletiSpin uses the same metaphor to represent an athlete's physical state. The spinning top becomes a symbolic representation of balance, energy, endurance, and physical readiness during exercise.
Beyond Numbers and Charts
The purpose of this visualisation is to help athletes better understand the invisible process of warming up, peak performance, fatigue, and cooling down. Instead of reading numbers and charts, users experience their physical condition through a living visual object that responds in real-time to their biometric data.
Technologies
- •Next.js 14 – React Server Components
- •React Three Fiber – WebGL 3D Rendering
- •Three.js – 3D Graphics Library
- •TypeScript – Type Safety
- •Tailwind CSS – Styling
- •Vercel – Deployment
Data Visualization Approach
Heart Rate Sync: Real-time connection to athlete's heart rate data controls the spinning top's rotational speed, creating an intuitive representation of physical exertion.
Temperature Mapping: Body temperature data drives a dynamic color gradient, transitioning from cool blues through warm reds to hot yellows, representing the athlete's thermal state.
Physical Wobble: As performance metrics decrease, the spinning top exhibits realistic wobble physics, mirroring the instability of a real spinning top losing momentum.
Data Mirroring: Rather than abstract charts, users experience their physiological data as a living, moving object—making invisible metrics tangible and meaningful.
About the Professor & Academic Influence
I had the opportunity to study with Prof. Dr. Peter Crnokrak across several inspiring courses, including Speculative Futures and Envisioning. One of the most influential sessions for this project was Computation and Procedural Design – Plasticities of Abstraction, which became the direct inspiration behind AthletiSpin. The project was developed as an exercise exploring procedural visualisation, motion, and real-time biometric interaction.
Throughout the course, he introduced thought-provoking concepts around abstraction, procedural systems, and the visualization of invisible processes. Across many of his courses, he consistently emphasized the idea of data mirroring—the practice of translating invisible or abstract data into tangible visual and physical representations. This philosophy became one of the core inspirations behind AthletiSpin.
His teaching combined artistic thinking with technological experimentation, encouraging students to move beyond conventional interfaces and explore how technology can communicate emotion, physical state, and meaning through metaphor, movement, and interaction.
AthletiSpin became my first attempt to materialize these ideas into an interactive experience—transforming biometric exercise data into a living procedural object. The project reflects both my technical curiosity in creative coding and the academic influence of his courses on my approach to design and visualization.
AthletiSpin – Speculative Futures Course | University of Europe | 2025