Home web design effects
--:--:--
Request a project
// web effects

Web effects & interactions.

Modern websites thrive on motion. Effects can be combined and tailored to the brand to surprise users and guide their attention. Here is an overview of what is possible, all live in the browser and entirely on your own site, with no third-party services.

ModernYour site keeps up with the times
CareShows there is real effort behind it
FocusGuides the eye to what matters
GDPRCompliant, no tracking or cookies

Work that stays in motion.

Move the mouse · images follow the trail Dark

Cursor image trail

Cursor

As the cursor moves, small image tiles bloom along its path and fade away again · ideal for portfolio and reference sections.

SVG line draw

Scroll

An illustration draws itself stroke by stroke when it comes into view · great for icons, diagrams and signatures.

The cursor acts as a lens Dark

Halftone portrait

Photo

A photo is translated into a live dot raster; the cursor acts as a lens that locally enlarges the grid · a striking editorial look.

MOTION

Move the mouse over the letters

Wave text

Headline

Letters swing on a calm sine wave; under the cursor the amplitude grows · typography that feels alive.

Drag · the grid is endless Dark

Infinite drag grid

Photo

An image grid without beginning or end: dragging moves the surface freely in any direction with gentle inertia · an immersive opener for galleries.

The mouse shifts the current Dark

Plasma shader

Background

Soft colour currents from a WebGL shader flow into each other and react to the mouse · a living background without a single image.

Scroll · the image grows
Full stage.Scroll-driven zoom
Dark

Scroll zoom hero

Scroll

While scrolling, the image grows from a framed crop to the full stage · a cinematic transition between chapters.

Scroll · speed and skew react Dark

Kinetic typography

Headline

Running type bands are coupled to scroll velocity: the faster you scroll, the more the lines accelerate and lean.

Nature · Outdoor

Depth that moves.

Move the mouse · layers shift Dark

Photo parallax hero

Photo

Several photo layers shift at different speeds against the cursor · creates real depth for immersive hero areas.

Digitale Wirkung.

Gradient Headline

Gradient text

Headline

For hero headlines that draw attention to the key message with a calm animated colour gradient.

Scroll assembles the image Dark

Mosaic assembly

Photo

Scattered tiles snap together into a single photo as visitors scroll, guiding attention to a key image.

Analysis

A clear view of website & social.

Content

Turn material into an effective presence.

Tools

Digital helpers that actually help.

Dark

Glass cards over photo

Cards

Frosted glass cards float over a colourful photo · a modern, premium look for hero and pricing sections.

MeshVerlauf Gradient Mesh
Dark

Mesh gradient

Background

Calm animated colour gradient as a background for hero areas, sections or cards without distracting motion.

AURORA Dark

Aurora gradient

Background

A softly flowing gradient · an elegant, lively hero with no imagery at all.

Dark Move the mouse

Reactive dot grid

Background

Subtle technical background for hero sections that gently reacts to the cursor to guide attention.

Move the mouse Dark

Particle network

Background

Connected dots react to the mouse · technical and alive. Use as a deliberate accent.

Move to magnify Dark

Loupe / detail reveal

Photo

A magnifier follows the cursor and enlarges the detail underneath · great for product details and maps.

Move across the image Dark

Liquid Image Hover

Photo

A photo that liquefies and shifts colours towards the cursor, giving hero images a tactile, memorable feel.

Portfolio · Personal brand IN COLOUR
Move the mouse · colour follows Dark

Colour spotlight

Photo

Like the torch, but colourful: a cold duotone comes alive in full colour under the cursor · emotional, warm, brand-friendly.

Move the mouse Dark

Fluid Cursor

Cursor

Colourful fluid trails follow the pointer and add a lively, memorable touch to a landing page hero.

Mouse pulls a blob Dark

Metaball blobs

Background

Organic merging colour blobs create a lively, premium background for hero sections.

Mouse turns the globe Dark

Particle globe

Background

A rotating point globe signals global reach and networked services on a hero section.

Click a side image Dark

3D cover flow gallery

Photo

Presents products or references as a rotating 3D gallery that draws the eye and invites interaction.

