heroIntermediateanimation
Terminal Hero
macOS terminal window with an animated typing-out command sequence.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a 2-column hero with a 'living' macOS terminal mockup on the right. Left column: small mono chip, Inter headline with 'command line' in italic Instrument Serif purple, supporting paragraph. Right column: a dark terminal card with rounded corners, traffic-light dots, and a body that animates typing in two npm commands ('npx vibedex add hero', 'npm run dev') using width:0 → max-content with animation-timing-function: steps(). Output lines fade in via opacity transitions on staggered delays — first command outputs appear at ~2-3s, second command at ~6-7s. Final line ends with a blinking white caret block. Result reads as a real CLI demo without any JavaScript.Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-typing-terminal
-->
<section class="hero"><div class="copy"><span class="chip">CLI · v1.0</span><h1>Built for the <em>command line</em>.</h1><p>One install. Every block on disk in seconds. No build step, no React, no opinions.</p></div><div class="terminal"><div class="chrome"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="title">vibedex — npx</span></div><div class="body"><div class="line"><span class="prompt">$</span> <span class="cmd t1">npx vibedex add hero</span></div><div class="line out o1">✓ fetched <span class="hl">vbx-meteors-hero</span></div><div class="line out o2">✓ wrote <span class="hl">app/components/MeteorsHero.tsx</span></div><div class="line out o3"> ready in 240ms</div><div class="line"><span class="prompt">$</span> <span class="cmd t2">npm run dev</span></div><div class="line out o4">▲ next dev — ready on <span class="hl">localhost:3000</span><span class="caret">▌</span></div></div></div></section>