Super Top Secret

Super Top Secret is a top-notch branding agency, known for its innovative approach and creative solutions.

Client

Since 2011, it has been creating impressive and memorable images for brands across various platforms and channels. Currently, STS is part of Hawke Media which enhances its capabilities by providing a wider range of marketing services. This project included a complete site redesign by Digital Octane, based on the mock-ups and branding developed by STS.

Goal

Our goal was to bring STS’s designs to life with pixel-perfect accuracy, smooth performance, and an easy content system.

We worked closely with the STS design team, carefully implementing all visual details, interactions, and feedback. The project focused on two key areas:

a highly animated, performance-optimized front end
a clear and intuitive admin panel for content management

The website was built as a custom WordPress theme with Advanced Custom Fields (ACF), so the client can handle content themselves without any tech skills.

INTERACTIONS & ANIMATIONS

The website follows the original mockups closely and features rich motion design throughout.

One of the key interactive elements is a dynamic cursor that changes its shape and behavior depending on the content and user actions, reinforcing the brand’s expressive style and improving user engagement.

VISUAL EFFECTS

We implemented a variety of hover and transition effects to create a fluid and dynamic experience:

images sliding away on hover
captions appearing with smooth marquee motion
slight image animations to add depth

All animations were designed to feel natural while keeping performance stable.

CAPABILITIES SECTION:

The CAPABILITIES section is designed with a scrolling effect accompanied by an indicator and underline animation. Additionally, the right side of the screen showcases a horizontal scrolling feature, facilitating quick access to supplementary information.

For administrators, we established a flexible mechanism allowing them to enable or disable these animations simply by changing the image state.

Additionally, the client provided a full style guide detailing the animations, cursor states under different circumstances, and other design elements, making the implementation workflow considerably more efficient.

PROCESS:

To keep the client updated on the work progress and to ensure everything was on the right track, the project was divided into several phases:

Discussing the requirements;
Technical documentation;
Front-end development (layout);
Front-end development (animations);
Back-end development (QA and amends);
Final QA and publishing.

Overall, collaborating with professional designers and agencies to bring their visions to fruition is always a great experience for us. Since 2017, Digital Octane has partnered with various design and marketing agencies, accumulating extensive experience to achieve the best possible results.

GET IN TOUCH