Floating Focus
Explore the portfolio one idea at a time. Floating Focus arranges its sections as cards in a spatial scene, then brings the section you choose into the foreground. It is a good starting point when you want an atmospheric presentation with a clear reading path.
Behind the experience
- Hover or select a card to bring it into focus. Browse its details, use the arrow keys to move between focused cards, and press Escape to return to the wider view. The transition between overview and detail is the central interaction.
- React keeps the selected section and its content in sync, while Motion animates the interface transitions. A separate Three.js background adds spatial depth around the readable cards, allowing text and controls to remain ordinary HTML.
- The scene is paired with interaction audio managed through Web Audio. Together, the visual movement and sound give section changes a sense of arrival without turning the portfolio content into part of a canvas.
Technology
- Next.js
- React
- TypeScript
- Three.js / WebGL
- Motion
- Web Audio


