ShoppableReels

A looping ticker of vertical video cards that grow smoothly as they pass the centre. Click one and it opens fullscreen with a scrollable panel of the products featured in that clip. Built for brands turning reel content into a shoppable section.

About Component

- Infinite marquee with adjustable speed and direction

- Proximity scaling, so cards ease in and out of size instead of snapping

- Drag or swipe to scroll the row by hand

- Pause on hover, with only the card under the cursor playing

- On touch, visible cards play only while the section is in view

- Optional phone frame with side buttons, camera dot, and bezel

- Fullscreen viewer with arrows, dot indicator, arrow key and Escape support

- Instagram reels supported: paste a link, an embed src, or the copied embed code

- Product panel with image, star rating, review count, sale price, and colour swatches

- Panel side, width, background, and every font size exposed as controls

- Page scroll locks while the viewer is open, with no layout shift

- CSS scoped per instance, so multiple copies on one page never conflict

What's Included

- One code component, no dependencies to install

- Six demo reels prefilled so it renders the moment you drop it in

- Around 40 property controls for layout, motion, and type

How It Works

1. Drop the component on your canvas.

2. Add reels in the properties panel, each with a video or Instagram link.

3. Attach the products shown in each clip and set the panel styling.

Use Cases

- Fashion and apparel storefronts

- Beauty and skincare product pages

- Consumer electronics launch pages

- Creator and influencer landing pages

- DTC brand homepages

- Fitness and athleisure collections

Keywords

framer, shoppable video, reels, instagram embed, video carousel, marquee, ticker, ecommerce, product cards, shoppable reels, video slider, infinite scroll, lightbox, fullscreen video, ugc, dtc, storefront, social commerce