SaaS · Startup

Software that thinks ahead.

Onboard teams in minutes · not weeks.

Start free
Dark

Aurora hero

Hero

A colourful, living hero for tech and SaaS brands: soft aurora gradients, a clear promise and a glowing call to action.

Brand · Campaign

Colour that sticks.

Dark

Duotone brand hero

Photo

Any photo rendered in a bold brand duotone with a slowly shifting hue · colourful, distinctive hero for brands, retail and events.

Move the mouse to steer Dark

Warp starfield

Background

Stars streak past at warp speed and react to the mouse · a lively, immersive background.

SIGNAL
Hover the text Dark

RGB Split

Text

Chromatic aberration on hover gives headlines a technical, high-signal feel.

isiomedia
Move the mouse close Dark

Particle Text

Text

Your brand name assembles from particles and reacts to the cursor, an eye-catching intro for a hero section.

0%
Scroll to scrub the scene Dark

Scroll cinema (scrubbing)

Scroll

Ties an animated scene directly to scroll position, so visitors control the reveal at their own pace.

3D TILT
Mouse over the card

3D tilt card

Tiles

The card tilts in 3D towards the mouse, with a glare highlight. For product and project tiles.

Rotates & shines Dark

Product showcase

3D

A floating object rotates slowly with a travelling specular highlight · a premium stage for products, cards or devices.

Travel · Hospitality

Arrive.

Places that stay with you.

Discover
Dark

Ken Burns hero

Photo

A large photo breathes with a slow zoom and warm cinematic grade · an emotional hero for travel, hotels and restaurants.

Texture · Ripple

Everything flows.

Water-like distortion Dark

Photo ripple

Photo

A subtle water distortion drifts across the photo · an unusual, eye-catching texture for hero areas.

Photo gallery

Photo

An image grid that zooms on hover with a coloured overlay and a label · practical for portfolios, shops and references.

Dark

Perspective grid

Background

An endlessly flowing grid floor adds depth and a confident, technical mood to hero areas.

01  /  02  /  03  /  04
01

Capture attention

An intro panel sets the scene and draws the visitor in.

02

Show the value

Each step reveals a further aspect of the offer in sequence.

03

Build trust

Content unfolds calmly so the message stays easy to follow.

04

Lead to the action

The final panel guides the visitor towards the next step.

Scroll down to pan sideways Dark

Horizontal scrollytelling

Scroll

Turns vertical scrolling into a guided sideways story that presents content step by step.

Service
Cases
Glow follows the cursor

Cursor glow cards

Cards

Cards light up under the cursor · great for service and feature grids.

Premium planBorder beam

Border beam

Cards

A light beam travels along a card's edge, drawing the eye to pricing tiles or featured cards.

OUT OF THE DARK

Move the mouse across the face Dark

Photo spotlight

Photo

The cursor lifts a face out of the dark like a torch · a striking, emotional hero image.

Hover the points Dark

Hotspot image

Photo

Interactive points on a photo reveal labels on hover · ideal for product features, machines or floor plans.

Travel
Outdoor
Nature
Coast
Cards stack & cycle Dark

Sticky photo stack

Scroll

Photo cards stack and cycle through · a storytelling pattern for portfolios and references.

Morphing blob

Shape

Works as a calm, organic focal point in hero areas or placeholders without distracting from the actual content.

SPOTLIGHTSPOTLIGHT
Move the mouse across the area Dark

Spotlight

Hero

Dark surface; the cursor reveals content like a flashlight. A strong, memorable hero opening.

ISIOMEDIA

Continuous RGB glitch

Glitch text

Headline

A digital RGB split that gives tech and gaming brands an edgy, energetic headline.

Image in type OUTDOOR Photo lives inside the letters Dark

Image-in-type hero

Hero

A photo lives inside a huge word and slowly drifts · a memorable, graphic brand opening.

STUDIO

image in text Dark

Image-in-text

Hero

Suited to hero sections where a single keyword serves as the focal point and presents the brand clearly and concisely.

Coaching · Results

+0 %

more performance in 12 weeks

