Entrance animations
Headings fade in and the hero visual rotates in on load, with Elementor’s built-in animations.
THE CONTEXT
A software company that sells connection.
The client, a UK company, offers software and expert services for compliance, safety and facilities teams, built around one idea: connecting everything compliance-related in one place. The site had to show that idea, not only say it.
THE CHALLENGE
A B2B site has a lot to explain and still has to feel like one connected thing. The goals:
- Give the homepage a background that reacts to the visitor, in light custom code
- Turn the seven-module ecosystem into a diagram people can explore, not a static image
- Keep everything working on tablet and mobile, with simpler versions where hover does not exist
MY ROLE
Build it, and code what the builder can’t.
- WordPress development with Elementor
- Custom HTML, CSS and JavaScript for the interactive parts
- Responsive versions for tablet and mobile
The visual design was supplied by Three Lemurs as a PDF. The build and the custom code are mine.
STACK
- WordPress
- Elementor
- HTML
- CSS
- JavaScript
- SVG filters
- WebM / MOV video
- Image carousel
- Embedded YouTube
- Responsive
PROBLEMS & SOLUTIONS
Four pieces of custom behaviour.
01
A background that follows the cursor
THE PROBLEM
A static hero does not say “connected”. I wanted the first screen to react to the visitor without slowing the page down.
WHAT I BUILT
- Five soft gradient blobs sit behind the headline. An SVG “goo” filter (blur plus a colour matrix) merges them like liquid.
- One of the blobs follows the mouse: a short script moves it to the cursor position on every mousemove.
- About ten lines of JavaScript, no animation library, running inside an Elementor HTML widget.
02
An ecosystem you can explore
THE PROBLEM
The client’s product has seven connected modules. A static diagram cannot show what each one does.
WHAT I BUILT
- A base image with seven hotspot circles on top of it, one per module.
- Hover or click a hotspot: the diagram image changes and a text panel with a link to that module appears.
- Leaving the diagram returns to the base view. On tablet and mobile the page shows a static diagram instead.
03
Brand video in the hero
THE PROBLEM
A logo animation had to play behind the hero without fighting the headline or breaking in Safari.
WHAT I BUILT
- The video autoplays, loops and is muted, at 30% opacity so the headline stays readable.
- Two formats: MOV for Safari and WebM for the other browsers, so it plays everywhere.
- Hidden on tablet and mobile, where a static SVG illustration takes its place.
04
Responsive pieces
THE PROBLEM
A client logos strip and three value blocks had to hold up from desktop to phone.
WHAT I BUILT
- A logo carousel that autoplays, loops and pauses on hover: 6 logos per view on desktop, 3 on tablet, 2 on mobile.
- “Why choose us?” blocks with custom green SVG icons, laid out in Elementor.
- An embedded YouTube video that loads lazily, so it does not weigh on the first load.
ALSO BUILT
The rest of the site.
Module pages
Each ecosystem panel links to its own page on the site.
Responsive switching
Desktop-only video and diagram, with lighter versions on tablet and mobile.
Builder first, code second
Built in Elementor, with custom code only where the builder could not do it.