The Media Vortex sends the client's photos and short videos along a path: out of the center along a spiral, rushing toward you through a tunnel, round an orbit, or drifting slowly up the page. Near tiles are bigger and sharp, and far ones are smaller and soft. It works best for portfolios, creative businesses and product brands with 8 to 30 good photos.
Put it behind a hero
- Select the hero section.
- In Design → Style, open Media vortex and turn on Media vortex behind the content.
- Under Photos & videos, add 8 to 30 with + Photos and + Video.
- Choose the Path, Speed and Tiles on screen.
Add it as a widget
Open Add and drag Media Vortex (under Effects) onto the page, then click Choose Media. The widget fills the width of its row. Set its height and corners in Box.
Design panel, section by section
The widget's Design panel (and the section's Media vortex settings) shows these sections in this order. Section backgrounds have everything except Box.
Photos & videos
- The tiles you've added, each with Remove. Add more with + Photos (several at once) and + Video.
- The count shows "{n} of 30". Under 8 it says "Add at least 8 for a full vortex." Short, muted video loops work best; they play only while on screen, and phones show their poster.
Motion
- Path: Spiral (default), Tunnel, Orbit or Drift.
- Speed: 0 to 100%. Default 45%.
- Tiles on screen: 6 to 30. Default 26. Phones show at most 10.
- Depth — far tiles smaller and blurred: on by default.
- Tilt with the cursor: the tiles shift a little as the mouse moves. On by default.
- Spiral guide line (Spiral only): a faint spiral behind the tiles. On by default. Then:
- Guide line color: default a theme color, which stays linked to the theme.
- Guide line strength: 5 to 100%. Default 40%.
- Guide line width: 0.5 to 4 px. Default 1.25. The line is cut out around the section's words, so it never runs behind them.
View area
Starts closed. Fits the vortex to the box:
- Keep photos inside the section: the path and photos shrink just enough that no photo is ever cut off at an edge. On a wide section the path stretches to the section's shape so it doesn't get tiny. Off by default, so photos can sweep past the edges.
- Size: 40 to 160%. Default 100%. Makes the whole path bigger or smaller.
- Center across and Center down: 0 to 100% each. Default 50%. Move the middle of the path, for example to the right of the heading.
- Space from the edges: 0 to 200 px. Default 0. A margin the photos stay inside. Shows with Keep photos inside the section on.
Each screen size has its own view area. Switch to tablet or phone at the top of the editor to change it there; until you do, smaller screens use the larger screen's settings ("same as the larger screen"). Use the larger screen's goes back to that.
Look
Starts closed.
- Tile shape: Curved screen (default), Flat card, Rounded or Circle.
- Tile size: 10 to 50%. Default 28%. How big the nearest tiles get.
- Soft fade around the words: 0 to 160 px. Default 32. Photos keep moving behind everything on the section. Buttons, cards and boxes with a background color cover them as they pass. Where words sit on no background, the photos fade softly as they slide under the words and come back as they leave, so the text always reads and nothing disappears suddenly. This setting is how wide that soft edge is. Photos still pass behind the empty part of a column with no background color.
- Heading sharpens into view: the section's heading starts blurred and comes into focus when the page opens. On by default.
- Opacity: 10 to 100%. Default 100%. Lower it to make the whole vortex fainter, so it sits further behind the words.
Box (widget only)
Starts closed. The widget's own box:
- Height: 200 to 1400 px, per screen size. Default 640 desktop, 520 tablet, 420 phone.
- Corners: 0 to 48 px. Default 0.
- Background: the color behind the tiles. None by default.
Spacing and Animations & Effects
The widget ends with the usual Spacing and Animations & Effects sections. See Widget design panel basics and Animations and effects.
The Photos & videos, Motion, View area and Look settings are the same for the section background and the widget.
Preview motion while editing
The vortex shows as a still collage while you edit. Turn on Preview motion while editing to see it move. Preview mode always plays it.
Good to know
- Videos play muted, only while the vortex is on screen, and show their poster first. Phones show fewer tiles and photos only, with video posters in place of the videos.
- Visitors whose device asks for less motion see a still collage at the sides of the section, away from the words. The Pause motion button is added automatically.
- The pictures are decoration, so screen readers skip them.
- The vortex only loads on pages that use it.