The challenge
Rebuild at ecosystem scale.
This was not a visual refresh applied to a handful of templates. The project covered Cyfrin and its sub-brands, with a large number of individual pages and CMS collections that needed to work together as one maintainable system.
The development had to faithfully translate a completely new design language while creating reusable components for navigation, content, calls to action, carousels, and motion. Editors still needed practical control over a site whose front-end experience had become considerably more sophisticated.
The approach
Build the system, not just the pages.
Webflow provided the visual development and content foundation. Custom attributes and JavaScript turned repeated interface patterns into modular components that could be configured from page to page without rewriting their behaviour.
- Interconnected CMS collections kept related content consistent across the ecosystem.
- Reusable carousel logic supported multiple control and navigation combinations.
- Custom infinite scrolling added continuous logo movement without a visible reset.
- Mega menus combined static links, CMS content, and embedded carousel components.
- Jetboost and Finsweet Attributes v2 supported features explored during development that were later removed from the final scope.
Under the hood
Reusable custom code across a large build.
The most important technical work was modular. Components could adapt to different content and control requirements while keeping their underlying behaviour consistent.
A modular CMS carousel
The carousel combined custom attributes, JavaScript, and Webflow CMS content. It supported mouse-wheel scrolling, touch gestures, arrow controls, and dot navigation without tying every instance to the same interface.
Each carousel could be configured with or without arrows and with or without dots, allowing one underlying component to serve different layouts throughout the site.
- CMS-powered slides
- Scroll, touch, arrow, and dot controls
- Optional controls configured per instance
Continuous logo movement
A custom infinite scroller moved logo collections continuously from right to left. The code handled repetition and positioning so the sequence could loop without a visible jump or end point.
The component could be placed inside larger compositions—including the homepage hero—while retaining the same dependable behaviour.
- Continuous right-to-left motion
- Seamless looping sequence
- Reusable across page contexts
Navigation as a content system
The new mega menus went beyond static dropdowns. Different panels combined editor-managed CMS entries, deliberately placed static destinations, and, in some cases, the same modular carousel system used elsewhere on the site.
This let complex navigation remain expressive without turning every content update into a development task.
- Static and CMS-managed destinations
- Carousel integration where useful
- One navigation system across a broad ecosystem
01 — New design system
A new visual language across the site.
Cyfrin’s design department established a cleaner, more expansive system of typography, illustration, colour, and component styling. The rebuild carried that language from major hero moments through reusable CMS sections, calls to action, and the footer.
Reusable layouts drew from connected CMS collections, allowing editors to manage content centrally while it appeared in the appropriate sections throughout the site.
02 — Custom motion
Components that move with purpose.
The modular carousel and infinite logo scroller extended Webflow with reusable behaviours. Their code was designed to accommodate different page compositions and input methods rather than a single fixed demo.
The continuous logo component was integrated directly into larger page compositions, including this hero, while remaining independently reusable.
Custom JavaScript repeats and positions CMS-supplied logos to create uninterrupted right-to-left movement without a visible reset.
Controlled by scroll, touch, arrow buttons, or dot navigation. Custom attributes allow each instance to include or omit arrows and dots while sharing the same JavaScript and CMS-powered structure.
03 — Navigation
Mega menus built like product surfaces.
The new navigation brought a large set of services, resources, industries, and products into structured panels. Static destinations and CMS-managed content could coexist, with the custom carousel integrated where a browsable sequence made sense.
A structured combination of static service links and an integrated carousel of supported chains.
Static company and resource destinations sit alongside CMS-powered latest-blog content that updates with the publishing workflow.
Entirely custom-coded, the menu appears when a visitor right-clicks the Cyfrin logo and provides shortcuts for copying brand assets, opening the brand guidelines, or returning home.
The outcome
A new foundation for the full Cyfrin ecosystem.
The completed rebuild translated a new design system into a substantial Webflow implementation spanning many pages, interconnected collections, and reusable custom components—giving a complex brand ecosystem one coherent, maintainable foundation.