01Effects
Flight through the type
A large word lies over an image. As you scroll, the camera flies into one of the letters until the image behind it fills the whole screen.
Suits Home page, opening, café, shop, hotel
Keep scrolling
Animated sections to try out
24 sections · our own code · no third parties
Animations bring a website to life when they serve the content. Here we show sections that we build into new and existing websites – programmed ourselves, without third-party libraries, fast and accessible. Scroll, click, try them out.
Custom animations
Animations from our sample projects
The sections further down can be built into any website. A movement that comes from the business itself suits it even better: tree rings for a joinery, guide lines like in a clinic for a neurology practice, a lookbook to leaf through for a salon, a dial scale for a tea merchant, an exploded view for a watch manufacture. The films show the animations as they run on the five sample projects. The businesses are invented; the websites are fully built and online. The sample projects are in German.
-
Trades · Sample project
Tischlerei Eichenwald
- Tree ringsThe company history grows ring by ring as you scroll, and the year counts along.
- AssemblyA cupboard comes together step by step, following the process from measuring up to installation.
- Wood libraryChoose a wood, the image wipes in and the properties grow as a scale.
-
Practice · Sample project
Neurovita
- Guide linesThree coloured lines lead from the entrance to appointments, examinations and the first visit and grow as you scroll.
- Weekly clockConsultation hours as arcs on a clock, the hand points to the current time, with the opening status below.
- ScheduleEvery examination as a timeline: a dot runs through the steps and the minutes count along.
-
Hair salon · Sample project
Salon Marlène
- CurtainOn the split page the image changes like a curtain whenever a new chapter begins.
- Length switchChoose a hair length, the prices recalculate and the figure gets the matching length.
- LookbookFour looks in a book: the page turns as you leaf through, with recipe and price alongside.
-
Online shop · Sample project
Teehandlung Ohlsen
- ShelfThe compartments are stocked as they come into view; drawers filter by type of tea.
- Dial scaleChoose a pack, the needle swings to the weight, and price and unit price count along.
- Tea timerThe brewing time runs down as a ring, ending with a note to pour.
-
Online shop · Sample project
Vossberg Uhren
- Exploded viewAs you scroll, the watch moves apart into seven parts and item numbers and labels appear.
- ConfiguratorChoose case, dial, hands and strap, the drawing changes with you and the parts list adds up.
- EngravingAs you type, the watch turns over and the text runs in an arc across the case back.
If you have set “reduce motion” in your system, you will see stills here – which is exactly how the websites we build behave. Each section can be built into your website individually; we give you the price upfront, based on the effort.
02Effects
Depth flight through images
Images float one behind the other in space. As you scroll you fly between them, the front ones pass by and the rear ones come closer – no video file, just photos.
Suits References, gallery, portfolio, property
ExampleReferences as a space
03Effects
Type made of particles
Hundreds of dots come together to form a word. Move the mouse or your finger through them and they scatter, then find their way back to their place.
Suits Brand name, logo, campaign
Move your mouse or finger through it
04Effects
Dot field with waves
A grid of dots reacts to movement: under the pointer it bulges like a lens, and a tap sends a wave across the surface. Left alone, calm waves run by themselves.
Suits Technology, software, agency, opening section
Move the pointer or tap
05Scrolling
Progress ring
A ring fills as you scroll – with a number in the middle and stages below. It makes processes and promises tangible, such as “a demo in 48 hours”.
Suits Process, deadlines, project progress
100per cent
- Enquiry
- Draft
- Demo
- Online
06Scrolling
Reading progress
A slim bar shows how far you have read and which section you are in. Long texts feel shorter when you can see the end – on our guide pages it runs along the top.
Suits Guides, blog, long service pages
Loading time
If a page takes longer than three seconds to load, some visitors are already gone.
Phone first
Most enquiries come from phones – so the site has to work there first.
One clear message
What, for whom, how to get in touch: that has to be visible without scrolling.
07Scrolling
Text that builds up
A sentence becomes visible word by word as you scroll and keeps the eye on one key statement.
Suits Guiding principle, stance, manifesto
A good website explains in three seconds what you offer, for whom – and how to reach you.
08Scrolling
Highlighter
The most important words are marked as you read, as if someone had gone over them with a highlighter.
Suits Key statements, promises, prices
The first version is ready after 48 hours, and you only pay once you are satisfied.
09Scrolling
Sideways strip
The section stays put while the content moves past sideways as you scroll down. A lot of content in little space, without feeling cramped.
Suits Services, steps, projects
- 01
Conversation
We clarify what your website should achieve.
- 02
Draft
Layout, colours and type for your business.
- 03
Demo
After 48 hours the first finished version is ready.
- 04
Alterations
We adjust until everything fits.
- 05
Handover
The site goes live, and only now comes the invoice.
- 06
Care
Changes by message, usually the same day.
10Scrolling
Image that opens
A photo opens from the centre as it comes into view and zooms back very slightly – calmer than a simple fade-in.
Suits References, team, rooms, products
11Scrolling
Image chapter that widens
A large photo starts as a framed card and widens to full width as you scroll – with a single sentence on it. Works well as a transition between two chapters.
Suits Stance, workshop, location, history
12Scrolling
Stacked cards
Cards stack on top of each other as you scroll, the previous one stepping back slightly. A clear process in stages.
Suits Packages, stages, arguments
- Plan 1
Basic
€29 / month
Hosting, backups, technology
- Plan 2
Care
€59 / month
60 minutes of changes a month
- Plan 3
Care Plus
€89 / month
120 minutes, Google profile, report
- Plan 4
Shop
€149 / month
240 minutes, checkout tested
13Scrolling
Timeline that fills
The line grows as you read, and each stage lights up as soon as you reach it.
Suits Company history, process, dates
- 1998
Founded
One room, one workbench.
- 2006
Master business
The second generation takes over.
- 2014
New workshop
Space for larger orders.
- 2021
Twelve people
Training company with its own team.
- Today
Your project
We look forward to your enquiry.
Sample content
14Scrolling
Numbers that count up
Key figures count up as soon as they come into view. With real, verifiable values this is powerful – here with sample values.
Suits Experience, results, size
- 1,250clients served
- 98%would recommend
- 24 hrsresponse time
Sample values
15Scrolling
Bars that grow
Values grow as bars and the number counts along. It makes comparisons readable at a glance – here with sample values.
Suits Capacity, comparisons, results
- Monday64%
- Tuesday78%
- Wednesday85%
- Thursday92%
- Friday71%
Sample values · capacity by weekday
16Try it out
Before-and-after slider
A slider lays two images over each other. Drag it and you see the difference for yourself – here from draft to finished page.
Suits Renovation, beauty, relaunch
Finished17Try it out
Price calculator
Visitors set the options themselves and immediately see a price range. It answers the most common question before it is asked.
Suits Service providers, printing, cleaning, trades
18Try it out
Tabs with a sliding marker
Content in tabs, with the marker sliding to the selected item.
Suits Services, menu, price lists
Websites
From a lean business card to a multilingual company website. From €990, one-off.
Online shops
Products, payment, shipping – fully set up. From €2,000, one-off.
Care
No base fee with changes charged by time, or four care plans from €29 a month, cancellable monthly.
19Try it out
Questions that open smoothly
Answers don't snap open but glide open and closed. Without JavaScript it works just the same, only without the motion – that is how all questions on this website work.
Suits FAQs, details, conditions
How quickly will my website be ready?
The first finished demo version is ready within 48 hours of the first conversation. How quickly the site then goes live depends on the fine-tuning – often the whole project is completed within one to two weeks.
What do you need from me to get started?
Surprisingly little: your logo (if you have one), some information about your services and ideally a few photos. Everything else – text, structure, design – we can take care of. Many of our clients invest less than two hours of their own time in the project overall.
Do you only work in Berlin?
No. We are based in Berlin and work across Germany. In Berlin we are happy to come to your premises for an appointment. Outside Berlin, the conversation, coordination and handover take place by phone, WhatsApp, email or video – without you having to travel anywhere.
20Pointer
Browser frame that scrolls itself
A screenshot slowly runs through the whole page inside the browser frame – on a computer as soon as you point at it, on a phone as soon as it is in view, or at the push of a button.
Suits References, portfolio, products
Sample project
21Pointer
Magnetic button and tilting card
With the mouse, the button follows the pointer a little and the card tilts with a reflection of light. On a phone it tilts as you scroll and under your finger. Small details that feel high-quality.
Suits Main call to action, offers, products
Package
Care Plus
€89 / month
120 minutes of changes, Google profile, monthly report.
22Pointer
Spotlight on dark surfaces
A soft cone of light follows the mouse pointer across dark tiles – on a phone it follows your finger, or it wanders by itself. Calm, modern, without distracting from the content.
Suits Services, benefits, technology
Fast
Lean technology, short loading times.
Accessible
Strong contrast, clear structure.
No third parties
No external scripts, no cookies.
23Automatic
Changing words
One word in the heading changes at a calm pace. It addresses several target groups in one sentence.
Suits Home page, target groups, offers
Websites for trades, practices, hospitality, online shops and service providers
24Automatic
Ticker
Terms, logos or promises run against each other in two rows. It stops as soon as you point at it.
Suits Services, partners, promises
- Web design
- Online shops
- Hosting
- Care
- Copywriting
- Google profile
- Accessible
- Multilingual
- See it first
- Then pay
- Demo in 48 hours
- No payment upfront
- The website is yours
- Direct line
Do you have an idea of your own?
Many sections grow out of a sentence from one of our clients – the 48-hour clock on our home page, for example. Tell us what your visitors should understand, and we turn it into movement.