NCTA 10G Experience

NCTA ,the Internet & Television Association is the U.S. cable/broadband industry’s main trade group. It represents major cable ISPs, TV networks, and vendors; advocates on policy; and promotes industry technology roadmaps (like 10G) and initiatives (events, standards, security). Leadership, scope, and positioning as a trade association are documented on NCTA’s site and reference sources. The site explains “10G” as the cable industry’s next-gen platform targeting up to 10-gigabit speeds with lower latency, higher reliability, and stronger security, built on HFC (hybrid fiber-coax) upgraded with DOCSIS 4.0 and related tech.

Our solution

This microsite was built with React/TypeScript, features both headless features and standalone embedded animation heavy applications.

One of the challenges when creating visually rich animation of the web is properly translating a creative animators vision to a web optimized format, while maintaining good integration and compatibility with web native UI/UX. Animations and rich multimedia tend to be afterthoughts from the development team, using standard/vanilla defaults from readily available libraries, or animations are inserted awkwardly as ‘iframe’ like blocks in the otherwise active web page. Either way, these approaches tend to be clunky and time consuming.

To tackle this issue in 10G, we worked closely with animators and their native tools, such as Adobe After Effects and Blender. Both platforms now support a relatively new and powerful export pipeline to create Lottie formatted files. Lotties contain all the rich visualization from the native animation tool, but vectorized in a format that is readily controllable by native web tools. Combined with the powerful low level GSAP motion library, we were able to faithfully and and rapidly create animations, send them through the client approval and feedback cycle and them transpose these at high fidelity to the browser.  And all this while maintaining excellent performance in-browser!

To keep our javascript SPA SEO friendly, we implemented server-side rendering via custom PhantomJS solution to improve load performance.

Meanwhile, A WordPress CMS backend was implemented to manage client editable portions of the site, exposing content via REST APIs for straightforward content authoring and administration.

Creative mini-apps

The site is structured as a set of modular mini-applications, each highlighting different aspects of the platform. We already mentioned our general  approach to custom animation integration, but a particularly interesting example was when when we were called to implement a fully interactive 3D virtual house tour to demonstrate practical applications of the client’s technology within a household context.
We worked alongside a specialist in  3D modelling, which designed schematics in Blender. Next, the designers applied the client branding and visual look and feel, skinning the 3D model. Finally the model was exported and then re-imported as a vector set for seemless embedding in the web context.