Trailstone
Trailstone is a global energy and technology company, operating at the intersection of renewable and conventional power. The organisation trades energy in global markets, and provide a best-in-class service to manage the inherent intermittency of renewable power generation across the short, medium and long term.
Following a period of rapid growth, the company was keen to enhance its outward presentation to prospective customers, investors, and future employees.
Taking Creature London's fresh new brand identity work as a starting point, we designed and built a clean but characterful site that brings the company's story to life in a compelling and informative way.
The Trailstone branding developed by Creature involved the use of dynamic electron lines. Our challenge was to work out how to represent their motion in a web framework.
Gradients and more specifically gradients inside lines are not something the the web likes very much.
We therefore developed a technique and workflow that integrated lottie.js. Lottie.js allowed us to Render After Effects animations natively on Web, giving us the animation control we wanted at the performance and speed that we needed.
We experimented with a few approaches but hit upon combining the benefit of lottie's vector animation that mask bitmap gradients. This meant we could present scalable and crisp visuals in a tiny data load.
Lottie then allowed us to both present dynamic moving lines as background texture as well as animations driven by the users scroll.
