Elements: Add product collection

[samohovets]

Summary

• add a Product Collection Element with an animated, circular product-card carousel
• keep up to three products visible while cycling the active product through the center
• expose each card's image, fit, promotion, product name, and prices through schema-backed Studio controls
• render the carousel without a built-in title or background so it can layer cleanly over compositions
• bake required image backgrounds into the media assets instead of exposing separate backdrop controls
• register the Element in the Commerce gallery and publish its preview media

Preview

Video preview

Product Collection page

Verification

• bun run build
• bun run stylecheck
• cd packages/docs && bun test src/test/elements.test.ts
• cd packages/docs && bun run render-element-previews --element=commerce/product-collection

Closes #9349

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview	Aug 20, 2026 4:35pm
remotion	Ready	Preview	Aug 20, 2026 4:35pm

[pullfrog]

ℹ️ Minor suggestions only — one placement detail worth double-checking.

Reviewed changes

• product-collection.tsx — a new rotating circular product-card carousel: three products stay visible while the active one cycles through the center in the scroll window of durationInFrames: 150@30fps. Per-product title, image (contain/cover), price, struck original price, and promotion badges, each exposed as Interactive nodes for Studio.
• element-definitions.ts — new commerce/product-collection entry (square 1080×1080, elementWidth/Height: 1020, safeArea: 30, Inter font dependency, poster/video preview URLs); shape matches the neighboring product-discount-callout/product-offer entries.
• index.mdx + element-registry.ts + elements.test.ts — docs page, Commerce gallery category/display-name, and sidebar expectation all wired consistently.

The carousel wrap/cosine math (slotPosition wrapping via count/2, the [1.02, 1.18] → [1, 0] visibility band keeping ~3 cards visible, and the final-slot rest on the last product) holds up across the transition range, and the repeated interactive names inside .map() instances match the established pattern used by other mapped Elements.

I have one placement observation inline — everything else reads as intended.

  ^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using DeepSeek Flash (free via Pullfrog for OSS) ｜ 𝕏}

[pullfrog]

Horizontal-centering note: each card sits at left: 360 with width: 300, so the resting-card cluster is centered at x = 510 — 30px left of the 1080 canvas center (540) where the "Featured Collection" heading is centered below. If that leftward offset is deliberate (e.g. to compensate for the perspective(100px) depth), ignore this; otherwise centering the stack on 540 is a one-line change.