CryptoStem
CryptoStem is a fully 3D, real-time cryptocurrency visualization and analysis platform developed by Liveezy Studios.
It transforms global market data into an interactive, orbiting “crypto constellation,” where each coin is represented as a dynamic sphere with color, motion, and luminosity tied directly to live price movements and market capitalization.
Built on Three.js, CryptoStem delivers a visually striking experience that blends art and analytics — letting users explore thousands of coins in 3D space, search by name or symbol, and smoothly focus on individual assets with cinematic camera transitions.
All data updates live via public APIs, ensuring that every movement and glow in the scene reflects real-time market behavior.
Designed for traders, developers, and enthusiasts alike, CryptoStem offers a new way to perceive the rhythm of the cryptocurrency ecosystem through motion, scale, and light.
Core Features
3D Visualization
-
Real-time rendering of over 1,000 coins using Three.js r126.1.
-
Each coin’s size represents market capitalization.
-
Color and halo glow indicate 24-hour price change — from red (loss) to green (gain).
-
Smooth orbiting animations give a living “constellation” feel.
Live Market Data
-
Connects to CoinGecko’s public market API for up-to-date prices, market caps, and percentage changes.
-
Automatically refreshes all coin data every 5 seconds.
-
Supports thousands of assets across multiple pages of data.
Interactive Exploration
-
Search bar and dropdown selector for instant navigation to any coin.
-
Camera focus system smoothly transitions to selected coins with zoom and pan easing.
-
Reset View button returns the scene to the top market-cap coin.
-
Mouse-hover tooltips show coin name, symbol, current price, and 24-hour change.
Dynamic Visual Feedback
-
Adaptive glow intensity based on volatility.
-
Live interpolation for smooth color transitions between updates.
-
Layered additive halos for high-energy coin highlights.
-
Auto-updating orbit speeds reflecting market volatility.
User Controls
-
OrbitControls for pan, zoom, and rotate.
-
Fully mouse-interactive camera and real-time object selection.
-
Responsive scaling for any screen size.
Performance & Efficiency
-
Optimized geometry generation for thousands of meshes.
-
Uses TWEEN.js for camera motion easing and view restoration.
-
Compact data fetches with adaptive frame updates.
-
Efficient material and texture reuse for reduced GPU load.
Design & Presentation
-
Minimal, immersive UI overlay.
-
Real-time tooltips, compact search bar, and clean dropdown styling.
-
Neon-glow visual theme with high contrast for dark environments.
-
Lightweight, portable, and offline-ready once loaded.
Technologies Used
-
Three.js r126.1 — 3D rendering engine.
-
TWEEN.js — smooth camera transitions and tweening effects.
-
CoinGecko API — real-time cryptocurrency data and metadata.
-
OrbitControls.js — mouse interaction and navigation controls.
-
HTML5, CSS3, JavaScript (Vanilla) — complete client-side implementation.

