Robot — Case Study

Robot is a South African production house with a talent for breaking rules and making it look effortless.

Known for their blend of artistry, boldness, and a distinctly human touch, they’ve built a reputation as a dynamic force in the industry — delivering content that is visually stunning, technically sharp, and deeply engaging.

When it came time to extend their refreshed brand into a new digital home, the mission was clear: create a website that captures their energy, amplifies their work, and positions them alongside South Africa’s top production companies. The result is a cinematic, immersive portfolio site that fuses maximalism, brutalism, and digital nostalgia into a seamless online experience.

“More than a portfolio — a platform to grow visibility, generate leads, and extend the refreshed brand into a digital home.”

Robot’s new website needed to go beyond the traditional portfolio. It had to:

• Hero their directors and body of work in a way that feels curated and immersive.
• Function as a business development tool to attract agencies, production companies, and collaborators.
• Extend the refreshed brand into a digital experience that is future-proof and ownable.

Above all, it needed to balance creative bravado with accessibility, ensuring every visitor feels drawn into their world.

We defined the visual and strategic direction through two intersecting styles:

• Modern Brutalism: Unapologetic layouts, bold typography, and space used with intention.
• Digital Nostalgia: Pixelated interactions, RGB-inspired colour cues, and lo-fi visual moments that nod to their namesake.

This pairing reflects Robot’s ethos: precise and structured like a machine, yet accessible and human in personality.

From interactive pixel typography to razor-sharp transitions, every detail was designed to reflect Robot’s creative confidence.

The site was built to be immersive without compromising usability. Every interaction was carefully considered, both to surprise the user and to reinforce Robot’s strategic lens.

• ThreeJS: Implemented pixelated hover effects on homepage elements for tactile interactivity.
• SVG Clip Paths: Section dividers animated at angles with randomised movement, revealed using SVG masks for cross-browser consistency.
• Pixellated Project Reveals: Achieved with Konva.js in combination with Vanilla JS and GSAP for lightweight, seamless execution.
• Page Transitions: Powered by the View Transition API, ensuring smooth, cinematic flows between sections.

• Scramble Text: GSAP’s Scramble Text plugin used on hover for dynamic typographic interactions.
• Image Trail: OSMO’s resource-enabled image trails on hover, giving sneak previews of BTS content.
• Lottie Animations: Bodymovin plugin integrated for scroll- and time-based playback control.
• Smooth Scroll: Lenis introduced a fluid, polished scroll experience.
• Custom Video Players: Built with PLYR.js, allowing full control and branding consistency.
• GSAP Observer: Velocity-based scroll effects created moments of surprise and delight.
• CMS: Webflow provided an easy-to-manage CMS, with components designed to be robust and client-proof.
• Made with GSAP: Infinite-loop “Behind the Scenes” scroll element on the Contact page.
• 404 Page: A playful canvas experiment featuring bouncing icons with collision detection.

Each technique was selected not only for performance and stability, but to contribute meaningfully to the overall narrative.