The moving touches we can build into your site
Rhubarb & Ginger · What is possible

The moving touches we can build into your site

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.

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.