Kinetic Typography
Kinetic Typography — Design general com motion text, animated type, moving letters. Template e prompt pronto para IA.
Uso: Landing pages, SaaS
Contexto Histórico
Estilo Kinetic Typography representa uma tendência moderna em design UI/UX web com foco em general.
Quando Usar
When the words ARE the experience. Agency homepages where the brand voice needs to hit physically. Portfolio pieces where craft demonstration matters more than information density. Music and entertainment sites where energy trumps readability. Brand launches where a single phrase needs to land with cinematic weight. Skip it entirely for content-heavy pages, documentation, or anywhere users need to actually read at speed. Kinetic type is a statement — not a utility.
Princípios de Design
- Legibility survives motion — if you can't read it mid-animation, the animation fails. Every frame should produce recognizable words.
- Timing is meaning — a slow reveal implies gravitas, a snap-in implies confidence. Don't animate at arbitrary speeds. Choose duration like you choose a typeface.
- One technique per viewport — stagger OR scale OR path. Combining multiple kinetic effects creates noise, not sophistication. Restraint separates craft from chaos.
- Respect the scroll contract — if text animates on scroll, the user must feel in control. Scrub-linked animations feel intentional. Autoplay animations mid-scroll feel like interruptions.
- Performance is non-negotiable — animate transform and opacity only. A janky text animation is worse than static text. 60fps or don't ship it.
Especificações Técnicas
Cores
Efeitos
@keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text
Light/Dark
✓ Full / ✓ Full
Relacionados
Última sincronização: 01/04/2026