Cuberto
Cuberto · 2026
Cuberto is one of the most animation-heavy agency portfolios on the web. Every element moves — custom cursor trails, text character reveals, video showcases that play on hover, smooth scroll hijacking, magnetic buttons. The site’s entire identity is built on motion. The question wasn’t whether we could copy the layout, but whether we could capture any meaningful visual impact from a site where static screenshots betray the experience.
Motion as Identity
For most agencies, animation is decoration — a fade-in here, a parallax effect there. For Cuberto, motion is the design. Their homepage is a sequence of video-first project showcases: each case study is represented by a looping video that plays inline, filling the viewport. The custom cursor — a magnetic circle that morphs shape as it passes over interactive elements — is as much a brand signature as any logo. Text reveals character-by-character on scroll. Hover states trigger scale transforms and color inversions. Nothing is static.
The visual foundation is deceptively simple: Suisse Intl in a handful of weights, a near-monochrome palette of black backgrounds and white text, and a layout grid that alternates between full-bleed video and tight typographic sections. The dark aesthetic isn’t a trend choice — it’s functional, designed to make video content pop and establish the cinematic register that positions Cuberto above commodity web agencies. The tagline “Design agency focused on AI-driven products” sits in oversized display type, confident enough to let whitespace (or in this case, blackspace) do the selling.
Capturing the Uncapturable
Cuberto presented a unique technical challenge: the site uses CSS-in-JS exclusively, meaning zero external stylesheets to download. All styles are injected at runtime through JavaScript, which makes our standard CSS extraction pipeline irrelevant. Instead, we captured the fully rendered DOM after hydration, preserving the computed styles as they existed in the browser. The 156 MB download — the largest in our portfolio — is almost entirely video: 22 MP4 and WebM files that represent Cuberto’s project showcase reels.
The static rebuild preserves what matters most: the autoplay videos loop correctly, the dark aesthetic is intact, the Suisse Intl typography renders at the correct weights, and the overall visual hierarchy reads as Cuberto. What we lose is the interaction layer — the custom cursor, the magnetic button effects, the scroll-driven text reveals, the hover-triggered video playback transitions. This is an honest capture: we document what a motion-first site looks like at rest. The 90% that survives static capture proves the strength of Cuberto’s underlying visual design. The 10% that doesn’t proves their engineering investment in interactivity.
We downloaded 156 MB of video assets — 22 project showcase videos that are the backbone of Cuberto’s portfolio — alongside 34 images and the Suisse Intl typeface. The static rebuild preserves the dark aesthetic, video autoplay behavior, and typographic hierarchy. What was lost (custom cursor, text animations, scroll-driven reveals) is documented as a boundary marker: this is where design ends and runtime engineering begins.
