---
title: "VELA: Built with ProductOS | ProductOS"
description: "VELA is a direct-trade coffee roastery. Its hero scrubs an AI-generated espresso-pour film frame by frame as you scroll, golden crema folding in slow motion und"
url: https://productos.dev/showcase/vela-coffee
---

[ Back to Showcase](https://productos.dev/showcase)

Brand site Design surface

VELA

# A specialty roastery's launch page with a scroll-poured espresso film

VELA is a direct-trade coffee roastery. Its hero scrubs an AI-generated espresso-pour film frame by frame as you scroll, golden crema folding in slow motion under per-letter kinetic typography. Below: a brewing-ritual scrollytelling sequence, copper stat counters, and a three-tier subscription section, all in a warm cream-and-espresso editorial system.

[View live ](https://vela-iicq.vercel.app/) [Use as a template →](https://design.productos.dev/templates)

VELA · Live project

## How it was built

- Brand voice + copy written against the Starbucks DESIGN.md warmth system
- Hero film generated by the ProductOS media pipeline, still → image-to-video
- video-to-frames: ffmpeg → 193-frame sequence on S3
- GSAP canvas scrub + per-letter headline stagger across a pinned 300vh hero
- Deployed to Vercel from the productos-agents org

## Stack

Next.js 15 Tailwind v4 GSAP Lenis AI media pipeline

## Built on

[ProductOS Design surface ](https://design.productos.dev/)

193

scroll-scrubbed film frames

4-step

brewing-ritual scrollytelling

1

prompt to production

## Build something like VELA

Give the agents a brief. Get a deployed product. Every project in the showcase started as a single prompt.

[Start building](https://beta.productos.dev/sign-up?utm%5Fsource=productos.dev/showcase) [Back to Showcase](https://productos.dev/showcase)