Your photos and videos as a moving reel

A Showreel puts up to 30 photos and videos on one moving reel. Visitors drag it, swipe it or use the arrow keys, and a click opens a piece large over your page. This guide walks the editor from the template you start with to the code you paste on your site. See one running.

Set it up The templates Your photos and videos Size and shape Motion Words on the cards The title Big words in the middle Corner text and counter The glass edge Opened large Buttons Desktop and Mobile Publishing and the embed code If something goes wrong

Set it up

Make a showreel. Sign in at dreamwidget.com/dashboard, press Showreel, and pick a template or Create from scratch. Each template has a dark and a light version, and the preview above them switches between Desktop and Mobile. Ribbon lens is marked Recommended.
Add your work. On the Content tab, under Items, add a card for each photo or video, up to 30. A template brings its look and none of its sample pictures, so the reel fills with your own.
Write the words you want. A Title for the whole reel, words on each card, the name and line shown when a card opens, and small lines for the corners. Every one is optional; leave a line empty and it is not shown.
Shape it. The Design tab holds the size, the motion and the look of every part, in the order the widget is drawn. Turn on Guided Edit above the preview and click any part of the reel to open the tools that edit it.
Publish it and paste the code. Press Publish changes at the top right, then copy the code from the window that opens and paste it on your page. Publishing and the embed code has the details.

Guided setup, above the tabs, walks through every part one step at a time; press Do it myself to leave it. Each part on the Design tab opens on its main settings, with the rest folded under Fine-tune; Open all shows every group at once.

The templates

The Templates tab shows every Showreel template as a picture. Click one and your reel takes its look at once, live in the preview. Your pictures, words and links stay; the motion and the look change. The template in use is marked In use, and Undo at the top of the editor takes a change back.

Ribbon lens. Your work on one long curved wall that waves as it turns, the glass at the sides bending it open like a lens. It starts with a count of the items at the bottom.
Crumple. Each piece a sheet of paper, flat in the middle and folding into a ball along its own creases as it moves to the sides.
3D Ribbon. One band of your work flowing through space toward the visitor and away, banking as it turns.
Slide. One card at a time glides in from the side and rests at the center over a soft ring of light.
Hover. A row of overlapping cards. The one under the pointer lifts and straightens while the rest step aside, and its name swaps in below.

A showreel made from a template keeps that template's motion; to try another, pick another template.

Your photos and videos

Each item on the Content tab is one card. Photo, or the still shown before a video plays takes a PNG, JPG, GIF, SVG or WebP up to 5 MB: upload it, or paste an address that starts with https://. Video (optional) takes an MP4 or WebM up to 30 MB. It plays muted on the card in front, and with sound when the card is opened large.

Below the picture, each item has:

Words on the card, Title on the card and Sentence on the card: words drawn over the picture, Always shown or When pointed at. See Words on the cards.
Name, The line under the name and Small line above the name: the words shown when the item is opened large.
A click on it: Opens it large, or Follows its link, the address in Link.
Describe it for screen readers: a short description for visitors who cannot see the picture. Worth filling in for every card.

The arrows on each item move it up or down the order.

Size and shape

The Layout part, first on the Design tab, sets how big the reel is. Height offers From its shape, with Showreel shape from extra wide 21:9 to very tall 9:16; Set height, in pixels; and Fill the screen, a share of the visitor's window, so the reel can be a whole section of your page. Card shape crops every card to one shape, or Auto keeps each picture's own. Card size sets how large the cards are drawn. The Hover template sizes itself from its cards, so it asks for Card height instead.

Motion

The Motion part decides how the reel moves on its own: Plays on its own, the direction, the speed, and Pause while pointed at. Visitors can drag or swipe it and A sideways trackpad or wheel moves it can each be turned off. Visitors can always point, tap or use the arrow keys.

Each card holds the cards' corner radius and, where the template draws them, a shadow under each card and a color behind the picture. The Slide template adds a Light ring part for the ring behind its cards: its color, thickness, size, position and softness.

Words on the cards

A card can carry a title and a sentence over its picture. Each card's own words, and whether they show always or only when pointed at, are in its box on the Content tab. Their look is shared, in the Words on the cards part on the Design tab, which appears once a card has words to show: Where the words sit, Darken the picture behind the words so they stay readable, and How the words come in when pointed at, with the full text tools for each line.

The title

