Project
Web & Motion Design
A vintage-style animated motion graphic video combined with a custom-built interactive website. The animation uses grain, glow and minimal graphics to emphasize rhythm, scale and a focused visual narrative; the site, built with Next.js and GSAP, carries that narrative through a structured system of transition and still clips for a smooth, continuous flow.
Concept and style development
This project began with clear planning around scope, timeline, and technical feasibility, focusing on the production of both a motion graphic video and an interactive website. Research included astrophysics fundamentals and the structure of black holes, as well as motion design techniques suitable for the 12-week timeframe. A black-and-white, grainy visual style was selected to support a minimal and focused presentation. Audio design involved combining low-frequency sound effects sourced from FILM CRUX to build a continuous soundtrack that supports the sense of scale and movement.
Creating the black hole
The black hole disc was created using CC Ball Action and Radial Blur, later composited with 3D layers, with the Saber plugin providing glowing edges. CC Star Burst was distorted behind the black hole using CC Flo Motion to simulate gravitational lensing — adding a touch of realism and reinforcing the sheer scale of the phenomenon.
Composition & sound design
Sound design played a central role in establishing rhythm and structure throughout the motion graphic. Effects were timed precisely to align with visual changes, helping emphasize key moments while maintaining cohesion. Transition points were planned to minimize disruption, while effects such as Posterize Time, Glow, and Film Grain were applied uniformly across scenes to reinforce the intended aesthetic.
Interactive website development
The interactive site was developed using Next.js and GSAP to extend the visual tone and rhythm of the original video — carrying forward the controlled pacing and scale not just through design, but through how each section moves and responds to input. Assets from the video were adapted as still frames, and new compositions were created to support the looping structure, maintaining visual consistency across all 12 pages. The favicon was created by Aleksa Radaković to match the website’s visual identity.
Frame transition system
To preserve a cinematic flow, a custom system separates page transitions into two layers: transition clips followed by looping still animations. This prevents visual interruptions and ensures animations never cut mid-motion when the user navigates. Only after the transition completes does the looping segment begin, followed by a delayed GSAP text reveal and the appearance of a navigation button — letting transitions breathe.
Interaction timing
GSAP synchronizes interface elements — text, buttons, subtle hover states — with the timing of each video segment. Motion was designed to be minimal and precise, only revealing elements when the background was fully in place. This careful orchestration preserves the immersive tone while making each section feel intentional and controlled.
Next project
Flare