← Back to Prompts
Landing

Kinetic Typography Hero

A scroll-driven hero where oversized typography layers, splits, and reveals itself with fluid motion.

by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a hero section driven by oversized kinetic typography. Use a massive display headline (80-120px on desktop) split into three lines, each with a different font weight or style: one line in a compressed sans-serif, one in an italic serif, and one in a monospaced weight. Animate the lines with a staggered translateY + opacity reveal on load. As the user scrolls, the lines should slowly separate vertically and fade out, creating a sense of depth. Use a near-black background and off-white text with one word highlighted in a saturated accent color. Keep the layout minimal: no buttons, no images, only type and motion. Use Tailwind CSS and CSS keyframes.
Chinese Prompt
创建一个由超大动态排版驱动的 hero 区域。使用巨大的展示标题(桌面端 80-120px),分为三行,每行使用不同的字重或样式:一行压缩无衬线、一行斜体衬线、一行等宽字重。页面加载时以错开的 translateY + 透明度动画逐行显示。用户滚动时,各行缓慢垂直分离并淡出,营造深度感。使用近黑色背景和米白色文字,其中一个词用饱和强调色高亮。保持布局极简:无按钮、无图片,只有文字和动效。使用 Tailwind CSS 和 CSS keyframes。
Kinetic Typography Hero screenshot 1
## Overview A typography-first hero that treats type as the primary visual element. Inspired by editorial design and avant-garde portfolios. ## Features - Oversized three-line display headline - Mixed type styles (compressed sans, italic serif, monospace) - Staggered load reveal animation - Scroll-driven vertical separation and fade - Single accent-color word - Near-black, image-free composition ## Usage Use for creative agencies, personal portfolios, or brand launches where typography carries the message. ## Customization Modify the prompt to: - Add a subtle horizontal marquee behind the headline - Replace the accent word with an outlined/stroke version - Introduce a variable font for weight animation on hover - Add a thin progress line tied to scroll