Introduction
Robot is a South African production agency 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.
Purpose & Audience
The Robot site is more than just a portfolio. It’s a strategic business tool designed to:
- Demonstrate Robot’s expertise, creativity, and executional quality by showcasing their creative work in a bold, visually-led format.
- Function as a business development tool to attract agencies, production companies, and collaborators.
- Grow industry visibility and cement their standing as one of South Africa’s most distinctive production houses.
The primary audience includes agencies, production companies, and potential collaborators — anyone seeking a production partner with both technical mastery and a warm, approachable presence.
Creative Strategy
Our strategic approach is centred on three intersecting goals:
- Showcase services and expertise with clarity and impact.
- Position Robot as a leading production company in Southern Africa through a distinct, ownable visual language.
- Create a digital portfolio site that invites exploration and connection.
The creative direction drew from Robot’s brand personality - celebrating innovation, bold thinking, and an open, approachable spirit that makes collaboration easy and enjoyable.
Design Approach
We anchored the design in two complementary visual worlds:
- Modern Brutalism – clean, minimal layouts with bold, chunky typography and unapologetic use of space.
- Digital Nostalgia – retro-futuristic cues, low-fi distortions, layered typography, and bold RGB colour accents.
This combination mirrors Robot’s ethos: a machine-like mastery of craft infused with genuine human warmth.
Core Features & Style
- Editorial case study layouts with a strong typographic rhythm.
- Pixel distortion hover effects — a signature navigational feature that nods to their name and digital heritage.
- Full-colour razor transitions based on the logo’s geometry.
- Interactive galleries with low-fi interactive movements.
- BTS photography to highlight the people and culture behind the work.
Collaboration & Process
The project was a close collaboration between Malvah Studio, Robot’s leadership team (Craig Moore, Callen Paul, and Liam Johnson), and developer Geoff Dawes.
The process followed an iterative cycle:
- Discovery & Strategy — refining Robot’s strategic lens and future-proofing their identity.
- Design Development — evolving the visual language to balance boldness with usability.
- Prototyping & Development — ensuring the immersive experiences are performed across devices.
A standout element of the process was the trust and transparency between client and our creative team. Robot embraced our recommendations and allowed us to push boundaries while keeping the experience approachable and user-friendly.
Proudest Details
We’re especially proud of:
- The bold colour palette and visual identity — designed to complement rather than compete with the work.
- Animations and transitions that enhance storytelling without overwhelming the content.
- Seamless design-development integration from start to finish, ensuring creative ambition and technical feasibility stayed in sync.
Key Development Features:
- 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.
Results & Recognition
The site has been met with enthusiasm from clients, peers, and the industry:
- Site of the Day and Honourable Mention awards.
- Nomination for Site of the Month.
- Positive press and industry coverage.
- Strong client feedback praising the site’s ability to authentically capture Robot’s personality and craft.
Conclusion
The new Robot site isn’t just a rebrand extension — it’s a living, breathing brand experience. It functions as a portfolio, a sales tool, and a creative manifesto all in one. Every pixel reinforces Robot’s position as Visionary Mavericks — unapologetic, inventive, and refreshingly human.
About Malvah
Malvah is a Cape Town-based, design-focused studio building brand experiences through craft and culture. We aim to transform ideas into visual stories that bring brands to life through print and digital.