USE CASE 01 · WEDDING PLANNERS & VENUES
Your day, in three chapters
Script titles over soft photos. The chapters turn on their own like pages of an album, folding gently from one to the next.
Layout: Grid Over Image, 3 columns · Effect: Accordion Fold · Autoplay 5 s, thin gold progress line
USE CASE 02 · BOUTIQUE HOTELS & RIADS
A riad behind an arched door
The photo lives inside a tall Moorish arch that stays in place as you read. Each room ripples into view like water in the courtyard fountain.
Split, arch image left, sticky · Ripple · Rooms fade to 40% until hovered
Zellige tiles, a cedar ceiling and orange trees outside the window.
A long pool between palms, with mint tea brought out every hour.
Lanterns, low cushions and the lights of the old town below.
Deep sofas and old books for slow, hot afternoons.
USE CASE 03 · CRUISES & SAILING VOYAGES
Every voyage, through a brass porthole
A round window with a thick brass ring. Pick a harbour and the view outside morphs to the next coast, with its coordinates written below.
Split, circular image right with 14 px brass border · Liquid Morph · Monospace coordinates
USE CASE 04 · INTERIOR DESIGN STUDIOS
Walk through the house, one room at a time
A frosted tab bar floats at the top of a big rounded photo, like a room switcher in a design app. Tap a room and the picture opens through venetian blinds.
Grid, 4 tabs, Full Height off, top-centre · Frosted pills, active pill dark · 3D Venetian
USE CASE 05 · RESTAURANTS & BISTROS
Two moods, one table
A diptych split down the middle: daylight on one side, candlelight on the other. Hover a half and its service takes over the whole frame with a camera-shutter snap.
Full-bleed Grid, 2 columns · Centred serif titles · Camera Shutter · Hours as subtitles
Fresh pasta, bright salads and a glass of something cold.
Seven courses from the wood fire, paired with natural wines.
USE CASE 06 · REAL ESTATE AGENCIES
Browse the card, see the house
Like a property app: a white listing card floats in the corner of a big photo. The selected home turns dark and the house behind opens up.
Grid, 1 column, Full Height off, bottom-right · White rows, active row dark · Split Doors + slow zoom
USE CASE 07 · COFFEE ROASTERS & CAFÉS
Origins you can almost smell
A roaster’s tasting card. Move along the origins and a round, cup-sized photo floats beside your cursor.
Hover List, follow cursor · Circular 280 px photo · Soft fade + zoom · Tasting notes
USE CASE 08 · CREATIVE STUDIOS & TEAMS
Meet the crew, in full colour
Each person brings their own background colour. Hover a name and the whole wall turns red, teal, sky or tangerine.
Full-bleed Grid, 4 columns · White 2 px dividers · Paint Drops
USE CASE 09 · MAGAZINES & JOURNALS
The back issues
An architecture journal’s contents page. Red issue numbers, a black hairline under each story, and the cover photo sliding in line by line beside it.
Hover List, image fixed beside the row · Slit Scan · Red index, black rules
USE CASE 10 · YOGA & MEDITATION STUDIOS
Breathe in, breathe out
One calm circle in the middle of the page. The classes sit inside it and change on their own every four seconds, slow as a breath.
Grid, 1 column inside a circular stage · Autoplay 4 s · Liquid Morph + slow zoom
USE CASE 11 · BARBERS & GROOMING
Sharp cuts, shot in black and white
Every photo is pushed to pure black and white, so the only colour on the page is the red service you are pointing at.
Full-bleed Grid, 3 columns · Stage saturation 0% · Ink Spread · Red active title
USE CASE 12 · FESTIVALS & CLUB NIGHTS
The line-up, printed like a gig poster
Headliners stacked down the centre of the photo, each with its own neon glow and set time. Hover a name and the crowd shot glitches over to that night.
Grid, 1 column, Full Height off, centre · Neon text glow · Glitch
USE CASE 13 · SKINCARE SHOPS
The shelf, one bottle at a time
A warm peach shop shelf. Read the product, size and price on the left, and the photo on the right builds itself out of tiny honeycomb cells.
Split, image right, rounded 32 px · Honeycomb · Product, size & price per row
Brightens dull skin in two weeks of mornings.
Ceramides and oat for skin that feels calm again.
Sweet almond and neroli, warmed between the palms.
Wake up to skin that looks like you slept ten hours.
USE CASE 14 · COMPANY & INVESTOR PAGES
The year in four numbers
An annual report hero. Four large figures run along the bottom of the photo like a stats bar; each one brings up the part of the business behind it.
Grid, 4 stats, Full Height off, bottom · Thin light figures · Soft fade + slow zoom
USE CASE 15 · STREET FOOD & TAKEAWAY
Order at the window
Dishes hang over the photo like paper order tickets with dashed edges. Point at a ticket, it turns yellow, and the plate behind it fills the frame.
Grid 3, Full Height off · Cream tickets with 2 px dashed edge · Active ticket yellow
Charred tomatoes, basil and too much parmesan.
Slow-cooked beans, pickles and a soft egg.
Whatever came from the market this morning.
USE CASE 16 · HIKING & TREKKING TOURS
Four days along the coast
The route runs down the right side of the photo as a dashed trail. Step onto a day and its view opens behind the map.
Grid, 1 column, Full Height off, right · Frosted day cards on a dashed trail · Active day: gold line
USE CASE 17 · TRAVEL & TOURISM
A destination hero that sells the trip
Four places, one full-width image. Visitors hover a column and the whole hero changes scene. Autoplay keeps it moving when nobody is touching it, and the progress bar shows what comes next.
Layout: Grid Over Image, 4 columns · Effect: Ink Bloom + Slow Zoom · Extras: Glass Effect, Autoplay with progress
Seven days of cabins, cedar trails and quiet mornings above the clouds.
Ride the morning train through terraced hills and stay on a working estate.
Reef walks, turquoise shallows and a seaplane ride over the lagoon.
Slow beach days, reef snorkelling and dinners where the sun goes down.
USE CASE 18 · HOTELS & RESORTS
Let guests walk through the resort
A single column of rooms sits on top of the photo. Clicking a room swaps the scene with a camera-shutter effect, and its booking button appears only on the room that is open.
Layout: Grid Over Image, 1 column at the left · Effect: Camera Shutter · Extras: Click trigger, icons, Show Button Only on the Active Item
An open living room that runs straight into your own infinity pool and the sea.
Cocktails on the bay walk, grilled catch of the day and the best sunset on the island.
Lit pool, outdoor shower and a villa built for families or two couples.
Loungers, umbrellas and towel service from sunrise. Breakfast is served right here.
USE CASE 19 · PRODUCTS & E-COMMERCE
Explain a routine, step by step
The steps sit on the left with a product photo each, and the image on the right changes as the routine plays. It is a calm way to teach a process: onboarding, recipes or a four-step skincare ritual.
Layout: Split, image right, sticky · Effect: Liquid Morph · Extras: Autoplay steps with progress, item media images
Lift the day away with a gentle, low-foam cleanse. Thirty seconds, lukewarm water.
Rebalance and prep the skin so everything after it absorbs better.
Three drops, pressed in, never rubbed. Targets dullness overnight.
Seal it in with a light cream that sits well under make-up and SPF.
USE CASE 20 · TEAMS & PEOPLE
Give every person their own entrance
Five people, five columns, and every item uses its own Reveal Effect. It is playful, it fits creative studios and agencies, and it shows how items can override the module default.
Layout: Grid Over Image, 5 columns · Effect: Per item: Glass Shatter, Honeycomb, Pinwheel, 3D Tile Flip, Paint Drops · Extras: Content at the bottom, per-item overlay
USE CASE 21 · AGENCIES & PORTFOLIOS
A case-study list with a floating preview
Big, quiet typography and a preview that follows the cursor. Each row links to its case study. On phones the rows stack with their own image, so nothing depends on hover.
Layout: Hover List, follow cursor + tilt · Effect: Liquid Wave · Extras: Numbered rows, arrow on the active row, whole-item links
Leafline Studio
Orbit Creative
Peach UI Kit
Photography Day
