Website Motion Design for Hertzflow
Designing motion and interaction to express the Hertzflow brand and simplify complex Web3 concepts.
Designing motion and interaction to express the Hertzflow brand and simplify complex Web3 concepts.
Hero Loop Animation: Visualizing Liquidity Flow
The Hero section is the user’s first entry point into the Hertzflow ecosystem, and its visual impact strongly influences the bounce rate. In recent design trends, immersive first impressions are often created through guided animation or looping motion to establish brand tone. For a platform focused on cross-protocol liquidity routing, the hero loop is not merely decorative—it acts as a visual metaphor for capital efficiency and asset flow.
Section Motion: Explaining the Product Through Interaction
The second section introduces Hertzflow’s core capabilities through a series of modular panels. Motion is used to progressively reveal product value—such as cross-asset trading, real-world price anchoring, high-leverage strategies, and a tailored trading interface. Subtle animations guide attention across the grid, allowing users to quickly scan each capability while maintaining visual rhythm. Instead of overwhelming users with complex DeFi mechanics, the motion system breaks information into digestible moments, helping users understand the platform’s core advantages through interaction rather than static explanation.
Logo Animation: A Moment of Brand Feedback
The logo animation functions not just as an opening element but as a subtle brand touchpoint at the end of the experience. Placed at the bottom of the landing page or within the navigation, it acts as a small visual reward after users complete their browsing journey. Through a geometric expansion and a subtle wave-based oscillation inspired by Hertz frequency, the motion reflects the brand’s themes of precision and efficiency, reinforcing Hertzflow’s identity as a “leverage engine.”
3D Design
A unified visual language was developed for the web app’s 3D motion and illustration system, creating a consistent experience across multiple product subpages. These assets were designed not only to enrich visual expression, but also to support feature communication, reinforce product identity, and make complex trading workflows feel more intuitive and approachable. By translating abstract financial concepts into controlled spatial forms and motion, the system helps the product feel more cohesive, legible, and engaging.
Illustration
A unified visual language was developed for the web app’s 3D motion and illustration system, creating a consistent experience across multiple product subpages. These assets were designed not only to enrich visual expression, but also to support feature communication, reinforce product identity, and make complex trading workflows feel more intuitive and approachable. By translating abstract financial concepts into controlled spatial forms and motion, the system helps the product feel more cohesive, legible, and engaging.
Brand Assets
To extend Hertzflow’s identity beyond the digital product, I developed a set of branded assets across event, print, and merchandise touchpoints. Using the same visual language of precision, contrast, and liquidity-inspired form, these materials helped translate the brand into more tangible and memorable experiences. The system strengthened consistency across online and offline contexts while giving Hertzflow a more distinctive and ownable visual presence.
