Kinetic Typography

Stylegeneral

Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text. Best for Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages.

Motion text animated type moving letters dynamic typing effect morphing scroll-triggered text

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Kinetic Typography

Keywords: Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text
Primary colours: Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette
Secondary colours: Accent colors for emphasis, transition colors, gradient text fills
Effects & animation: @keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text
Best for: Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages
Do not use for: Long-form content, accessibility-critical, data interfaces, forms, elderly users

## Prompt keywords
Design with kinetic typography. Use: animated text, scroll-triggered reveals, typing effects, letter-by-letter animations, morphing text, gradient text fills, oversized hero text, text as the main visual element.

## CSS / technical
@keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing

## Implementation checklist
☐ Text animations smooth, ☐ Prefers-reduced-motion respected, ☐ Fallback for no-JS, ☐ Mobile performance ok, ☐ Typing effect timed, ☐ Scroll triggers work

## Design system variables
--text-animation-duration: 1s, --letter-delay: 0.05s, --typing-speed: 100ms, --gradient-text: linear-gradient(90deg, #color1, #color2), --morph-duration: 0.5s

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source