Dark code card with file tree and typing line

Dark editor-style card: window chrome dots, a mock file tree, and a terminal line that types a command on a loop with a blinking block caret. Good as a floating visual next to feature copy; keep the file list to 3-4 rows so it stays legible at card size.

pattern · vercel.com card animation-textvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="v-code-card">
  <div class="v-code-titlebar">
    <span class="v-dot"></span><span class="v-dot"></span><span class="v-dot"></span>
    <span class="v-code-title">agent.ts</span>
  </div>
  <div class="v-code-body">
    <div class="v-file-row v-file-open">&#128193; instructions.md</div>
    <div class="v-file-row v-file-active">&#128196; agent.ts</div>
    <div class="v-file-row">&#128196; schedule.ts</div>
    <div class="v-file-row v-file-nested">&#128196; daily-report.md</div>
    <div class="v-terminal-line">$ <span class="v-typed" id="vTyped"></span><span class="v-caret">&#9608;</span></div>
  </div>
</div>

Block id: vercel-code-callout-filetreevanilla · swap-content

More card blocks

Split hero with booking-card mockup

cal.com

Floating booking-confirmation mockup card

cal.com

Issue tracker card with live activity feed

linear

Rotating project health status list

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call