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。
