The Roto Transition
Each destination fills the screen. Move to the next and the photograph breaks into three rings that spin against each other until the new country locks into place.
A tour company sells the moment of arrival. This concept gives every destination one: the whole screen, a name in wide capitals, and a turn of the rings to bring the next country in.
How it works
The page is one screen, one destination at a time: the photograph fills the window under two soft circles, with the place name set wide in serif capitals and the country beneath. A scroll, a swipe, the arrows or a key moves to the next place. The current photograph is cut into three concentric rings with CSS masks, a centre disc, a middle ring and an outer ring, and they begin to twist, each in the opposite direction to its neighbour. The next photograph arrives in the same three rings from the centre outward, spinning in and settling, until all three line up and the new country is whole. The name rises in letter by letter once the rings settle. Every destination opens its journey in a side panel: the days, the price, the group size, two more photographs and the route day by day, with a button to reserve a place. A list of all destinations jumps straight to any of them.
Who it fits
The demo is a fictional guided tour company, MERIDIAN, with four journeys: Santorini, Kyoto, the Swiss Alps and Cappadocia. Each opens a panel with the days, the price per person, the group size, two more photographs and the route day by day.
Why it sells
With four or five journeys, a grid undersells them. One at a time, full screen, each photograph gets the whole stage, and the ring transition turns moving between them into part of the experience rather than a page load. It is CSS masks and transforms on ordinary images, so it is light and runs on a phone.
Recommended for
- Tour operators and travel agencies
- Hotel and resort groups
- Destination marketing
- Any brand with a few hero places or products
Common questions
How is the photograph cut into rings?
Each ring is the same photograph with a radial mask that keeps only a band between two radii. Three bands cover the whole screen. Spinning a ring spins only its band, so the picture looks like it is turning in pieces while the frame stays still.
Why three rings and not more?
Every ring is another full size layer the browser has to redraw while it turns. Three gives the broken, turning feel of the effect and stays smooth on an ordinary laptop. Each ring is also only as large as its own outer edge, so the inner ones are cheap.
Does it work on a phone?
Yes. A swipe in any direction moves to the next place, the photographs are cropped to the centre where the subject is, and the journey panel fills the screen.
What else could this format sell?
Anything with a handful of hero destinations or products: a hotel group with four properties, a resort's villas, a car maker's three models, a property developer's launches. The ring turn gives each one its own arrival.