Title on the Content tab can be as many lines as you like. On the Design tab, Title position puts it Above the cards or Behind the cards, large, and behind the cards Fill the background with the title repeats it line after line until it fills the space. Title strength sets how strongly it shows. Like every line of text, it has its own font, size, weight, color, letter spacing and space around it.

Big words in the middle

Big words in the middle brings large words into the middle of the reel. A loop of lines plays the lines you write, one after another. With certain cards shows a card's own words while it is in front: each card then has Big words when it reaches the front in its box. How they travel keeps them In place, or has them Fly toward you, then stay or Fly toward you and past. A glow and its color, and the time between lines, are there too.

Corner text and counter

Small lines in the corners give the reel the feel of a studio reel. Write them on the Content tab: Top left corner text, Top right corner text, Top center text, Bottom left corner text and Bottom right corner text. On the Design tab, Corner text and counter turns on the Counter at the bottom center, as 03 / 10, which follows the item in front, or /10. A word can follow it, like Photos, from Word after the counter on the Content tab. Small shape before each line puts a square, circle, diamond, star or another small shape before the lines, and each line has its own text tools.

The glass edge

Refraction at the widget's edges bends and softens the pictures like glass where they come in and go out, with a thin highlight along the edge. Edges sets it to Left and right or All four sides, and Look is Full 3D or Flat. Then come how wide and how thick the glass is, how softly it begins, how far it stretches, the colors parting at the edge, frost and light. Ribbon lens starts with the glass on; on every other template it is off until you choose it.

The glass asks more of a visitor's computer than anything else in the reel. A browser that cannot draw it shows a simpler flat glass.

Opened large

A click on a card opens it large over your page, with its name, the line under it and the small line above it, and a video plays with sound. The opened card has tools of its own, once at least one card opens large. Above the preview, the View switch shows Showreel and Opened card: choose Opened card and the preview shows a card open, with only its tools listed: Picture size, Picture corner radius, Shadow under the picture, Where the words sit (over the page at the bottom left, or under the picture, centered), Blur behind, the text tools for each line, and the close button's size and colors. With Guided Edit on, clicking a card in the preview also offers Edit the opened card, which opens that same card. Words you write for the opened card appear once a card has a name or a line.

Buttons

Buttons, on the Design tab, is None, One on each item or One for the widget. One on each item gives every card a button with words of its own (Its button words, in the card's box) that goes to the card's Link; the card in front shows it, and it shows again when the card is opened large. One for the widget puts a single button centered under the cards, with Widget button words and Widget button link on the Content tab. Either way the button has the full set of button tools and the library of ready made buttons.

Desktop and Mobile

The editor has two screens, Desktop and Mobile, and the buttons above the preview choose which one you are editing. Every setting on the Design tab is kept once for each, so a change lands on the screen you are looking at, unless you tick Edit all screens. A tablet is drawn from Desktop. The pictures, the words and the links are shared by both screens. Press See both above the preview to see Desktop and Mobile side by side, at life size, before you publish.

Publishing and the embed code

Press Publish changes. The button at the top right says Publish changes while you have something to publish and Published when the live reel is what you see. Pressing it lists what you changed and asks once: Publish sends it, Keep editing goes back.
Copy the code. The window that says Your widget is live has tiles for WordPress, Shopify, Wix, Squarespace, Webflow and any other website, with the steps for the one you choose, your code with a Copy code button, and Copy instructions for someone else if another person looks after your site. The same code is on the Settings tab under Copy embed code, and on the dashboard as Copy embed on the widget's card.
Paste it once. Paste the code where the reel should appear. It is an iframe and a short script together; paste both, because the script keeps the frame as tall as the reel and lifts an opened card over your page. A page that already has the code picks up each later publish within a minute, with nothing to paste again. Embedding on your site and the install guides for 49 platforms show where to paste it. On WordPress, the DreamWidget plugin's block offers the Showreel too.

If you started building without an account, publishing first asks you to create a free one, and the reel you built comes with you.

If something goes wrong

A card opens large only inside the widget's box. The code on your page is missing its script. Copy it again from the Settings tab and replace what you pasted, both parts.

A video shows only its still. Check the video is an MP4 or WebM under 30 MB, or that its address starts with https://.

The reel is too short or too tall for the section. Under Layout, change Height: Set height for an exact number of pixels, or Fill the screen to make it a whole section. Check Mobile too.

A page with many reels feels slow. Turn the glass edge to Flat or Off on the reels lower down the page.

Anything else: hello@dreamwidget.com, and tell us the widget's name.