Most marketing sites show their tech stack as a static grid — 40 logos arranged in a 4×10 table, each one crisp and at eye level. Boring, passive, instantly forgettable. Velocity X took the opposite approach: four rows of 10 technologies each, animating infinitely through the viewport in alternating directions, then tilted 48 degrees into a 3D perspective plane and faded at the edges so they drift behind the heading like they're receding into depth. The tech stack becomes a living, selling prop instead of a clipboard checklist. This is how.
Why Tech Stacks Sell Harder When They Move
A tech stack is social proof disguised as transparency. You're saying "we use the good tools" — and visitors skim your list in milliseconds, looking for the brands they recognize (React, TypeScript, Supabase, Stripe). The problem: a static list is easy to ignore. Your eyes land on it, scan the logos, and move on. But an endless scroll of tools moving past your peripheral vision forces micro-attention. It says "there's a lot here" without needing to count them. Plus, the 3D skew and fade-mask trick lets the marquee live *behind* your heading copy, so the tools are always there, always moving, always reinforcing "this is a sophisticated, well-tooled product" while you're reading the sales pitch.
The Stack: Four Rows, Two Speeds, Alternating Direction
Each row is a flex container with `overflow-hidden` so the marquee tiles are clipped at the viewport edge. Inside, 10 tech items (React, Astro, TypeScript, Tailwind, etc.) duplicate themselves twice, so when the first copy scrolls out the left, the second copy has already entered from the right — creating the illusion of an infinite loop. Row 1 animates left to right at 80s per full lap. Row 2 bounces right to left at 80s. Row 3 crawls left at 120s (slower feels "heavier"). Row 4 crawls right at 120s. The alternating direction means tools don't all bunch up together; the chaotic motion reads as more organic.
{`@keyframes marquee-left {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-right {
0% { transform: translate3d(-50%, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}
.marquee-left { animation: marquee-left 80s linear infinite; }
.marquee-right { animation: marquee-right 80s linear infinite; }
.marquee-left-slow { animation: marquee-left 120s linear infinite; }
.marquee-right-slow { animation: marquee-right 120s linear infinite; }`}The 3D Skew: Perspective, Rotation, and Depth
Without 3D, the marquee sits flat against your page. But Velocity X wraps the four rows in a container with `perspective: 900px`, then applies `transform: rotateX(48deg) rotateY(-12deg) rotateZ(24deg)` to tilt the entire stack backward and sideways into a depth plane. The X-rotation pushes the bottom rows further down the page; the Y-rotation leans them slightly toward the right; the Z-rotation tips them 24 degrees. The result feels like you're viewing the tech stack from above and to the left, as if it's a physical panel receding into the page. The rotation throws content off-canvas, so padding of `4rem 0 8rem` (extra padding at the bottom) keeps the bottom-right rows from being clipped.
{`perspective: 900px;
transform: rotateX(48deg) rotateY(-12deg) rotateZ(24deg);
transform-origin: 50% 50%;
padding: 4rem 0 8rem;`}The Mask: Elegant Fade-Out at Edges
If the marquee ran edge-to-edge, logos would pop in and out at hard boundaries. Instead, Velocity X uses a two-layer mask gradient: one fading left-to-right (tools drift behind the heading), another fading top-to-bottom (tools fade off the top). The `mask-image` CSS property blends two linear gradients to create an elegant fade that makes logos disappear gently instead of clipping. On left: fully transparent at 0%, semi-opaque at 25%, near-full at 45%, fully opaque at 65%. On top: fully opaque at 0%, fading out as you go up, fully transparent at 100%. The effect: tools slide behind the heading and evaporate into the page background.
{`mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,1) 65%),
linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
mask-composite: intersect;`}Respecting Reduced Motion (and Looking Sophisticated)
Users with `prefers-reduced-motion: reduce` get animations disabled and see the marquee frozen in its first frame — still there, still selling, just not moving. They don't get a degraded experience; they get a respectful one. Also, `will-change: transform` tells the browser to pre-compute the marquee animation on the GPU, `backface-visibility: hidden` keeps letterboxing from flickering mid-rotate, and `transform: translate3d` (instead of `translate`) forces hardware acceleration. Performance = perceived sophistication.
Frequently Asked Questions
Can I add this to my own Velocity fork?
Yes. The component is `src/components/home/Section-TechStack.astro`. Copy the `row1`, `row2`, `row3`, `row4` arrays and the CSS keyframes, then duplicate into your `brand.json` schema for tech items. If your brand doesn't have 40 tech tools, cut the rows; the pattern works with 2–8 rows equally well.
Why 40 tools? Isn't that a lot?
For Velocity X (a template platform), 40 is right — it says "this is a full-stack, sophisticated framework." For a smaller product (a single SaaS tool, a design agency), 15–20 tools is more honest. Don't inflate your stack. Visitors who use half your tech list will spot the padding instantly and lose trust.
Does the 3D perspective work on mobile?
Yes, but you'll need to reduce the rotation on smaller screens. A 48-degree X-rotation looks alien on a 375px viewport. Try `rotateX(32deg) rotateY(-8deg) rotateZ(12deg)` for mobile, and phase back to the full angles on desktop with a media query.
Can I click a tool to see case studies?
Technically yes, but it breaks the loop. Marquees work because they're predictable streams of motion — your brain stops trying to track individual items. Add clickability and you're back to a grid. If you want interactivity, use `/pricing` for a grid instead.
How do I sync the marquee loop with other page animations?
Both loops are frame-synced by the browser, so they'll start in parallel. If you want them to sync with a scroll-driven reveal, add `animation: paused` by default, then trigger `animation: running` with a scroll observer once the section comes into view. This keeps the marquee frozen until the user sees it, then it starts fresh.
What if my tech stack has categories I want to highlight?
Each tile displays name, category tag, and a colored accent dot (matching brand colors). That's enough visual separation. If you need more (badges, star ratings, pricing tiers), you're building a product comparison tool, not a stack showcase. Keep the marquee simple and focused.
The Bottom Line
A tech stack is proof of sophistication. Most sites treat it like a résumé — a list to check off. Velocity X treats it like a selling animation — a looped, 3D, perpetually moving backdrop that says "we're serious about tooling" without needing a single word of copy. Four CSS keyframes, one perspective transform, and a pair of mask gradients later, 40 tech logos become a passive proof layer that works 24/7 behind your headline. Ship it as-is or fork it for your own brand at /pricing.