Interfaces in 3D
Make spatial interaction useful even when WebGL is unavailable.
03Frontend Lab
A playground for
curious minds.
Working experiments and playable React projects from my portfolio branches. Change a parameter, follow a state transition, or simply play.
CURIOSITY → EXPERIMENT → PLAYInside
Inside
the workshop.
Change a system. Follow a state. Make the next move.
Spring dynamics
LIVE / INTERACTIVEF = −kx − cvPHYSICS / NO ANIMATION LIBRARY
Drag or tap to set a destination.
Under the surface ↗
- Problem
- Make a response feel attached to user input, not played from a recording.
- Technique
- A damped spring integrates velocity toward a pointer or keyboard-controlled target.
- Technology
- React, requestAnimationFrame, CSS transforms.
- Accessibility
- Native range controls provide the same destinations without dragging. Reduced motion jumps directly to the target.
- Performance
- The animation stops when settled and cancels on unmount. Frame delta is bounded after a pause.
02Playable projects
Eleven real games.
From my GitHub.
Choose a project when you want to play. Nothing heavy is mounted until you select a game.
11
Pick a game above when you’re ready to play.
Small studies.
Useful questions.
Spring dynamics
Make a response feel attached to user input, not played from a recording.
Depth & hierarchy
Use depth to clarify foreground actions and background context.
One token, many parts
Keep a family of components consistent as product requirements change.
The cost of a change
Explain why a small interaction can update too much of an interface.
Human × AI engineering
Accelerate engineering without surrendering architecture and quality decisions.
For the keyboard people ~/shubham ↗
Atlas terminal. Type help to begin.
Good work starts with a conversation