Small pieces of movement and layout that make a website feel considered and alive. Have a look, tick the ones you like, and tell us where they belong.
Each one runs live inside the little screen so you can see exactly how it feels. Nothing here is required. The best sites usually use just two or three, chosen well. We will always keep it tasteful, fast, and calm on a phone.
The first screen
How your site opens
The first thing a visitor sees, before they scroll. Pick the feeling you want.
your name
One clear line, over a full photo
A full-screen photo opening
One strong image filling the whole screen, with a single line over it. Calm, confident, and expensive.
Best for: hotels, studios, anything with beautiful photography.
Words on one side
a picture on the other
A split opening
Your message on one side, a picture or colour on the other. Clear and modern, and it reads well the moment the page loads.
Best for: services, shops, clinics, anything that leads with a message.
Big, quiet type
A big-type opening
Large, elegant lettering as the whole opening, with lots of space around it. Editorial and design-led.
Best for: galleries, designers, premium and fashion brands.
A moving picture behind your words
A video opening
A short, silent, looping video fills the screen behind your headline. Warm and alive, and it plays on its own.
Best for: hotels, restaurants, anywhere with good footage.
A few pictures, gently changing
A slideshow opening
A handful of photos fade from one to the next on their own. A simple way to show range right at the top.
Best for: shops, hotels, portfolios with several strong images.
A slow, gentle zoom
A slow zoom on the photo
The opening photo drifts and zooms very slowly. Almost still, but it keeps the page feeling alive. Quiet and premium.
Best for: anywhere a single beautiful photo leads.
A hero photo with your words over it
a large image fills the opening and a small card of text rests over the lower corner
A hero photo with a text card over it
One large photo leads the opening, and a small card carrying your headline and a line sits over the lower corner. The picture dominates and the words rest on top. It is different from the split, where the picture and the words each take half.
Best for: galleries, hotels, studios, anywhere one strong photo should lead.
the picture is alive, watch the flowers
A picture that comes alive
Your hero photograph or painting stays perfectly itself, but the water moves, the leaves stir, the flowers sway. A quiet, living motion rather than a video, and the calmest way to make an opening feel alive.
Best for: galleries, hotels, villas, anywhere one beautiful image leads.
the page continues
it lifts away, the next part continues
The opening lifts away into the page
As you scroll, the opening rises and dissolves into the colour of the section beneath it, so the first two parts of the page read as one continuous scene, with no hard edge between them.
Best for: a considered home where the opening should flow into the page.
the light moves through the day
The scene shifts through the day
The light in the opening moves from dawn to noon to dusk to night. The same view, quietly living through a day. On your site this would be your real photograph graded through the hours.
Best for: hotels, restaurants, anywhere place and atmosphere carry the story.
After the opening
How the rest of the page flows
Once past the first screen, this is the rhythm of the page as you scroll: rows of pictures, sections that arrive, and the panels that glide over each other. The first few set the shape of the page. The rest are the ways a section can arrive. Hover a screen, or press replay, to see it again.
Chapter one
glides over
then the next
and the next
each rises OVER the last
Each panel glides over the last
As you scroll down, each new section rises up and covers the one before, like turning through chapters. It sits in the body of the page, not as the first screen.
Best for: a site with a story to tell, in order. Use it once.
The one behind, revealed
This lifts up and off
the top one peels away
The top panel peels away (glides under)
The reverse of the last one. Instead of a new panel covering the old, the top panel lifts up and off to reveal the one waiting behind it. Calm and deliberate.
Best for: unveiling one important thing behind another.
The top sectionseen first
Lifts to reveal thisthe one underneath
Then the next coversrising up and over
lift to reveal, then the next covers
Lift to reveal, then the next covers
The two-step move you asked for: the top section lifts up to reveal the one waiting underneath, then the next section rises up and covers it. Peel and then cover, one after the other. Deliberate and gallery-like.
Best for: a considered home with a few strong moments in sequence.
One
after
another
plain, one then the next
One after another
The simplest flow. Full sections follow one another as you scroll, with no overlap. Quiet and clear, and the safest choice when the content should just be read.
Best for: most sites, most of the time.
Then the words arrive
sliding in from the side, right next to the picture
picture first, then the text slides in
Picture reveals, then text slides in beside it
The image wipes into view, and a beat later the words slide in from the side, right next to it. A small coordinated sequence that feels considered and draws the eye where you want it.
Best for: introducing a room, a dish, a service, one at a time down the page.
Three pictures across
A row of three images side by side as you come down the page. Good for showing a set at a glance.
Two pictures across
A pair of larger images side by side. A calmer rhythm than three, with room for each to breathe. Rows of three and two can alternate down the page.
Picture, then words
image left, words right
Then it swaps
words left, image right
Picture and words, alternating
A row of image-and-text, then the next row swaps the sides, image left then image right, on down the page. See the two rows: the picture and the words trade places. A classic, readable way to tell a longer story.
one big picture appears
One big picture that appears
A single large image that rises in on its own as you reach it, given a whole moment to itself. A quiet pause in the flow of the page.
It fades and rises
gentle, and never in the way
Fade and rise
Content eases up and fades in as it comes into view. The quietest option, and the one that suits almost everything.
It slides in
from the side
Slide in from the side
Content glides in from the left or right. A little more movement, good for drawing the eye to one thing at a time.
a picture settles gently in
Grow into place
Pictures and cards settle in with a soft scale, as if placed by hand. Lovely for galleries and product shots.
point at the screen
It appears on hover
Appears on hover
A detail stays hidden until a visitor points at it, then reveals. Playful, and a nice reward for exploring. Point at the screen to try it.
Alinebuiltwordbyword
A headline built word by word
The opening line assembles one word at a time. A confident, editorial touch for a single important heading.
A picture that wipes into view
An image uncovers itself as it comes into view, like a curtain drawing back. A polished way to introduce a photo.
One
Two
Three
Four
scrolls sideways
A row you scroll sideways
A line of cards or photos that moves across instead of down. A fresh way to browse a gallery, a menu, or a set of projects.
It comes into focus
resolving from a soft blur
sharpens as it arrives
Content comes into focus from a soft blur
Words and pictures arrive slightly out of focus and resolve to sharp as they reach you, like a photograph developing. A gentler, more considered cousin of a plain fade.
Best for: a calm, gallery-like page where each thing deserves a beat.
Showing many pictures
Galleries and carousels
Ways to show a set of photos or projects without a long, flat grid. These suit a gallery, a work or menu page, or any inside page, so pick a few you like and we will place them where they fit. Hover any screen to take control.
the middle one is the spotlight
A carousel with a spotlight
Pictures slide across with the middle one in focus and the others tilted back beside it. Sometimes called a coverflow.
Best for: a set of rooms, dishes, works, or moments you want to move through.
One
Two
Three
the top card flicks away
A stack of cards that flicks away
Cards sit in a little pile, and the top one slides off to reveal the next. The moving stack you described. Playful and tactile.
Best for: testimonials, a few highlights, a short set of images.
Point at me
a photo that zooms on hover
A photo that zooms on hover
A picture slowly zooms in when a visitor points at it. A small, satisfying touch for a gallery or a shop.
tap a picture to enlarge
Tap a picture to enlarge
A tidy grid of thumbnails, and tapping one opens it large over the page. The classic, clean way to show a full gallery.
A neat grid gallery
All the photos laid out in a tidy grid, some larger than others for rhythm. The simplest, calmest way to show a whole set at once. Tap-to-enlarge can be added on top.
Small touches
Buttons and little movements
The small things a visitor feels when they point and click. Hover the buttons in each screen to try them. These add polish without ever getting in the way.
move your cursor near it
A button that leans toward you
As your cursor approaches, the button gently follows it. A small, quality touch people notice without knowing why.
hover the button
A button that fills in on hover
Colour sweeps up to fill the button as you point at it. Clean and modern, and it makes clicking feel deliberate.
hover the button
An arrow that nudges forward
The little arrow slides forward as you hover, quietly inviting the click. Simple and friendly.
hover the link
A link that draws its own underline
The underline grows in from one side as you hover. Understated, and perfect for a calm, text-led site.
click and hold
A button with a little give
The button presses in when clicked, like a real one. A small bit of weight that makes the whole site feel solid.
a sprinkle on hover
A sprinkle on hover
Tiny points of light gather around a button as you point at it. A touch of delight, best used once, on something special.
Featured inThe Times·Vogue·Monocle·Featured inThe Times·Vogue·Monocle·
A moving strip of names
A line of words or logos sliding gently across, on a loop. Perfect for press mentions, stockists, or partners.
0
happy guests
0
years
0
would return
Numbers that count up
Your figures tick up from zero as they come into view. A confident way to show numbers you are proud of.
light sweeps across it
A button with a shimmer
A soft band of light sweeps across the button now and then, so it quietly catches the eye. Nice on the one button you most want pressed.
How it is arranged
Layout and space
How the page is arranged, and how much room it gives each idea. This is what makes a site feel calm and expensive, rather than busy.
One idea
with room to breathe
Then the next
a whole screen to itself
Unhurried
scroll inside
Calm, spacious sections
One idea per screen, with generous space around it. The single biggest thing that makes a site feel premium and unhurried.
A floating card
lifted off the background, with space around it
Floating cards
Content lifts off the page on its own card, with a soft shadow and air around it. A tidy way to give each thing its own place.
Arched picture frames
Images held inside tall arches, like a gallery wall. Classical and hand-placed.
Bento tiles
A neat grid of soft rounded tiles, each holding one thing, like a bento tray. Friendly and easy to scan.
BeforeAfter
drag across to compare
A before and after slider
Drag the handle across to compare two pictures, before and after. Wonderful for renovations, salons, restorations, and makeovers.
Beyond the home page
The about page, and other pages
The home page is not the only page that deserves care. Here are a few ways to lay out an about page, the one visitors read to decide whether they trust you.
The story, with a face
A portrait beside a warm paragraph or two. People trust a person.
A founder story, with a portrait
A photograph of you or your place, next to the story of how it began. The warmest way to earn a visitor's trust.
Best for: owner-led businesses, studios, family places.
2019
2022
Today
A story timeline
Your journey laid out year by year, milestone by milestone. Good when the history itself is the selling point.
Best for: established places, heritage brands, anyone with a proud past.
Ayesha
Founder
Ravi
Head chef
Nadia
Manager
The team, with faces
A row of portraits with names and roles. It puts real people behind the name, which is reassuring for a service or a clinic.
Best for: clinics, agencies, restaurants, any team you are proud of.
Care
We treat every piece as our own.
Honesty
Plain answers, always.
Craft
Made properly, not quickly.
Warmth
You are looked after.
What you stand for
A small set of tiles, each with a value and a line. A clear, confident way to say what matters to you.
Best for: brands whose values are part of the sell.
Small, useful pieces
Content bits
The everyday parts that make a page easy to use: questions that open, content that switches, a button that stays with you, and kind words that rotate. Quiet, practical, and they suit any page.
Do you deliver? +
Yes, across the island, with timing agreed when you order.
How do I book? +
A short form, and we reply the same day.
What does it cost? +
It depends on the piece. We quote before anything begins.
tap a question
Questions that open (FAQ)
A tidy list of questions, each opening to its answer when tapped. Keeps a page short while still answering everything.
Cakes
switch between them
Content that switches (tabs)
A few tabs that swap the content below without leaving the page. Good for a menu with sections, or services grouped by type.
Book a table
the button stays with you
A button that stays with you
One clear action pinned to the bottom of the screen as a visitor scrolls, so the way to book or buy is always a tap away.
"The loveliest cake we have ever had."A wedding in Colombo
"They understood exactly what we wanted."A returning client
"Every detail was cared for."A birthday order
Words that rotate
Short lines, a review or a promise, fading gently from one to the next. Proof or personality, without a wall of text.
Navigation
The menu at the top
How your menu looks and behaves as a visitor moves down the page. Scroll inside each screen to see how it holds. Pick the one you like.
HomeAboutMenuContact
it floats and follows
A floating menu that follows
A rounded menu that floats a little off the top and stays with the visitor as they scroll. Modern and light.
HomeRoomsDiningBook
a frosted glass menu
A frosted glass menu
A see-through, softly blurred menu that floats over the page and blurs whatever passes behind it. Rich and premium over a photo.
Your nameMenu
it shrinks as you scroll
A bar that shrinks as you scroll
The menu starts tall and generous, then quietly slims down once a visitor scrolls, to give the page more room. Practical and tidy.
Your name
HomeAboutWorkContact
tap the lines to open
A menu behind a button
The links tuck away behind a small button, and slide in when tapped. Keeps the page clean, and it is how most menus work on a phone.
Home AboutYOUR NAMEWork Contact
a classic centred name
A classic centred name
Your name in the middle, links either side. Timeless and elegant, the way a good boutique or hotel site reads.
Mood and material
Surface and style
What the surfaces are made of, and the overall feeling. The four named styles below are the current family of looks. We can also work minimal (lots of space, very few elements), maximal (rich and layered), or spatial (real depth, like stacked cards you can almost pick up). Tell us the feeling and we match it.
A panel
A button
Glassmorphism
Glassmorphism
Frosted, see-through panels that blur what is behind them, floating over colour. Notice you can see the background through the panel and the button. Bright and modern.
A panel
A button
Claymorphism
Claymorphism
Soft, puffy, rounded shapes that look moulded from clay, thick and inflated with a soft inner glow. Friendly and playful, lovely for a warm or younger brand.
Raised
Pressed in
Neumorphism
Neumorphism
Everything is the same colour as the background, shaped only by soft light and shadow, so a tile looks raised out of the surface and a button looks pressed into it. Calm and tactile, best used sparingly.
A panel
A button
Skeuomorphism
Skeuomorphism
Surfaces that copy real materials, paper and pressed physical buttons with real edges, a raised lip and a drop shadow you could almost press. Characterful and nostalgic.
A soft glow
A soft glowing background
Gentle blooms of light drift slowly on a dark background. It gives a page life without anything on it having to move.
Your screen, floating
move your cursor over it
A floating, tilting screen
A phone or screen shown floating, tilting gently toward the cursor. Good for showing off a product or an app.
A flowing background
A flowing colour background
Soft colours drift slowly across the background on a loop, light and calm. A gentler, brighter cousin of the dark glow, and it stays out of the way of your words.
move your cursor across it
A glow that follows the cursor
A soft light drifts beneath the page and follows the reader's cursor, showing gently through the panels above. A small, quiet movement that makes a calm section feel awake without ever being busy.
Best for: a calm section of cards or panels that could use a touch of life.
0 chosen
Your selection
The touches you have chosen
Nothing chosen yet. Tick the ones you like above and they will gather here.