Scrolling Testimonial Wall

Build a testimonial wall: three vertical columns of white quote cards on a warm beige background, each column auto-scrolling upward forever at a different speed (middle column reversed). Duplicate each column's content and translate -50% for a seamless loop. Fade top and bottom with a mask. Pause on hover. Collapse to one column on mobile.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#f4f1ec;height:100vh;display:flex;gap:12px;padding:0 16px;mask:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.col{flex:1;display:flex;flex-direction:column;gap:12px;animation:u 14s linear infinite}.col:nth-child(2){animation-direction:reverse;animation-duration:18s}
@keyframes u{to{transform:translateY(-50%)}}.q{background:#fff;border-radius:14px;padding:14px;font-size:13px;color:#333;box-shadow:0 1px 2px #0001}.q b{display:block;margin-top:8px;font-size:12px;color:#888}</style>
<div class="col"><div class="q">Our launch video took one prompt.<b>— Asha, founder</b></div><div class="q">Feels like hiring a motion team.<b>— Dev, PM</b></div><div class="q">We ship a reel every Friday now.<b>— Lena, marketer</b></div><div class="q">Our launch video took one prompt.<b>— Asha, founder</b></div><div class="q">Feels like hiring a motion team.<b>— Dev, PM</b></div><div class="q">We ship a reel every Friday now.<b>— Lena, marketer</b></div></div>
<div class="col"><div class="q">Signups doubled after the hero video.<b>— Omar, growth</b></div><div class="q">Copy, tweak, render. Done.<b>— Mei, designer</b></div><div class="q">The skills directory is gold.<b>— Raj, engineer</b></div><div class="q">Signups doubled after the hero video.<b>— Omar, growth</b></div><div class="q">Copy, tweak, render. Done.<b>— Mei, designer</b></div><div class="q">The skills directory is gold.<b>— Raj, engineer</b></div></div>
<div class="col"><div class="q">Best $0 I spent this year.<b>— Sam, indie hacker</b></div><div class="q">Clients think we have an agency.<b>— Noor, studio</b></div><div class="q">Best $0 I spent this year.<b>— Sam, indie hacker</b></div><div class="q">Clients think we have an agency.<b>— Noor, studio</b></div></div>