𝕏
Sign in
← All sections

Kinetic Word Swap Headline

HeroBold typeWorks in Claude Code · Cursor · v0
Build prompt
Build a hero whose last word rotates through a list ('convert', 'sell', 'explain', 'launch') with a vertical slot-machine roll: each word holds ~1.2s, then slides up with a sharp cubic-bezier(.7,0,.2,1) ease. Loop seamlessly by repeating the first word at the end. Huge 900-weight type, tight tracking, single bold background colour (#ff4d1a). CSS only.
Code
<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#ff4d1a;color:#111;height:100vh;display:grid;place-items:center}h1{font:900 64px/1 system-ui;letter-spacing:-.05em;text-align:center}
.w{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom}.w span{display:block;animation:r 6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes r{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-100%)}50%,70%{transform:translateY(-200%)}75%,95%{transform:translateY(-300%)}100%{transform:translateY(-400%)}}</style>
<h1>Make videos that<br><span class="w"><span>convert.<br>sell.<br>explain.<br>launch.<br>convert.</span></span></h1>

More sections

Free

Aurora Hero

Hero · Dark SaaS
Preview
Free

Logo Reveal Intro

Hero · Bold type
Preview