Counts up when it scrolls in Dark

Win moment

Scroll

An emotional photo plus a key figure that counts up on scroll · turns a success or result into a hero moment.

Before After
Drag / hover to compare Dark

Before / after

Compare

A drag slider reveals the graded, vibrant result next to the flat original · ideal for photo editing, real-estate and retouching services.

Nachher
Drag the slider

Before/after

Compare

Places two states side by side, making the value of a revision immediately visible and easy to grasp.

One element in colour Dark

Selective colour

Photo

A greyscale photo with a single element popping in colour · directs the eye to product or brand.

  • Brand relaunch
  • Web platform
  • Interior campaign
  • Product launch
Hover the entries

Hover image reveal

Cursor

Project or service names; hovering pops the matching image at the cursor · perfect for references and portfolios.

Finally a website we can maintain ourselves · and that still looks high-end.
Sandra VogtHead of Marketing
Clearly structured, on schedule. The result convinces our customers.
Martin ReetzManaging Director
From existing material to a coherent presence. Exactly what we were missing.
Julia BrandtSales
Dark

Testimonial slider

Cards

Portrait plus quote, auto-rotating through several voices · builds trust with references and reviews.

DEPTH
layer 01 parallax
Move the mouse

Parallax layers

Depth

Creates spatial depth in hero areas and guides the eye towards central content and key messages.

ISIOMEDIA

Click / hover to re-decode

Text-Scramble

Headline

Letters decode into place · attention for headlines and word changes.

We make brandsvisible.fast.digital.bold.

Word rotator

Headline

A fixed phrase with a rotating keyword keeps a hero claim alive and packs several messages into one line.

STRATEGIEVISUALSWEBDESIGNMOTIONSTRATEGIEVISUALSWEBDESIGNMOTION
AI-assisted·DSGVO·portable·fast·AI-assisted·DSGVO·portable·fast·

Marquee

Claims

Endless running strips add energy and carry messages and key services.

Dark

Reference marquee

Social proof

An endless strip of reference thumbnails, colour on hover · trust through social proof.

ISIO
MEDIA
Headline Replay with the button

Split-text stagger

Headline

Reveals a headline letter by letter, drawing the visitor's eye to the core message as the page builds up.

Replay with the button

Scroll reveal

Basics

Guides attention while scrolling by revealing text blocks and lists in a staggered sequence.

No signal
01 / IMG Clip-Wipe
Hover or replay

Clip wipe

Media

Reveals images or media panels with a clean diagonal wipe on scroll, drawing the eye deliberately.

012345678901234567890123456789+
Projects
01234567890123456789%
Satisfied

Odometer numbers

Metrics

Rolling digits count up like a mechanical counter · a stronger, more tactile take on key figures.

0
Projects
0
Satisfied

Count-up numbers

Metrics

Numbers count up when they enter view · trust and social proof.

Click the button

Success confetti

Micro

Confirms successful form submissions with a brief confetti moment, giving users a clear and positive feedback signal.

The button attracts the cursor

Magnetic Button

CTA

The CTA reacts magnetically to the mouse and draws the eye to the key action.

Hover me Custom cursor follows

Custom cursor

Cursor

A branded cursor ring that grows over interactive targets gives a site a polished, bespoke feel.

Dark Move the mouse

Cursor trail

Cursor

Guides attention in heroes or product demos and turns cursor movement into a subtle, brand-coloured interactive detail.

>KI-gestützt.

Typewriter

Claims

Rotating key claims in typewriter style draw focused attention to core value propositions in hero sections.

Editorial Film.Grain

Film grain

Texture

Adds an editorial, premium texture to headlines and hero areas, subtly setting them apart from flat default layouts.

Link underline

Navigation

Clear hover feedback for navigation links that aids orientation and subtly anchors the brand blue in menus.

How we use this in projects

A lot is possible here, from subtle animations to striking visual effects. What works best depends on the brand, the content and the occasion, and it varies from project to project. The best approach is to talk it through together, decide what the effects should achieve and find the right path, implemented cleanly and in a GDPR-compliant way.

Request a project