Client
Teachable
Services
Motion Branding
Motion Design
Brand Motion
[EN
[EN]
I developed, together with the EST.31 team, the brand motion for Teachable, a New York–based company and online platform that enables users to create, host, and sell digital courses.
The concept is rooted in the connection between those who teach and those who learn, expressed through circular motion that represents a continuous flow of knowledge exchange and growth.
The visual language relies on rhythm and fluidity to build organic transitions and consistent behavior across elements, shaping a scalable system that maintains cohesion across multiple brand touchpoints.
[PT]
Desenvolvi, em conjunto com a equipe da EST.31, o brand motion para a Teachable, uma empresa com sede em Nova York e plataforma online que permite aos usuários criar, hospedar e vender cursos digitais.
O conceito é fundamentado na conexão entre quem ensina e quem aprende, expresso por meio de movimentos circulares que representam um fluxo contínuo de troca de conhecimento e crescimento.
A linguagem visual se apoia em ritmo e fluidez para construir transições orgânicas e um comportamento consistente entre os elementos, estruturando um sistema escalável que mantém coesão em múltiplos pontos de contato da marca.
Logo Animation
[EN]
The logo animation is based on the principle of connection between those who want to learn and those who want to teach, forming continuous cycles of learning and knowledge sharing.
[PT]
A animação do logo é baseada no princípio de conexão entre aqueles que querem aprender e aqueles que querem ensinar, formando ciclos contínuos de aprendizado e compartilhamento de conhecimento.
Icon Animation
[EN]
Just like the wordmark animation, the icon animation is driven by the principle of two forces coming together to form a continuous, self-sustaining cycle. This movement symbolizes the dynamic connection between teaching and learning, where each action fuels the other, creating an ongoing flow of knowledge exchange.
[PT]
Assim como a animação da logo, a animação do ícone é guiada pelo princípio de duas forças que se unem para formar um ciclo contínuo e autossustentável. Esse movimento simboliza a conexão dinâmica entre ensinar e aprender, onde cada ação alimenta a outra, criando um fluxo contínuo de troca de conhecimento.
Motion Principles
Principle 1 – Fluidity
[EN]
The animation curve was designed to create moments of tension and release, making each transition more organic and fluid. This rhythm generates a sense of natural flow between elements, enhancing the viewer’s immersion. The choice of 60 fps further elevates the experience, delivering a more precise, refined, and engaging visual.
[PT]
A curva de animação foi projetada para criar momentos de tensão e liberação, tornando cada transição mais orgânica e fluida. Esse ritmo gera uma sensação de fluxo natural entre os elementos, aumentando a imersão do espectador. A escolha de 60 fps eleva ainda mais a experiência, entregando um visual mais preciso, refinado e envolvente.
Principle 2 – Tension, release, and pause
[EN]
The animations were conceived to start more slowly, creating anticipation, and gain intensity along the way.
Pauses are essential to maintain a fluid rhythm and support the visualization of the elements present in the piece.
Pauses are essential to maintain a fluid rhythm and support the visualization of the elements present in the piece.
[PT]
As animações foram produzidas para começar de forma mais lenta, criando antecipação, e ganhar intensidade ao longo do tempo. As pausas são essenciais para manter um ritmo fluido e facilitar a visualização dos elementos presentes na peça.
Principle 3 – Simultaneity
[EN]
Simultaneity is the key element that gives rhythm to the animations, allowing movements to occur at the same time, either synchronized or with slight delays.
[PT]
A simultaneidade é o elemento-chave que dá ritmo às animações, permitindo que os movimentos ocorram ao mesmo tempo, seja de forma sincronizada ou com leves atrasos.
