Each animation is a 5 second experience. Click a thumbnail to preview it.
The elegance of two curtains opening onto your brand. The go to intro for luxury and haute couture.
The details that separate an ordinary site from a premium one. Hover, click, play.
This page uses no animation library. The 56 sequences you just ran are written by hand, in CSS and React, and live in the page's own stylesheet. Here are the three rules that govern them.
No GSAP, no Lottie, no third-party animation engine. This page's component imports nothing but React and its own stylesheet. Nothing to keep up to date, nothing that breaks on a library's next major version, and not one kilobyte of JavaScript added to the bundle just to move an element.
An animation that touches width, height or pixel position forces the browser to recompute layout on every frame. These only change transform and opacity: the compositor handles them on the GPU, without going back through layout, which leaves the main thread free for the rest of the page.
The site honours prefers-reduced-motion: when a visitor's system says it would rather limit animation, durations drop to zero and the content appears straight away. An animation should never be the condition for reading a page.
The 18 cinematic intros and the 38 micro-animations do not serve the same purpose. An intro plays once, on arrival, and sets a tone: it is allowed to last two seconds. A micro-animation accompanies a gesture, a hover, a click, and must be finished before the user starts wondering what is happening. Mixing the two is the most common mistake: a site where every button behaves like a film title sequence becomes exhausting after three clicks.
Most of the motion is described in CSS @keyframes and the browser handles the interpolation. React only triggers: it mounts the component, changes a class, bumps a key to replay the sequence. As a result, an animation does not stutter because the main thread is busy elsewhere, and the code describing it stays readable without unrolling a state machine.
Each demo has its own replay button, and the micro-animations can be filtered by category. That is not a usability detail: an animation is not judged on the first viewing but on the fifth, when you start to see whether the timing holds or whether a bounce grates. It is also how I validate them before putting them into a client project.
Every animation is hand coded. Zero libraries. 100% performance. Works on all browsers and mobile devices.
📞 Let's discuss your project