The brief
We wanted visitors to experience the kind of interfaces we build while reading about our work. The challenge was to bring movement and depth into a service website without making the message depend on a loaded 3D scene.
What we built
- A dimensional brand mark with pointer response, an exploded view and pause and replay controls. The same scene also provides an entry point into the Fragments game.
- A code showcase that pairs animated source examples with visual previews, so visitors can connect an implementation with the interface it produces.
- Scroll reveals, card tilt, magnetic buttons and text transitions that carry the visual language across the page.
Making room for motion
The hero starts with a server-rendered SVG. Its Three.js renderer loads after the page is ready and the scene is near the viewport. The logo renderer stops its animation loop when hidden, responds to reduced-motion preferences and keeps a fallback available if WebGL cannot start.
The code showcase uses a static preview on compact screens or when reduced motion is requested, and checks viewport and tab visibility before running its animation. These decisions keep the content readable in more than the ideal desktop setup.
Stack
Next.js, React, Three.js, SVG and CSS, with IntersectionObserver, requestAnimationFrame and English/Romanian content.
Where it stands
An in-house brand experience, built and maintained as part of this site. Open the homepage to try the logo controls, then scroll to the code showcase to explore the animated examples.