Skeleton to content
Shimmer while it loads, then it resolves.
Lab · Motion
Motion that makes people look.
Animation is how a website shows personality. Type that arrives with energy, particles that find their shape, a page that builds itself as you scroll. Play with all of it here.
Kinetic studio
Type a word. Watch it move.
Eight kinds of kinetic type, built letter by letter. Change the words, the motion, the look and the speed, and press Play.
Hello Paphos
Your device asks for reduced motion, so this stays still until you press Play.
Particle logo
Letters made of light.
Thousands of tiny points form your letters and scatter when you touch them. This is how a logo can react to the person looking at it.
Move your mouse through the letters, or tap to scatter them. They always find their way back.
Scroll story
From sketch to shipped.
Scroll slowly. The page builds a screen in front of you, driven by nothing but your scroll position.
01
Sketch
Every screen starts as lines on a page: structure first, so nothing is decorated before it is understood.
02
Colour
Then brand colour and light give it a face, with contrast checked as we go.
03
Content
Real words and real prices replace placeholders, and each piece arrives in its own time.
04
Finish
Last comes the polish: depth, light and the small motion that makes it feel alive.
Feel the curve
The easing is the feel.
The same movement can feel cheap or expensive depending on its curve. Drag the handles, try a spring, and watch three things move the same way.
Drag the two handles, or type exact values.
cubic-bezier(0.22, 1, 0.36, 1)Patterns
Small motions, big difference.
Six everyday details we like to get right: loading, decoding, counting, lighting, flipping and staggering.
Text scramble
Hover or focus the word.
128reviews
4.9rating
96%repeat
Count up
Sample numbers that earn their entrance.
Follow the lightThe glow tracks your pointer.
Spotlight
A highlight that follows the cursor.
Flip card
A 3D turn between two faces.
- Choose your base
- Add a topping
- Pick a time
- Done
Staggered list
Items arrive one after another.
In the wild
Motion we have already made.
Short vertical reels for social media, from a coffee ritual to a party teaser. Tap one to watch.
How we use it
Motion needs good manners.
Animation is easy to overdo. These are the rules we keep, whatever the project.
Motion with manners
Everything respects reduced-motion settings, and nothing loops forever without a reason.
Smooth by design
We animate transforms and opacity, not layout, so phones stay at a steady frame rate.
It means something
Motion should explain, guide or confirm. If it only decorates, it goes.
The curve is the feel
Timing and easing decide whether a site feels cheap or expensive, so we tune them by hand.
Questions
Motion, answered.
Will animations make my website slow?
Not when they are built properly. We animate transforms and opacity, which phones handle smoothly, keep files small and pause anything off screen.
What about people who dislike motion?
Respecting them is part of the job. When a visitor's device asks for reduced motion, the website calms down and still works completely.
Is kinetic type just for show?
Used with purpose it is a signature: a headline that arrives with energy, a number that counts up, a button that answers back. Used everywhere it is noise, so we choose carefully.
Can you animate my logo or make reels?
Yes. We make motion for websites and also short vertical reels for social media. Some of ours are on this page.
Do I need animation at all?
Not always. A calm, clear website often wins. Motion earns its place when it explains something, gives feedback or gives your brand a personality.
Ask the librarian
Want your brand to move?
Tell us about your business. We will suggest motion that fits, from a single animated headline to a full set of reels.